Javascript中，对象是非常重要的一个概念。对象可以用来封装数据和行为，并且通过对象来模拟现实世界中的事物。

1、原型和原型链

在Javascript中，每个对象都有一个原型对象。原型对象是一个对象，它定义了该对象的属性和方法。如果在对象本身找不到某个属性或方法，Javascript会自动查找该对象的原型对象，直到找到该属性或方法为止。

var person = {
  name: "张三",
  age: 18,
  getAge: function() {
    return this.age;
  }
};
var student = Object.create(person);
student.grade = "A";

在上述例子中，我们创建了一个person对象，它有name、age和getAge三个属性。然后我们通过Object.create()方法创建了一个新对象student，并将person对象作为其原型对象。student对象中并没有name、age和getAge属性，但它可以通过原型链从person对象中继承这些属性。

2、构造函数和类

除了使用字面量创建对象，我们还可以使用构造函数来创建具有相同属性和方法的多个对象。构造函数的本质是一个普通函数，我们可以通过new操作符来调用它并创建出一个新的对象。构造函数通常以大写字母开头，以便于和普通函数区分。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.getAge = function() {
    return this.age;
  }
}
var personZhangSan = new Person("张三", 18);
var personLiSi = new Person("李四", 19);

在上述例子中，我们定义了一个Person构造函数，它有name、age和getAge三个属性。然后我们通过new操作符创建了两个新的对象personZhangSan和personLiSi。

在ES6中，Javascript引入了类的概念。类是一组相似对象的集合，它可以定义属性和方法，以及继承其他类的属性和方法。类是一种更易于理解和维护的方式来创建对象。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getAge() {
    return this.age;
  }
}
let personZhangSan = new Person("张三", 18);
let personLiSi = new Person("李四", 19);

在上述例子中，我们定义了一个Person类，它有name、age和getAge三个属性。然后我们通过new操作符创建了两个新的对象personZhangSan和personLiSi。

3、继承

继承是一种非常重要的概念，它允许我们从一个类或对象中继承属性和方法，并在其基础上添加或修改特定行为。

在Javascript中，我们可以使用原型和原型链来实现继承。例如，在前面的例子中，我们已经使用了原型链来实现继承。

function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
var studentZhangSan = new Student("张三", 18, "A");

在上述例子中，我们定义了一个Student构造函数，并通过Person.call()方法将Person的属性和方法添加到Student对象中。然后我们将Person对象设置为Student对象的原型，从而实现了继承。

在ES6中，我们可以使用extends关键字和super函数来实现继承。

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}
let s = new Student("张三", 18, "A");

在上述例子中，我们定义了一个Student类，并使用extends关键字将其继承自Person类。在类的构造函数中，我们使用super函数调用父类的构造函数来添加父类的属性和方法。然后我们添加了grade属性，从而实现了继承。

4、深拷贝和浅拷贝

在Javascript中，拷贝对象是一个非常常见的操作。拷贝一个对象意味着创建一个新的对象，该对象与原始对象具有相同的属性和方法。但是，在拷贝对象时需要注意一个重要的问题：深拷贝和浅拷贝。

浅拷贝仅仅复制对象的引用，而不是对象本身。这意味着如果我们更改拷贝对象或原始对象的属性，那么两者都将受到影响。深拷贝则会创建一个全新的对象，该对象与原始对象完全独立，修改拷贝对象或原始对象的属性不会相互影响。

var person = {
  name: "张三",
  age: 18,
  hobbies: ["music", "reading"]
};
// 浅拷贝
var shallowCopy = Object.assign({}, person);
// 深拷贝
var deepCopy = JSON.parse(JSON.stringify(person));

在上述例子中，我们定义了一个person对象，它有name、age和hobbies三个属性。然后我们使用Object.assign()方法创建了一个浅拷贝对象，并使用JSON.parse()和JSON.stringify()方法创建了一个深拷贝对象。如果我们将hobbies数组中的元素从"music"改为"painting"，那么只有深拷贝对象的hobbies数组会被修改，浅拷贝对象和原始对象的hobbies数组都不受影响。

在本文中，我们介绍了Javascript中对象的高级应用，包括原型和原型链、构造函数和类、继承以及深拷贝和浅拷贝。这些概念是Javascript面向对象编程的基础，掌握它们将使你能够更好地理解和使用Javascript中的对象。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。

avaScript编程语言:

1.专门在浏览器编译与执行的编程语言

2.帮助浏览器解决用户提出简单需求

3.基于面向对象采用弱类型语法风格实现

JavaScript学习教程

老杜讲解的JavaScript教程，内容涵盖了JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点。

接下来说的JavaScript学习内容均与下边的javaweb学习教程相结合

http://www.bjpowernode.com/?chaijavaweb

基础语法

一、JavaScript命令书写方式

1.在HTML文件中<script>内部进行命令书写

2. 在js文件中书写命令格式【推荐】

二、JavaScript中变量

