目录
一.创建对象
ECMAScript 6 开始正式支持类和继承。ES6 的类旨在完全涵盖之前规范设计的基于原型的继承模
式。
1.工厂模式
function createPerson(name, age, job) {
let o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
console.log(this.name);
};
return o;
}
let person1 = createPerson("Nicholas", 29, "Software Engineer");
let person2 = createPerson("Greg", 27, "Doctor");
这种工厂模式虽然可以解决创建多个类似对象的问题,但没有解决对象标识问题(即新创建的对象是什么类型)。
2.构造函数模式
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
console.log(this.name);
};
}
let person1 = new Person("Nicholas", 29, "Software Engineer");
let person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); // Nicholas
person2.sayName(); // Greg
与工厂模式的区别
没有显式地创建对象
属性和方法直接赋值给了 this
没有 return
new 操作符
(1) 在内存中创建一个新对象。
(2) 这个新对象内部的 [[Prototype]] 特性被赋值为构造函数的 prototype 属性。 (3) 构造函数内部的 this 被赋值为这个新对象(即 this 指向新对象)。
(4) 执行构造函数内部的代码(给新对象添加属性)。
(5) 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。
这两个对象都有一个constructor 属性指向 Person ,如下所示:
console.log(person1.constructor == Person); // true
console.log(person2.constructor == Person); // true
constructor 本来是用于标识对象类型的。不过,一般认为 instanceof 操作符是确定对象类型
更可靠的方式。前面例子中的每个对象都是 Object 的实例,同时也是 Person 的实例
构造函数的问题
定义的方法会在每个实例上都创建一遍,因此不同实例上的函数虽然同名却不相等
解决:可以把函数定义转移到构造函数外部
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName() {
console.log(this.name);
}
let person1 = new Person("Nicholas", 29, "Software Engineer");
let person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); // Nicholas
person2.sayName(); // Greg
虽然解决了相同逻辑的函数重复定义的问题,但全局作用域也因此被搞乱了,因为那个函数实际上只能在一个对象上调用。如果这个对象需要多个方法,那么就要在全局作用域中定义多个函数。这会导致自定义类型引用的代码不能很好地聚集一起。这个新问题可以通过原型模式来解决。
2.原型模式
每个函数都会创建一个 prototype 属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。它上面定义的属性和方法可以被对象实例共享。
与构造函数模式不同,使用这种原型模式定义的属性和方法是由所有实例共享的。因此 person1 和 person2 访问的都是相同的属性和相同的 sayName() 函数。
ECMAScript 中原型的本质:
理解原型
1.函数创建一个 prototype 属性(指向原型对象)
2.原型对象自动获得一个名为 constructor 的属性,指回与之关联的构造函数
脚本中没有访问这个 [[Prototype]] 特性的标准方式,但 Firefox、Safari 和 Chrome会在每个对象上暴露 __proto__ 属性,通过这个属性可以访问对象的原型
原型层级
会按照这个属性的名称开始搜索。搜索开始于对象实例本身。如果在这个实例上发现了给定的名称,则返回该名称对应的值。如果没有找到这个属性,则搜索会沿着指针进入原型对象。
isPrototypeOf() 会在传入参数的 [[Prototype]] 指向调用它的对象时返回 true
console.log(Person.prototype.isPrototypeOf(person1)); // true
getPrototypeOf() ,返回参数的内部特性[[Prototype]] 的值
hasOwnProperty() 方法用于确定某个属性是在实例上还是在原型对象上。这个方法是继承自 Object的,会在属性存在于调用它的对象实例上时返回 true
in 操作符会在可以通过对象访问指定属性时返回 true ,无论该属性是在实例上还是在原型上
列出所有实例属性,无论是否可以枚举,都可以使用 Object.getOwnPropertyNames()
3.对象迭代
静态方法Object.values() 和 Object.entries() 接收一个对象,返回它们内容的数组。
Object.values()返回对象值的数组, Object.entries() 返回键/值对的数组。
4.其他原型语法
function Person() {}
Person.prototype = { constructor:Person, //恢复constructor此时 [[Enumerable]] 为 true 可以枚举
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName() {
console.log(this.name);
}
};
重写之后, Person.prototype 的 constructor 属性就不指向 Person了
重写整个原型会切断最初原型与构造函数的联系,但实例引用的仍然是最初的原型
记住,实例只有指向原型的指针,没有指向构造函数的指针
使用的是兼容 ECMAScript 的 JavaScript 引擎,改为使用 Object.defineProperty() 方法来定义 constructor 属性
Object.defineProperty(Person.prototype, "constructor", {
enumerable: false,
value: Person
});
原型上搜索值的过程是动态的,所以即使实例在修改原型之前已经存在,任何时候对原型对象所做的修改也会在实例上反映出来。
主要原因是实例与原型之间松散的联系,实例和原型之间的链接是简单的指针,不是保存的副本。
5.原型的问题
1.弱化了向构造函数传递初始化参数的能力,会导致所有实例默认都取得相同的属性值。
2.属性是在实例间共享,对函数来说比较合适,但是对于包含引用值的时候,会出现问题
let person1 = new Person();
let person2 = new Person();
person1.friends.push("Van");
console.log(person1.friends); // "Shelby,Court,Van"
console.log(person2.friends); // "Shelby,Court,Van"
console.log(person1.friends === person2.friends); // true
不同的实例应该有属于自己的属性副本。这就是实际开发中通常不单独使用原型模式的原因。
二.继承
很多面向对象语言都支持两种继承:接口继承和实现继承。
前者只继承方法签名,后者继承实际的方法。
实现继承是 ECMAScript 唯一支持的继承方式,而这主要是通过原型链实现的。
1.原型链
每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型。
如果原型是另一个类型的实例呢?
那这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。
判断原型与实例的关系两种方式
1.instanceof 操作符
原型链中出现过相应的构造函数,返回 true
console.log(instance instanceof Object); // true
2.isPrototypeOf() 方法
原型都可以调用这个方法,如下例所示,只要原型链中包含这个原型,这个方法就返回 true
console.log(Object.prototype.isPrototypeOf(instance)); // true
原型链的问题
一.主要问题出现在原型中包含引用值的时候,原型中包含的引用值会在所有实例间共享
会导致原先的实例属性变成为了原型属性。
二.子类型在实例化时不能给父类型的构造函数传参。
2.盗用构造函数
介绍:
解决原型包含引用值导致的继承问题
使用apply() 和 call() 方法以新创建的对象为上下文执行构造函数
function SuperType() {
this.colors = ["red", "blue", "green"];
}
function SubType() {
// 继承 SuperType
SuperType.call(this);
}
let instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors); // "red,blue,green,black"
let instance2 = new SubType();
console.log(instance2.colors); // "red,blue,green"
相当于新的 SubType 对象上运行了SuperType() 函数中的所有初始化代码。结果就是每个实例都会有自己的 colors 属性。
优点:
传递参数,可以在子类构造函数中向父类构造函数传参
function SuperType(name){
this.name = name;
}
function SubType() {
// 继承 SuperType 并传参
SuperType.call(this, "Nicholas");
// 实例属性
this.age = 29;
}
let instance = new SubType();
console.log(instance.name); // "Nicholas";
console.log(instance.age); // 29
缺点:
1.必须在构造函数中定义方法、因此函数不能重用
2.子类也不能访问父类原型上定义的方法,因此所有类型只能使用构造函数模式。
因此盗用构造函数基本上也不能单独使用。
组合继承
综合了原型链和盗用构造函数
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
function SubType(name, age){
// 继承属性
SuperType.call(this, name);
this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
//添加方法
SubType.prototype.sayAge = function() {
console.log(this.age);
};
组合继承也保留了 instanceof 操作符和 isPrototypeOf() 方法识别合成对象的能力。
原型式继承
适用于:你有一个对象,想在它的基础上再创建一个新对象
Object.create() 方法
接收两个参数:作为新对象原型的对象,以及给新对象定义额外属性的对象(第二个可选)。 Object.create() 的第二个参数与 Object.defineProperties() 的第二个参数一样:每个新增属性都通过各自的描述符来描述。以这种方式添加的属性会遮蔽原型对象上的同名属性。
let person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
let anotherPerson = Object.create(person);
在只有一个参数时,
Object.create() 和下面的 object() 方法效果相同
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
创建一个临时构造函数,将传入的对象赋值给这个构造函数的原型,然后返回这个临时类型的一个实例, object() 是对传入的对象执行了一次浅复制。
寄生式继承
创建一个实现继承的函数,以某种方式增强对象,然后返回这个对象。
function createAnother(original){
let clone = object(original); // 通过调用函数创建一个新对象
clone.sayHi = function() { // 以某种方式增强这个对象
console.log("hi");
};
return clone; // 返回这个对象
}
这样继承了原来对象的所有属性和方法,同时增加了sayHi的方法
object() 函数不是寄生式继承所必需的,任何返回新对象的函数都可以在这里使用。
寄生式组合继承
组合继承存在效率问题。最主要的效率问题就是父类构造函数始终会被调用两次:一次在是创建子类原型时调用,另一次是在子类构造函数中调用。
function inheritPrototype(subType, superType) {
let prototype = object(superType.prototype); // 创建对象
prototype.constructor = subType; // 增强对象
subType.prototype = prototype; // 赋值对象
}
第一步是创建父类原型的一个副本。然后,给返回的prototype 对象设置 constructor 属性,解决由于重写原型导致默认 constructor 丢失的问题。最后将新创建的对象赋值给子类型的原型。
1.只调用了一次 SuperType 构造函数,避免了 SubType.prototype 上不必要也用不到的属性2.instanceof 操作符和isPrototypeOf() 方法正常有效。
寄生式组合继承可以算是引用类型继承的最佳模式。