JavaScript中的对象继承

1.原型链继承

1. 套路

   • 定义父类型构造函数
   • 给父类型的原型添加方法
   • 定义子类型的构造函数
   • 创建父类型的对象赋值给子类型的原型
   • 将子类型原型的构造属性设置为子类型给子类型原型添加方法
   • 创建子类型的对象: 可以调用父类型的方法

2. 关键

   子类型的原型为父类型的一个实例对象

//父类型
function Supper() {this.supProp &＃61; &＃39;父亲的原型链&＃39;
}
//给父类型的原型上增加一个[showSupperProp]方法,打印自身subProp
Supper.prototype.showSupperProp &＃61; function () {console.log(this.supProp)
}//子类型
function Sub() {this.subProp &＃61; &＃39;儿子的原型链&＃39;
}// 子类型的原型为父类型的一个实例对象
Sub.prototype &＃61; new Supper()
// 让子类型的原型的constructor指向子类型
// 如果不加,其构造函数找的[&＃96;new Supper()&＃96;]时从顶层Object继承来的构造函数,指向[&＃96;Supper()&＃96;]
Sub.prototype.constructor &＃61; Sub
//给子类型的原型上增加一个[showSubProp]方法,打印自身subProp
Sub.prototype.showSubProp &＃61; function () {console.log(this.subProp)
}var sub &＃61; new Sub()sub.showSupperProp() //父亲的原型链
sub.showSubProp() //儿子的原型链
console.log(sub)
/**
Sub {subProp: "儿子的原型链"}
subProp: "儿子的原型链"
__proto__: Supper
constructor: ƒ Sub()
showSubProp: ƒ ()
supProp: "父亲的原型链"
__proto__: Object
*/


问题&＃xff1a;

1.引用类型的属性被所有实例共享&＃xff0c;包含引用类型的属性值始终都会共享相应的值

​ 因为两个实例使用的是同一个原型对象&＃xff0c;内存空间是共享的

举例&＃xff1a;

function Parent () {this.names &＃61; [&＃39;kevin&＃39;, &＃39;daisy&＃39;];
}function Child () {}Child.prototype &＃61; new Parent();var child1 &＃61; new Child();child1.names.push(&＃39;xiaofeixia&＃39;);console.log(child1.names); // ["kevin", "daisy", "xiaofeixia"]var child2 &＃61; new Child();console.log(child2.names); // ["kevin", "daisy", "xiaofeixia"]


2. 某些属性其实是保存在父类型的实例对象上的&＃xff1b;我们通过直接打印对象是看不到这个属性的&＃xff1b;

3.无法传递参数

2.借用构造函数(经典继承)

套路:

• 定义父类型构造函数
• 定义子类型构造函数
• 在子类型构造函数中调用父类型构造

1. 关键:
   • 在子类型构造函数中通用call()调用父类型构造函数
2. 作用:

​ 能借用父类中的构造方法,但是不灵活

​ 3.缺点&＃xff1a;方法都在构造函数中定义&＃xff0c;每次创建实例都会创建一遍方法。

function Person(name, age) {this.name &＃61; namethis.age &＃61; age
}
function Student(name, age, price) {//此处利用call(),将 [Student]的this传递给Person构造函数Person.call(this, name, age) // 相当于: this.Person(name, age)/*this.name &＃61; namethis.age &＃61; age*/this.price &＃61; price
}var s &＃61; new Student(&＃39;Tom&＃39;, 20, 14000)
console.log(s.name, s.age, s.price)
//在[&＃96;Student&＃96;]中利用[&＃96;Person.call(this, name, age)&＃96;]改变了其this指向,所以可以实现此效果


父类原型对象中一旦存在父类之前自己定义的方法&＃xff0c;那么子类将无法继承这些方法

相比原型链继承方式&＃xff0c;父类的引用属性不会被共享&＃xff0c;优化了第一种继承方式的弊端&＃xff0c;但是只能继承父类的实例属性和方法&＃xff0c;不能继承原型属性或者方法

所有的子类实例事实上会拥有两份父类的属性
一份在当前的实例自己里面(也就是person本身的)&＃xff0c;另一份在子类对应的原型对象中(也就是
person.__proto__里面)&＃xff1b;
当然&＃xff0c;这两份属性我们无需担心访问出现问题&＃xff0c;因为默认一定是访问实例本身这一部分的&＃xff1b;

3.组合继承

优点&＃xff1a;融合原型链继承和构造函数的优点&＃xff0c;是 Javascript 中最常用的继承模式。

1. 利用原型链实现对父类型对象的方法继承
2. 利用super()借用父类型构建函数初始化相同属性

function Person(name, age) {this.name &＃61; namethis.age &＃61; age
}
Person.prototype.setName &＃61; function (name) {this.name &＃61; name
}function Student(name, age, price) {Person.call(this, name, age) // 为了得到属性this.price &＃61; price
}
Student.prototype &＃61; new Person() // 为了能看到父类型的方法
Student.prototype.constructor &＃61; Student //修正constructor属性
Student.prototype.setPrice &＃61; function (price) {this.price &＃61; price
}var s &＃61; new Student(&＃39;Tom&＃39;, 24, 15000)
s.setName(&＃39;Bob&＃39;)
s.setPrice(16000)
console.log(s.name, s.age, s.price)


4.原型式继承

function createObj(o) {function F(){}F.prototype &＃61; o;return new F();
}