1.变量声明方式: JavaScript弱类型编程语言，因此禁止使用具体数据类型修饰变量

• var 变量名;
• var 变量名1,变量名2；

2.变量赋值方式

• var 变量名=值
• var 变量名;
• 变量名=值；

3.变量名命名规则

1）变量名只能存在字母，数字，下划线, 美元符号($)

2) 变量名不能以数字为开始

3) 不能使用JavaScript关键字作为变量名 var var=10; error

三、JavaScript中数据类型

1.分类：

1）基本数据类型

2) 高级引用数据类型

2. 基本数据类型

1) number类型：数字类型，整数，单精度，双精度都是number类型

2) string类型： 字符串类型，字符串既可以包裹在一对双引号中也可以包裹在一对单引号 "abc" 'abc'

3) boolean类型： 布尔类型 值true/false

3.高级引用数据类型

1) function类型：函数类型.相当于Java中Method类型。一个function类型对象用于管理一个函数

2) object类型： 在JavaScript中所有通过构造函数生成的对象都是object

4. 变量与数据类型之间关系：

JavaScript中根据变量赋值内容判断变量的数据类型

四、JavaScript中特殊值

1. undefined:javascript中变量没有赋值时，其默认值都是undefined。

此时变量数据类型也是undefined

2.NaN： 表示非法数字。此时变量数据类型是number

3.Infinity:表示一个无穷大数字.此时变量数据类型是number

4.null：表示当前对象指向一个空内存，但是空内存不能存储数据

此时对象数据类型是object

五、JavaScript中控制语句和循环语句

1.与Java控制语句和循环语句语法完全一致

2.控制语句 if ,switch

3.循环语句 for while,do..while

六、JavaScript中数组

1.JavaScript中数组相当于Java中List集合

2.JavaScript中数组一次可以存放任意类型数据

3.JavaScript中数组控制内存个数可以随意改变

七、JavaScript中函数

1.函数声明格式

function 函数名(形参名，形参名){

命令行；

命令行；

eturn 返回值

}

1) 函数声明时，必须使用function修饰进行修饰

2) 函数声明时，禁止指定返回数据类型

3)函数声明时， 形参只能指定名称，但是不能指定数据类型，也不能使用var进行修饰

4）函数声明时，可以通过return指定返回数据。

2.函数调用：

对象.函数(实参)

***window对象中属性和函数在调用时，可以不写window

JavaScript应用篇（面试）

一、JavaScript中dom对象与document对象

1.dom对象

1) dom对象：document Object model;文档模型对象

2) 一个dom对象用于管理一个HTML标签

3)浏览器每加载一个HTML标签时，自动为这个HTML标签生成一个DOM对象

2.document

1)document对象 文档对象

2) 浏览器根据html标签声明顺序在内存中以树形结构方式存储DOM对象.

3) document对象由浏览器生成 。一个浏览器只有一个document对象

4）document对象负责根据定位条件定位dom对象

二、dom对象定位方式：

1.根据标签Id属性定位关联的DOM对象

var domObj = document.getElementById("id属性")

2.根据标签name属性定位关联的DOM对象

var domArray = document.getElementsByName("name属性")

3.根据标签类型定位关联的DOM对象

var domArray = document.getElementsByTagName("标签类型")

三、dom对象对标签管理：

1.dom对象作用：用于对管理的标签中属性进行赋值与取值操作

2.dom对象管理标签中value属性：

var num = dom.value; //读取

dom.value = num; //赋值

3.dom对象管理标签状态属性

checked是boolean checked=true 表示被选中，checked=false 表示未被选中

4.dom对象管理双目标签提示信息

dom.innerText=值；

var num = dom.innerText;

5.dom对象管理标签的样式属性

dom.style.样式属性名=值

var num = dom.style.样式属性名

四、监听事件

1. 介绍：

1）HTML标签中一组属性

2）监听用户在何时以何种方式来操作当前标签。当监听行为发生时。

监听事件通知浏览器调用javascript函数进行处理

2.分类：

1）监听用户使用鼠标操作标签---鼠标监听事件

2) 监听用户使用键盘操作标签---键盘监听事件

3.键盘监听事件

1）onkeydown: 监听用户在何时在当前标签上按下键盘

2）onkeyup:监听用户在何时在当前标签上弹起键盘

3）onkeypress：监听用户在何时在当前标签按下一次键盘

4.键盘监听事件

1）onclick:监听用户何时使用鼠标单击当前的HTML标签

2) onblur：监听用户何时使用鼠标让当前标签丢失光标

3）onfocus:监听用户何时使用鼠标让当前标签获得光标

4) onmouseover:监听用户何时使用鼠标悬停在标签上方

5) onmouseout：监听用户何时使用鼠标从标签上方移开

6）onchange:监听用户何时使用鼠标改变下拉列表中选中项

