继承可以使得子类具有父类的属性和方法,或者重新定义,追加属性和方法。
即设置子类的原型为父类的实例(继承了属性与方法)
- function Parent(name) {
- this.name = 'parent';
- }
-
- Parent.prototype.getName = function() {
- return this.name;
- }
-
- function Child() {
-
- }
-
- Child.prototype = new Parent();
- let child1 = new Child();
- child.name === 'parent' // true;
- child.getName(); // 'parent'
-
我们知道 new Parent() 这种方式构建的实例 parent, 本身有 name 属性,同时通过 __proto__ 原型链可以访问到 getName 方法。
Child.prototype = new Parent() ,则 Child 实例也能访问到 name 属性和 getName 方法。
缺点:由于在 Child.prototype 上的属性是被所有 Child 实例所共享的,对于基础类型,这没有什么问题,而对于复杂类型,会存在被某个实例修改,而影响别的实例的情况。
- function Parent(name) {
- this.name = 'parent';
- this.toys = ['foo', 'bar'];
- }
-
- Parent.prototype.getName = function() {
- return this.name;
- }
-
- function Child() {}
-
- Child.prototype = new Parent();
- let child1 = new Child();
- let child2 = new Child();
-
- child1.name = 'parent1'
- child1.name // parent1
- child2.name // parent2
-
- // 直接赋值的情况,不会改变原型
- child1.toys = ['foo1', 'bar1'];
- child1.toys // ['foo1', 'bar1'];
- child2.toys // ['foo', 'bar'];
-
- // 会改变原型的情况
- child1.toys.push('baz')
- child1.toys // [ 'foo', 'bar', 'baz' ]
- child2.toys // [ 'foo', 'bar', 'baz' ]
-
即在子类中调用父类的构造函数(以此来继承属性)
- function Parent() {
- this.name = 'parent';
- }
-
- function Child() {
- Parent.call(this);
- }
-
- var child1 = new Child()
-
优点:
解决了原型链继承,原型上引用类型共享的问题
缺点:
- function Parent() {
- this.name = 'parent';
- }
-
- Parent.prototype.say = function() {}
-
- function Child() {
- Parent.call(this);
- }
-
- var child1 = new Child()
- child1.say(); // error, 无 say 方法
-
- function Parent() {
- this.name = 'parent';
- this.sayName = function() {
- console.log(this.name)
- }
- }
-
- Parent.prototype.say = function() {}
-
- function Child() {
- Parent.call(this);
- }
-
- var child1 = new Child()
- var child2 = new Child()
- child1.sayName === child2.sayName; // false
-
即每个实例的方法都是新创建的(占用内存),尽管它们的代码逻辑是一样的。
设置子类的原型为父类的实例,同时在子类中调用父类的构造函数。
设置原型来继承方法,防止多次创建。子类中调用父类构造函数来继承属性,防止引用类型数据的共享。
- function Parent(name) {
- this.name = name;
- }
-
- Parent.prototype.say = function() {
- console.log(this.name)
- }
-
- function Child(name) {
- Parent.call(this,name);
- }
-
- Child.prototype = new Parent();
- // 以上 Child.prototype = ... 这段代码,只是想让 Child 的实例能访问得到 Parent.prototype 上的方法,那为什么不可以 Child.prototype = Parent.prototype
- // 我想是为了防止改变 Child.prototype 时,如 Child.prototype.*** = *** ,会改变 Parent.prototype 吧
- // 因此选择让 Child.prototype 指向 Parent 实例
-
- Child.prototype.constructor = Child;
- // Child.prototype = new Parent(); 导致 child1 的 constructor 为 Parent
- // 所以需要我们手动设置回去
-
- var child1 = new Child('child1')
- var child2 = new Child('child2')
-
- child1.say === child2.say; // say
-
区别与原型链继承,原型式继承父类其实是一个对象,而不像原型链继承中父类其实是一个函数(当然函数也是对象)
- function createObj(obj) {
- function F(){}
- F.prototype = obj;
- return new F();
- }
-
内部创建一个空的构造函数 F, 将 F.prototype = obj, 即将传入的对象参数,作为空函数的原型对象,最后返回 new F() 的实例,则最终返回的实例通过原型链能够访问到 obj 上的属性和方法。
缺点:
同原型链继承一样,由于它们的原型对象都是 obj, 如果存在引用类型的数据,则一个实例对属性的修改会影响另外的实例:
- function createObj(obj) {
- function F() {};
- F.prototype = obj;
- return new F();
- }
-
- const origin = {
- name: 'origin name',
- toys: [1]
- }
- const child1 = createObj(origin)
- const child2 = createObj(origin)
- child1.toys.push(2)
- child1.toys // [1,2] // 对于引用类型的修改,会影响另外的实例
- child2.toys // [1,2]
-
- function createObj(obj) {
- const o = Object.create(obj);
- o.say = function() {}
- return o;
- }
-
- 其中 Object.create() 原理就是
- Object.create = function(obj) {
- function F() {}
- F.prototype = obj;
- return new F();
- }
-
缺点:
每次实例上的方法都是新创建的方法,互不相等(尽管逻辑是一致的)。
偷偷吐槽: 这段代码和上面那段原型式继承好像没什么区别...
在组合继承中:
- function Parent(name) {
- this.name = name;
- }
-
- Parent.prototype.say = function(){}
-
- function Child(name) {
- Parent.call(this, name); // 调用 Parent 构造函数
- }
-
- Child.prototype = new Parent(); // 调用 Parent 构造函数
-
- const child1 = new Child();
-
即会存在调用两次父类构造函数的情况,这导致: child1 实例本身有 name 属性,同时 Child.prototype 上也有 name 属性。
那能不能减少一次调用呢?
我们知道,子类中调用父类构造函数这一次调用父类构造函数(1),是为了继承或者说初始化实例的属性。
而将子类原型指向父类实例导致的父类构造函数调用(2),其实只是为了继承父类原型上的方法或属性。
因此,我们能不能将指向父类原型这次父类构造函数调用省去,只能访问到父类的原型,即 Child.prototype 能够访问到 Parent.prototype?
这时候,想到前面的原型式继承,就是传入一个对象 obj,最终返回的对象,能够访问到 obj 对象上的属性。因此我们进行改造:
- function Parent(name) {
- this.name = name;
- }
-
- Parent.prototype.say = function(){}
-
- function Child(name) {
- Parent.call(this, name); // 调用 Parent 构造函数
- }
-
- // 原型式继承
- function createObj(obj) {
- function F() {}
- F.prototype = obj;
- return new F();
- // 即其实还是调用了某个构造函数,只是该构造函数是个空函数,所以性能更好吧
- }
-
- Child.prototype = createObj(Parent.prototype)
- // 不直接 Child.prototype = Parent.prototype 的原因前面说过
- // 防止修改 Child.prototype 会影响 Parent.prototype
-
- Child.prototype.constructor = Child;
-
- const child1 = new Child();
-
最后封装一下继承的方法:
- function createObj(obj) {
- function F() {}
- F.prototype = obj;
- return new F();
- }
-
- function extends(Child, Parent) {
- Child.prototype = createObj(Parent.prototype);
- Child.prototype.constructor = Child;
- }
-
优点:
开发人员普遍认为寄生组合式继承式引用类型最理想的继承范式