1. 原型链继承
它是下面这个形式的。
function F() {
this.f_age = 8;
this.f_name = 'father';
}
F.prototype.getFAge = function() {
return this.f_age;
}
function S() {
this.s_age = 3;
}
S.prototype = new F();
S.prototype.getSAge = function() {
return this.s_age;
}
let s = new S();
console.log(s.getFAge()); // 8
console.log(s.getSAge()); // 3
console.log(s.constructor); // [Function: F]
console.log(s instanceof S); // true
console.log(s instanceof F); // true它的主要过程：
- 实例化父类 F -> f
- 将子类的原型对象 S.prototype 指向 f
- 实例化子类 S -> s
加深理解：
s.__proto__ -> S.prototype -> f.__proto__ -> F.prototype
需要注意的是：
- 本来 S 的 constructor 是 S，但是因为 S.prototype 重写了，所以现在 constructor 是 F.
查找机制: s -> S.prototype -> F实例 -> F.prototype
function F() { this.name = 'F'; } F.prototype.name = 'F-prototype'; function S() {} S.prototype = new F(); let s = new S(); console.log(s.name); // F
原型继承中 子类 重写 父类的方法
function F() {
this.x = true;
}
F.prototype.getF = function() {
return this.x;
}
function S() {
this.y = false;
}
S.prototype = new F();
S.prototype.getS = function() {
return this.y;
}
// 重写父类型中的 getF
S.prototype.getF = function() {
return '33';
}
let s = new S();
console.log(s.getS()); // false
console.log(s.getF()); // 33, 原来的 父类中 返回 true
delete(S.prototype.getF);
console.log(s.getF()); // true如果你想要改变(覆盖)父类的方法，必须在子类的 原型对象 被 父类的实例 赋值之后 覆盖。后来居上，你懂的。
后来居上的 字面量方法 也一样,如下
function F() {}
function S() {}
S.prototype = new F();
// 下面的这句话重写了上面这句话。
S.prototype = {
getX: function() {
return '33';
}
}原型链继承的特点和示例代码：
a. 原来的父类实例属性 变为了 子类的原型属性。共享性。
function F() { this.colors = ['red', 'blue']; } function S() {} S.prototype = new F(); let s1 = new S(); let s2 = new S(); s1.colors.push('yellow'); console.log(s1.colors); // ['red', 'blue', 'yellow'] console.log(s2.colors); // ['red', 'blue', 'yellow']b. 创建子类型的实例的时候，不能像超类型的构造函数传递参数。
2. 借用构造函数 继承
真是骚操作啊。
原理：
- A.谁调用了函数，函数中的 this 就指向谁。
- B.利用 apply 和 call 在 子类 内部调用 函数。
function F() {
this.colors = ['red', 'blue'];
}
function S() {
F.call(this);
}
let s1 = new S();
let s2 = new S();
s1.colors.push('yellow');
console.log(s1.colors); // ['red', 'blue', 'yellow']
console.log(s2.colors); // ['red', 'blue']特点：
- 属性不会共享。(上面说了)
可以传参
function F(name) { this.name = name; this.colors = ['red', 'blue']; } function S(name) { F.call(this, name); } let s1 = new S('ccc');缺点在于函数复用。
其实和 JS构造模式 是一个道理。在原型链 中的 共享的函数还是很有必要的。一些属性也是应该共享的。
3. 组合继承: 跟JS模式中的 组合构造模式 很像。
- 可以传参。
- 可以 选择 是否共享属性和方法。(非战争的年代，人们有权选择过自己的生活)
function F(name) {
this.name = name;
this.colors = ['red'];
}
F.prototype.getF = function() {
console.log(this.name);
}
function S(name, age) {
F.call(this, name);
this.age = age;
}
S.prototype = new F();
S.prototype.constructor = S;
S.prototype.getS = function() {
console.log(this.age);
}
// 强行让 constructor 为子类，缺点是 constructor 变为可枚举。
let s1 = new S('s1', 18);
let s2 = new S('s2', 20);
s1.colors.push('yellow');
console.log(s1); // S {name: 's1', colors: ['red', 'yellow'], age: 18}
console.log(s2); // S {name: 's2', colors: ['red'], age: 20}
delete(s1.colors); // 删掉了 子类实例中，借用父类构造函数继承的 colors
console.log(s1.colors); // 子类实例中：父类原型中的 colors 还是存在的。
// ---------------------------------------------------------------
console.log(s1.constructor); // [Function: S]
console.log(Object.keys(S.prototype)); // 其中包含 constructor 属性4. 原型式继承: 可以说是 ES3中对 ES5中 Object.create 的实现了。
缺点很明显：共享属性。
function Create(o) {
function F(){};
F.prototype = o;
return new F();
}
let person = {
name: '123',
colors: ['red']
}
let f1 = Create(person);
let f2 = Create(person);
f1.colors.push('yellow');
console.log(f2.colors); // ['red', 'yellow']ES5中的 Object.create(用作新对象原型的对象，可选的定义额外属性的对象)
若是没有第二个参数，和我们上方自己写的 Create 方法相同。
let person = { name: '123', colors: ['red'] } let f1 = Object.create(person); let f2 = Object.create(person); f1.colors.push('yellow'); console.log(f2.colors); // ['red', 'yellow']若是写了第二个参数，则会覆盖掉原型中的 属性。
let person = { name: '123', colors: ['red'] } let f1 = Object.create(person, { colors: { value: ['red'] } }); let f2 = Object.create(person, { colors: { value: ['red'] } }); f1.colors.push('yellow'); console.log(f2.colors); // ['red']
在没有必要兴师动众地 创建构造函数，只是想让 一个对象 与 另外一个对象保持 相似的情况下，使用 原型式继承 就可以了。
5. 寄生组合式继承。
产生的原因是组合继承 的缺点：
- 调用两次父类。
- 1.创建子类原型的时候
- 2.子类型构造函数内部的调用
- 最后造成的结果。子类会包含 父类的全部 实例属性。并且在调用子类构造函数的时候会重写(覆盖)一些属性。
function Create(o) {
function F() {};
F.prototype = o;
return new F();
}
// 1. 这一步为了 子类继承 父类的原型
function Inherit(subType, superType) {
let prototype = Create(superType.prototype);
// 只承包了 父类的原型。
prototype.constructor = subType;
// 增强对象，重写 被重写的 constructor
subType.prototype = prototype;
}
function F(name) {
this.name = name;
this.colors = ['blue'];
}
F.prototype.say = function() {
console.log(this.name);
}
// 2. 这一步为了 子类继承 父类的一些构造函数内部的东西
function S(name, age) {
F.call(this, name);
this.age = age;
}
Inherit(S, F);疑问：其实本质上没有啥差别。主要的骚操作就要在于：子类继承的类别变化了。最后其实我有一个疑问。。
组合继承 是这样的：调用了一次构造函数。
function S(name) {
F.call(this, name);
} // 调用了一次
S.prototype = new F(); // 调用了一次于是我想，下面这个难道不对？？？
function F(name) {
this.name = name;
}
F.prototype.getName = function() {
console.log(this.name);
}
function S(name) {
F.call(this, name);
}
S.prototype = F.prototype;
S.prototype.constructor = S;
let s1 = new S('csn');
s1.getName(); // csn
console.log(s1.constructor); // [Function: S]F如果没有实例化，貌似我这样写没有什么错？？还更简单？