avaScript 中的对象用于以“键：值”对的格式存储数据集合。 包含在一个对象中，我们可以有任意数量的变量和/或函数，这些变量和/或函数被称为对象属性和方法。

创建对象

让我们举个例子！ 要将变量 car 初始化为对象，我们使用花括号 {}：

var car = {};

我们现在有一个空对象，可以通过开发者工具控制台访问，只需输入我们的变量名：

car// {} [object]

一个空对象并不是那么有用，所以让我们用一些数据来更新它：

var car = {
  name: 'Tesla',
  model: 'Model 3',
  weight: 1700,
  extras: ['heated seats', 'wood decor', 'tinted glass'],
  details: function() {
    alert('This ' + this.name + ' is a ' + this.model + ' it weighs ' + this.weight + 'kg and includes the following extras: ' + this.extras[0] + ', ' + this.extras[1] + ' and ' + this.extras[2] + '.');
  },
  display: function() {
    alert('This car is a ' + this.name + '.');
  }
};

让我们在我们的开发者工具控制台中访问这些数据：

car.name         // Tesla
car.model        // Model 3
car.weight       // 1700
car.extras[1]    // wood decor
car.details()    // This Tesla is a Model 3 it weighs 1700kg and includes the following extras: heated seats, wood decor and tinted glass.
car.display()    // This car is a Tesla.

如您所见，每个名称/值对必须用逗号分隔，并且每种情况下的名称和值用冒号分隔。 语法将始终遵循以下模式：

var objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

对象成员的值几乎可以是任何东西 - 在我们的汽车对象中，我们有两个字符串、一个数字、一个数组和两个函数。 前四项是数据项，称为对象的属性。 最后两项是允许对象使用该数据做某事的函数，被称为对象的方法。

这种对象被称为对象字面量 - 我们在创建对象时就已经写出了对象的内容。 这与从类实例化的对象进行比较，我们稍后会看一下。

点符号

上面，您已经看到使用点符号访问对象的属性和方法。 对象名称 car 充当命名空间——需要先输入它才能访问对象中的任何内容。 然后你写一个点，后面跟着你想访问的项目——这可以是一个简单属性的名称，一个数组属性的项目，或者对对象方法之一的调用，例如：

car.name
car.extras[1]
car.details()

删除属性

我们可以使用 delete 运算符来删除属性，如下所示：

car.model
// Tesla 3delete car.modelcar.model
// undefined

方括号

例如，如果我们的对象中有一个多字属性，例如：

var user = {
  name: "Richard",
  age: 32,
  "likes steaks": true  // a multiword property name must be quoted
};

我们无法使用点符号访问多字属性：

user.likes potatoes     // syntax error!

这是因为点要求键是有效的变量标识符。 那是没有空间和其他限制。

另一种方法是使用方括号，它适用于任何字符串：

let user = {};// set
user["likes steaks"] = true;// get
alert(user["likes steaks"]); // true// delete
delete user["likes steaks"];

更新对象成员

我们可以通过简单地用新值声明您想要设置的属性来更新对象中的值，如下所示：

user.age          // 32
user.age = 33     // 33
user.age          // 33

您还可以创建对象的全新成员。 例如：

user.surname = 'Smithessson';
// user
{name: "Richard", age: 33, likes steaks: true, surname: "Rembert"}

什么是“this”？

您可能已经注意到在我们前面的示例中使用了“this”这个词。 请参阅以下内容：

display: function() {
  alert('This car is a ' + this.name + '.');
}

this 关键字指代正在编写代码的当前对象 - 所以在这种情况下 this 等价于 car。

为什么不直接写汽车呢？ 编写结构良好的面向对象代码是最佳实践，这样做非常有用。 它将确保在成员的上下文发生变化时使用正确的值（例如，两个不同的汽车对象实例可能具有不同的名称，但在显示自己的信息时希望使用自己的名称）。

例如：

var car1 = {
  name: 'Tesla',
  display: function() {
    alert('This car is a ' + this.name + '.');
  }
}
var car2 = {
  name: 'Toyota',
  display: function() {
    alert('This car is a ' + this.name + '.');
  }
}

在这种情况下，car1.display() 将输出“This car is a Tesla”。并且 car2.display() 将输出“This car is a Toyota.”，尽管这两种情况下方法的代码完全相同。

由于 this 等于代码所在的对象 - 当您动态生成对象（例如使用构造函数）时，this 变得非常有用，这超出了本文的范围！

概括

就是这样！您现在应该对如何在 JavaScript 中使用对象有了一个很好的了解 - 包括创建自己的简单对象以及访问和操作对象属性。您还将开始看到对象作为存储相关数据和功能的结构是如何非常有用的。

例如，如果您试图将汽车对象中的所有属性和方法作为单独的变量和函数来跟踪，那将是非常低效的，并且我们会冒与其他具有相同名称的变量和函数发生冲突的风险.对象让我们将信息安全地锁定在它们自己的包中。

关注七爪网，获取更多APP/小程序/网站源码资源！