js的继承

原型链继承

// 父类
function Animal(name){
this.name = name;
}
Animal.prototype.age = 10;

// 子类
function Cat(){}

// 主要 子类继承父类的原型
Cat.prototype = new Animal();

Jim = new Cat();
console.log(Jim.age); // 10

实例继承了构造函数的属性、父类构造函数属性、父类原型的属性

缺点:

1 新实例无法向父类构造函数传参;

2 所有新实例都会共享父类实例的属性(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!);

当原型对象的属性值为基本类型的数据值时,通过实例对象修改属性值从而引起原型对象的属性值发生变化的情况不会发生;

animal1.number = 1000;
// 没有改变原型的number属性,如果animal1没有number的话他自己会获得了number属性,如果animal1有number属性会改写他自己number属性的值

当原型对象的属性值为引用类型的数据值时,通过实例对象修改属性值就可能引起原型对象的属性值发生变化;

animal3.fish.push("voladao");
// 通过实例对象animal3向fish属性中推入项,改变了原型对象的fish属性,因为实例对象中没有自己的fish属性

构造函数继承

// 父类
function Animal(name){
this.name = name;
}
Animal.prototype.age = 10;

// 子类
function Cat(){
Animal.call(this, 'jim'); // 主要 用.call()和.apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(即复制))
}

Jim = new Cat();
console.log(Jim.name); // jim

特点:

1 只继承了父类构造函数的属性,没有继承父类原型的属性;

2 解决了原型链继承缺点;

3 可以继承多个构造函数属性(call多个);

4 在子实例中可向父实例传参;

缺点:

1 只能继承父类构造函数的属性,无法继承它的原型;

2 无法实现构造函数的复用(每次用每次都要重新调用);

3 每个新实例都有父类构造函数的副本,臃肿;

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

// 父类
function Animal(name){
this.name = name;
}
Animal.prototype.age = 10;

// 子类
function Cat(){
Animal.call(this, 'jim'); // 主要 构造函数继承
}
Cat.prototype = new Animal(); // 主要 原型继承

Jim = new Cat();
console.log(Jim.name); // jim 继承了父类构造函数的属性
console.log(Jim.age); // 10 继承了父类原型上的属性

特点:

可以继承父类原型上的属性,可以传参,可复用;

每个新实例引入的构造函数属性是私有的;

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

原型式继承

// 父类
function Animal(name){
    this.name = name;
}
Animal.prototype.age = 10;

function content(obj){
    function F(){};
    F.prototype = obj;
    return new F();
}
var cat = new Animal();  // 获取父类实例
var jim = content(cat);   // 把原型指向父类实例 jim.prototype = F.prototype = obj = cat
console.log(jim.age);  // 10

寄生式继承

// 父类
function Animal(name){
    this.name = name;
}
Animal.prototype.age = 10;

function content(obj){
    function F(){};
    F.prototype = obj;
    return new F();
}
var cat = new Animal();  // 获取父类实例
// 以上是原型式继承,以下给原型继承在套个壳子传递参数
function wrap(obj, name){
    var sub = content(obj);   // 把原型指向父类实例 jim.prototype = F.prototype = obj = cat
    sub.name = name;
    return sub;
}
var jim = wrap(cat, 'jim');

console.log(jim.name);  // jim

寄生组合式继承

 

原文:https://www.cnblogs.com/Grace-zyy/p/8206002.html

posted @ 2020-05-13 11:48  seeBetter  阅读(241)  评论(0编辑  收藏  举报