JS继承

贪吃的猫
389 阅读4分钟

JS继承的6种方式

想要继承，就必须要提供一个父类(继承谁，提供继承的属性)

//父类
function Person(name){//给构造函数添加了参数
    this.name = name;
    this.msg = function(){
        alert(this.name);
    }
}
Person.prototype.age = 10;//给构造函数添加了原型属性

原型链继承

function Sub(){
    this.name = 'roy';
}
Sub.prototype = new Person();
var sub1 = new Sub();
console.log(sub1.age);//10
//instanceof 判断元素是否在另一个元素的原型链上
//sub1继承了Person的属性，返回true
console.log(sub1 instanceof Person);//true

重点:让新实例的原型等于父类的实例

特点:实例继承的属性有:实例的构造函数的属性，父类的构造函数的属性，父类原型的属性(新实例不会继承父类实例的属性)

缺点:

  • 新实例无法向父类构造函数传参
  • 继承单一
  • 所有新实例都会共享父类实例的属性。(原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改)

构造函数继承

function Sub(){
    Person.call(this,'roy');
    this.age = 12;
}
var sub1 = new Sub();
console.log(sub1.name);//roy
console.log(sub1.age);//12
console.log(sub1 instanceof Person);//false

重点:用call()或者apply()将构父类造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))

特点:

  • 只继承了父类构造函数的属性，没有继承父类原型上的属性
  • 解决了原型链继承的缺点
  • 可以继承多个构造函数属性(多个call)
  • 可以在子类实例中向父类实例传参

缺点:

  • 只能继承父类构造函数的属性
  • 无法实现构造函数的复用(每次用每次都要重新调用)
  • 每个新实例都有父类构造函数的副本，臃肿

组合继承(组合原型链继承和构造函数继承)

function Sub(name){
    Person.call(this,name);//构造函数继承
}
Sub.prototype = new Person();//原型链继承
var sub = new Sub('roy');
console.log(sub.name);//roy 继承了构造函数属性
console.log(sub.age);//10 继承了父类原型的属性

重点:结合了两种模式的优点，传参和复用

特点:

  • 可以继承父类原型上的属性，可以传参，复用
  • 每个新实例引入的构造函数属性是私有的

缺点:调用了两次父类构造函数(耗内存)，子类构造函数会代替原型上的父类的构造函数

原型式继承

function content(obj){
    function F(){};
    F.prototype = obj;
    return new F();
}
var person = new Person();//创建父类的实例
var sub1 = content(person);
console.log(sub1.age);//10 继承了父类函数的属性

重点:用一个函数包裹一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。

特点:类似复制一个对象，用函数来包裹

缺点:

  • 所有实例都会继承原型上的属性
  • 无法实现复用(新实例属性都是后面添加的)

寄生式继承

function content(obj){
    function F(){};
    F.prototype = obj;//继承了传入的参数
    return new F();//返回函数对象
}
var person = new Person();
function subObject(obj){
    var sub = content(obj);
    sub.name = 'roy';
    return sub;
}
var sub1 = subObject(person);
console.log(typeof subObject);//function
console.log(typeof sub1);//object
console.log(sub1.name);//'roy' 返回了个sub对象，继承了sub的属性

重点:就是给原型式继承外面套了个壳子

优点:没有创建自定义类型，因为只是套了个壳子返回对象，这个函数顺理成章就成了创建的新对象

缺点:没用到原型，无法复用

寄生组合继承

寄生:在函数内返回对象然后调用

组合:函数的原型等于另一个实例;在函数中用apply或者call引入另一个构造函数，可传参　

function content(obj){
    function F(){};
    F.prototype = obj;
    return new F();
}
//content就是F实例的另一种表示法
var con = content(Person.prototype);
//con实例(F实例)的原型继承了父类函数的原型
//上述更像是原型链继承，只不过只继承了原型属性

function Sub(){
    Person.call(this);//这个继承了父类构造函数的属性
}//解决了组合式两次调用构造函数属性的缺点

Sub.prototype = con;//继承了con实例
con.constructor = Sub;//一定要修复实例
var sub1 = new Sub();
//Sub的实例就继承了构造函数属性，父类实例，con的函数属性
console.log(sub1.age);

重点:修复了组合继承的问题

avatar
文章
阅读
粉丝