就是 ES5 Object.create 的模拟实现&＃xff0c;将传入的对象作为创建的对象的原型。

也可以直接借助Object.create方法实现普通对象的继承

利用一个空对象作为中介&＃xff0c;将某个对象直接赋值给空对象构造函数的原型。

缺点&＃xff1a;

​ 包含引用类型的属性值始终都会共享相应的值&＃xff0c;

var person &＃61; {name: &＃39;kevin&＃39;,friends: [&＃39;daisy&＃39;, &＃39;kelly&＃39;]
}var person1 &＃61; createObj(person);
var person2 &＃61; createObj(person);person1.name &＃61; &＃39;person1&＃39;;
console.log(person2.name); // kevinperson1.firends.push(&＃39;taylor&＃39;);
console.log(person2.friends); // ["daisy", "kelly", "taylor"]


最终的结果&＃xff1a;person1&＃xff0c;person2 对象的原型指向了person对象&＃xff1b;

注意&＃xff1a;修改person1.name的值&＃xff0c;person2.name的值并未发生改变&＃xff0c;并不是因为person1和person2有独立的 name 值&＃xff0c;而是因为person1.name &＃61; &＃39;person1&＃39;&＃xff0c;给person1添加了 name 值&＃xff0c;并非修改了原型上的 name 值。

代码2&＃xff1a;

let parent4 &＃61; {name: "parent4",friends: ["p1", "p2", "p3"],getName: function() {return this.name;}};let person4 &＃61; Object.create(parent4);//借助Object.create方法实现普通对象的继承person4.name &＃61; "tom";person4.friends.push("jerry");let person5 &＃61; Object.create(parent4);person5.friends.push("lucy");console.log(person4.name); // tomconsole.log(person4.name &＃61;&＃61;&＃61; person4.getName()); // trueconsole.log(person5.name); // parent4console.log(person4.friends); // ["p1", "p2", "p3","jerry","lucy"]console.log(person5.friends); // ["p1", "p2", "p3","jerry","lucy"]


这里主要借助Object.create方法实现普通对象的继承

5.寄生式继承

创建一个仅用于封装继承过程的函数&＃xff0c;该函数在内部以某种形式来做增强对象&＃xff0c;最后返回对象。

function createObj (o) {var clone &＃61; object.create(o);clone.sayName &＃61; function () {console.log(&＃39;hi&＃39;);}return clone;
}


缺点&＃xff1a;跟借用构造函数模式一样&＃xff0c;每次创建对象都会创建一遍方法。

代码2&＃xff1a;

let parent5 &＃61; {name: "parent5",friends: ["p1", "p2", "p3"],getName: function() {return this.name;}
};function clone(original) {let clone &＃61; Object.create(original);clone.getFriends &＃61; function() {return this.friends;};return clone;
}let person5 &＃61; clone(parent5);console.log(person5.getName()); // parent5
console.log(person5.getFriends()); // ["p1", "p2", "p3"]


寄生式继承在上面继承基础上进行优化&＃xff0c;利用这个浅拷贝的能力再进行增强&＃xff0c;添加一些方法

6.寄生组合式继承

现在我们来回顾一下之前提出的比较理想的组合继承
组合继承是比较理想的继承方式, 但是存在两个问题:

• 问题一: 构造函数会被调用两次: 一次在创建子类型原型对象的时候, 一次在创建子类型实例的时候.

• 问题二: 父类型中的属性会有两份: 一份在原型对象中, 一份在子类型实例中.

• 事实上, 我们现在可以利用寄生式继承将这两个问题给解决掉.

需要先明确一点: 当我们在子类型的构造函数中调用父类型.call(this, 参数)这个函数的时候, 就会将父类型中的属性和方法复制一份到了子类型中. 所以父类型本身里面的内容, 我们不再需要.

• 这个时候, 我们还需要获取到一份父类型的原型对象中的属性和方法.
• 能不能直接让子类型的原型对象&＃61; 父类型的原型对象呢?
• 不要这么做, 因为这么做意味着以后修改了子类型原型对象的某个引用类型的时候, 父类型原生对象的引用类型也会被修改.
• 我们使用前面的寄生式思想就可以了.

//定义寄生式核心函数
function inheritPrototype(subType, superType){var prototype &＃61; Object.create(superType.prototype); // 创建对象&＃xff0c;创建父类原型的一个副本prototype.constructor &＃61; subType; // 增强对象&＃xff0c;弥补因重写原型而失去的默认的constructor 属性subType.prototype &＃61; prototype; // 指定对象&＃xff0c;将新创建的对象赋值给子类的原型
}// 父类初始化实例属性和原型属性
function SuperType(name){this.name &＃61; name;this.colors &＃61; ["red", "blue", "green"];
}
SuperType.prototype.sayName &＃61; function(){alert(this.name);
};// 借用构造函数传递增强子类实例属性&＃xff08;支持传参和避免篡改&＃xff09;
function SubType(name, age){SuperType.call(this, name);this.age &＃61; age;
}// 将父类原型指向子类
inheritPrototype(SubType, SuperType);// 新增子类原型属性
SubType.prototype.sayAge &＃61; function(){alert(this.age);
}var instance1 &＃61; new SubType("xyc", 23);
var instance2 &＃61; new SubType("lxy", 23);instance1.colors.push("2"); // ["red", "blue", "green", "2"]
instance1.colors.push("3"); // ["red", "blue", "green", "3"]