2022-03-15 [总结]JS继承的常见几种方式和优缺点:原型链继承,构造函数继承,组合继承,原型式继承,寄生式继承,寄生组合式继承,class继承

0.object.create

2022-03-14 Object.create的定义和用法,Object.create和new的区别

分类一:不使用Object.create的继承

1.原型链继承

原理:给原型对象增加一层指向

优缺点

• 优点:既能继承构造函数又能继承原型对象
• 缺点:消耗性能,增加读取时间;对参数的处理不友好,即不方便传参(若一个实例修改原型属性的值，则所有实例上的值都会改变)

格式和示例

/*目的:让Child的实例获得name属性和say()方法*/
// 构造函数Person
function Person() {this.name = 'zs';}
// 构造函数的原型上的方法
Person.prototype.say = function() { return "hello";};
// 1.原型链继承:将父类型的实例指向子类型的原型
function Child() {}
Child.prototype = new Person();
var c = new Child();
console.log(c.name, c.say());//zs hello

2.构造函数继承

原理:使用bind改变某个功能的this指向从而实现继承

优缺点

• 优点:简单方便,可以实现多继承
• 缺点:只能继承构造函数,不能继承原型

格式和示例

// 构造函数Person
function Person() {this.name = 'zs';}
// 构造函数的原型上的方法
Person.prototype.say = function() { return "hello";};
// 2.构造函数继承:通过将Person的this改成Child的this,来实现继承Person的属性与方法
function Child() {Person.bind(this)();}
var c = new Child();
console.log(c.name, c.say()); //zs 报错:不能继承构造函数的原型上的方法

3.组合继承(原型链+构造函数)

原型链继承和构造函数继承的缺点

• 原型链继承的缺点:引用类型的原型属性会被所有的实例共享
• 构造函数继承的缺点：不能继承原型

组合继承的原理改变this指向+原型对象

即:

• 使用call/apply继承父类构造器上的内容
• 使用原型继承来继承父类的原型

优缺点

• 优点:既能继承构造函数又能继承原型对象,可以实现多继承,传承方便,没有增加原型链
• 缺点:对参数的修改不友好(在继承parent的同时传参)

语法和示例

// 构造函数Person
function Person() {this.name = 'zs';}
// 构造函数的原型上的方法
Person.prototype.say = function() { return "hello";};
// 3.组合继承:使用call/apply继承父类构造器上的内容,使用原型继承来继承父类的原型
function Child() {}
Person.bind(this)();//用于继承构造函数上的属性
Child.prototype = new Person();//用于继承原型上的方法
var c = new Child();
console.log(c.name, c.say()); //zs hello

分类二:使用Object.create的继承

4.原型式继承

定义

原型式继承本质其实就是个浅拷贝，以一个对象为模板复制出新的对象

优缺点

优点：父类方法可以复用。
缺点：
	父类的引用属性会被所有子类实例共享
	子类构建实例时不能向父类传递参数

语法和示例:原型式继承是浅拷贝

/*原型式继承*/
function yuanxing(o) { //yuanxing是一个封装原型式继承的函数
    function G() {} //G是构造函数
    G.prototype = o; //把o作为构造函数G的原型对象
    return new G(); //返回一个构造函数new出来的实例对象
}
/*原型对象*/
var obj = { //obj作为原型对象
    skills: ['html', 'css']
};
/*实例对象*/
var obj1 = yuanxing(obj); //调用封装函数,进行原型式继承,并把G()new出来的实例对象赋给obj1==>如此,obj上的skills方法就被obj1继承
// 证明原型式继承是浅拷贝
var obj2 = yuanxing(obj);
obj2.skills.push("javascript");
console.log(obj1.skills); // ['html', 'css', 'javascript']

使用Object.create进行原型式继承

/*原型式继承*/
function yuanxing(o) { //yuanxing是一个封装原型式继承的函数
    function G() {} //G是构造函数
    G.prototype = o; //把o作为构造函数G的原型对象
    return new G(); //返回一个构造函数new出来的实例对象
}
/*原型对象*/
var obj = { //obj作为原型对象
    skills: ['html', 'css']
};
/*实例对象*/
var obj1 = yuanxing(obj); //调用封装函数,进行原型式继承,并把G()new出来的实例对象赋给obj1==>如此,obj上的skills方法就被obj1继承
// 证明原型式继承是浅拷贝
var obj2 = yuanxing(obj);
obj2.skills.push("javascript");
console.log(obj1.skills); // ['html', 'css', 'javascript']
//使用ES5新增的Object.create方法进行原型式继承<==不使用封装函数yuanxing
var obj3 = Object.create(obj);
obj3.skills.push("jQuery");
console.log(obj1.skills, obj3.skills); //4) ['html', 'css', 'javascript', 'jQuery']  4) ['html', 'css', 'javascript', 'jQuery']

