一、对象基础

1. 对象属性的方式

对象属性的方式有两种：

obj.xxxobj['xxx']

那么，什么时候用到第二种（[‘属性名’]）的方式呢？

当属性名不是合法的标识名时

var obj = {} obj.content-type = 'application' // 报错 obj['content-type'] = 'application' // 正确

当 属性名不确定时

var obj = {} // 想要将 param 的值 作为 key var param = 'age' obj.param = 42 // 变成了 {param: 42}，不是想要的 obj[param] = 42 // {age: 42},正确

2. 对象的 key必须都是字符串

在 JS中，对象的 key 值，必须都是字符串形式

如果 key 是一个 对象、数组，那么会调用 toString方法，再存储进对象中

var a = {} var obj1 = {n: 2} var obj2 = {m: 3} /* 先调用 Obj1.toString()方法，变成 [object Object] 所以 变成 a = { [object Object]: 4 } */ a[obj1] = 4 a[obj2] = 5 // 所以最后操作的，都是 key = [object Object] 的属性，a['[objetc Object]'] console.log(a[obj1])

二、对象构建模式（进化史）

1、Object构造模式

步骤：先创建空Objetc对象，再动态添加属性、方法

缺点：语句太多

var obj = new Object() obj.name = 'Tom' obj.age = 42

2、对象字面量（重点）

步骤：使用{}创建对象，同时指定属性、方法缺点：如果创建多个对象，有重复代码 // 创建一个 var obj = {name: 'Tom', age: 42} // 但如果要同时创建多个，就很繁琐 var obj2 = {name: 'Jerry', age: 18} var obj3 = {name: 'Tanmi', age: 20} var obj4 = {name: 'Duck', age: 22}

3、工厂模式

步骤：通过工厂函数 动态创建对象并返回适用于创建多个对象问题：对象没有一个具体的类型，都是 Object 类型 // 工厂函数：返回一个需要的数据的函数 function Person(name, age) { return { name, age } } var obj = Person('Tom', 42) var obj2 = Person('Jerry', 18)

4、构造函数模式（类）

步骤：自定义构造函数，通过new创建对象适用于创建多个类型确定的对象缺点：每创建一个实例，每个实例上都带着相同的方法，浪费内存 function Person(name, age) { this.name = name this.age = age this.showName = function () { console.log(this.name) } } var person1 = new Person('Tom', 42) var person2 = new Person('Jerry', 18) console.log(person1) console.log(person2)

5、构造函数 + 原型组合模式

步骤：自定义构造函数，属性在函数初始化，方法添加到原型上解决了构造函数模式占用内存的问题 // 使用类 function Person(name, age) { this.name = name this.age = age } // 使用 原型 Person.prototype.showName = function() { console.log(this.name) } var person1 = new Person('Tom', 42) var person2 = new Person('Jerry', 18) person1.showName() person2.showName() console.log(person1) console.log(person2)

三、继承模式

1、原型链继承

重点：子类的原型 成为 父类的实例代码：子类对象.prototype = new 父类对象()注意：别忘了指定子类原型对象的构造函数为自己本身：子类对象.prototype.constructor = 子类本身理解： // 父类： Person function Person(name, age) { this.name = name this.age = age } Person.prototype.showName = function() { console.log(this.name) } // 子类： Child function Child(name, age) { this.name = name this.age = age } var child = new Child('Jerry', 18) /* 如何使得 child 可以调用 showName 方法呢 child.showName() */

下图是原本的原型链图：

那么，我们修改原型链，将Child的原型对象的 上级 改为 Person的原型对象就好了

所以：

// 父类： Person function Person(name, age) { this.name = name this.age = age } Person.prototype.showName = function() { console.log(this.name) } // 子类： Child function Child(name, age) { this.name = name this.age = age } // 1. 使得 子类的原型对象成为父类的实例对象 Child.prototype = new Person() // 2. 补充原型的构造函数 为子类本身 Child.prototype.constructor = Child var child = new Child('Jerry', 18) // Child --> Child.prototype --> Person.prototype(showName) --> Object.prototype child.showName() // Jerry

2、借用构造函数继承

用于继承属性

步骤：

使用父类的构造方法，作为继承属性方法改变父类构造方法this指向 // 父类： Person function Person(name, age) { this.name = name this.age = age } // 子类： Child function Child(name, age, sex) { // this.name = name // this.age = age // 1. 借用 Person 中的代码 // 2. 更改this指向，改为指向 Child的实例对象 Person.call(this, name, age) this.sex = sex } var child = new Child('Jeery', 18, 'man')

3、借用构造函数继承 + 原型链继承

原型链继承：可以继承父类的方法借用构造函数继承：可以继承父类的属性组合起来，就是一个合格的继承了 // 父类： Person function Person(name, age) { this.name = name this.age = age } Person.prototype.showName = function() { console.log(this.name) } // 子类： Child function Child(name, age, sex) { // 1. 接用 Person 中的代码 // 2. 更改this指向，改为指向 Child的实例对象 Person.call(this, name, age) this.sex = sex } // 3. 使得 子类的原型对象成为父类的实例对象 // 4. 补充原型的构造函数 为子类本身 Child.prototype = new Person() Child.prototype.constructor = Child var child = new Child('Jeery', 18, 'man') child.showName()