5.寄生式继承

定义

寄生式继承就是将原型式继承再次封装,然后在对象上拓展新的方法,最后再把新对象返回

语法和实例

/*原型式继承*/
function yuanxing(o) { //yuanxing是一个封装原型式继承的函数
    function G() {} //G是构造函数
    G.prototype = o; //把o作为构造函数G的原型对象
    return new G(); //返回一个构造函数new出来的实例对象
}
/*寄生式继承*/
function jisheng(yObj) { //寄生式继承的步骤:
    var sObj = yuanxing(yObj); //step1:原型式继承:以yObj为原型对象,创建一个实例对象sObj
    sObj.say = function() { //step2:给这个新对象扩展新方法
        return `我的前端技能有:${this.skills}`; 
    };
    return sObj;//step3:返回这个新对象
}
/*原型对象*/
var obj = { //obj作为原型对象
    skills: ['html', 'css']
};
/*实例对象*/
var obj1 = yuanxing(obj); //调用封装函数,进行原型式继承,并把G()new出来的实例对象赋给obj1==>如此,obj上的skills方法就被obj1继承
// 证明原型式继承是浅拷贝
var obj2 = yuanxing(obj);
obj2.skills.push("javascript");
console.log(obj1.skills); // ['html', 'css', 'javascript']
//使用ES5新增的Object.create方法进行原型式继承<==不使用封装函数yuanxing
var obj3 = Object.create(obj);
obj3.skills.push("jQuery");
console.log(obj1.skills, obj3.skills); //4) ['html', 'css', 'javascript', 'jQuery']  4) ['html', 'css', 'javascript', 'jQuery']
// 调用寄生式继承的封装函数
var obj4 = jisheng(obj);
console.log(obj4.say());//我的前端技能有:html,css,javascript,jQuery

6.寄生组合式继承(原型式+寄生式)

定义

通过借用构造函数来继承属性，
通过原型链的混成形式来继承方法。

基本思路

不必为了指定子类型的原型,而调用超类型的构造函数，我们所需要是超类型原型的一个副本而已。
本质上是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

优缺点:这是一种完美的继承方式。

寄生组合继承:可以解决组合继承会调用两次父类的构造函数,造成浪费的问题
因此避免了在原型上面创建多余的属性。
与此同时，原型链还能保持不变；
因此，还能正常使用instanceof和isPropertyOf()

语法和示例(重要)

// 1.定义父类型
function Person(name) {
    this.name = name;
    this.legNum = 2;
}
Person.prototype.sayHello = function() {
    console.log(`我叫${this.name}`);
};
// 2.定义继承方法
function inherit(subType, superType) {
    // 在new inheritFn时,将构造函数指向子类
    function inheritFn() {
        this.constructor = subType;
    }
    inheritFn.prototyp = superType.prototype;
    // 将子类的原型指向父类原型的一个副本
    subType.prototype = new inheritFn();
}
// 3.定义子类并实现继承
// 定义子类构造函数Son
function Son(name, age) {
    Person.call = (this, name); //借用构造函数
    this.age = age;
}
// 将子类Son的原型指向父类原型的一个副本
inherit(Son, Person); //注意:要执行该动作以后,才能在Son.prototype上定义方法
// Son的Prototype上定义sayAge方法
Son.prototype.sayAge = function() {
    console.log(`我今年${this.age}岁`);
};
// 定义另一个子类构造函数Daughter
function Daughter(name, sex) {
    Person.call(this, name); //借用构造函数
    this.sex = sex;
}
// 将子类Daughter的原型指向父类原型的一个副本
inherit(Daughter, Person);
// Daughter的Prototype上定义saySex方法
Daughter.prototype.saySex = function() {
    console.log(`我是${this.sex}生`);
};
// 4.输出结果
var s = new Son("李雷", 12);
console.log(s);
s.sayHello();
s.sayAge();
var d = new Daughter("韩梅梅", "女");
console.log(d);
d.sayHello();
d.saySex();

参考文章

https://blog.csdn.net/qq_42451979/article/details/125271820

分类三:class继承

7.ES6的class继承

步骤

• class通过关键字extends实现继承
• 子类在constructor方法中调用super方法

为什么必须要调用super方法？

这是因为这里的继承是先塑造父类，再塑造子类。
也就是先将父类的东西都拿过来之后，再进行子类的添加。
而super负责的就是将父类的东西拿过来。所以必须先调用super。

为什么super函数要放在最上面？

class的继承是先将父类拿过来再进行子类的添加，
如果想要给自身添加属性和方法，需要在调用call或者apply之后添加。
否则如果存在同名属性，后面的会覆盖前面的。

语法与示例

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log('你好')
  }
}
class Son extends Person {
}
const s = new Son()
s.say() // 你好