JavaScript中的继承方式

文章目录

还不了解原型和原型链的小伙伴，请移步“深入理解javascript之原型和原型链”

首先，定义父类：

function Person(name) {
    this.name = name;
    this.showName = function () {
        return this.name;
    }
}
// 原型对象上添加属性
Person.prototype.age = 18;
Person.prototype.friends = ['小明', '小强'];

一、构造函数继承（call与apply）

1. 构造继承（利用call改变this指向）

优点：

  1. 创建子类实例时，可以向父类传递参数
  2. 可以实现多重继承（call多个父类对象，如例2）

缺点：

  1. 实例并不是父类的实例，只是子类的实例
  2. 只能继承父类的实例属性和方法，不能继承原型属性/方法
  3. 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
function Student(name) {
    Person.call(this, name);
    // Person.apply(this, [name]);
}

let s1 = new Student('小红')
console.log(s1.name); // 小红
console.log(s1.showName()); // 小红

// 无法继承原型上的属性和方法
console.log(s1.age); // undefined
console.log(s1.friends); // undefined

2. 多重继承（使用多个 apply、call）

function Class1() {
    this.showSub = function (a, b) {
        console.log(a - b);
    }
}
function Class2() {
    this.showAdd = function (a, b) {
        console.log(a + b);
    }
}

// 使用多个 apply、call 就实现多重继承了
function Class3() {
    Class1.apply(this);
    Class2.apply(this);
    //Class1.call(this);
    //Class2.call(this);    
}

var c = new Class3();

c.showSub(3, 1); // 2
c.showAdd(3, 1); // 4

3. s2 继承了 s1 上的 showName 方法

function Student(name) {
    this.name = name;
}
var s1 = new Person('张三');
var s2 = new Student('李四');
console.log(s1.showName.call(s2)); // 李四
// console.log(s1.showName.apply(s2));

虽然调用的是 s1 上的 showName 方法，但是 this 指针指向的是 s2 ，所以 this.name 应该是 “李四”

二、原型链继承

优点：

  1. Student 实例可继承父类构造函数（Person）的属性方法和父类原型对象（Person.prototype）上的属性方法
  2. 简单，易于实现

缺点：

  1. Student 实例无法向父类构造函数（Person）传参（组合方式继承中解决）
  2. 继承单一，无法实现多继承（组合方式继承中解决）
  3. 来自原型对象的所有属性被所有实例共享。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）
function Student(name) {
    this.name = name;
}
Student.prototype = new Person(); // prototype指向实例对象，可以继承Person的构造函数属性和原型对象上的属性
// Student.prototype = Person.prototype; // 不能继承Person的构造函数属性，只能继承Person原型对象上的属性，还会修改子会影响父
Student.prototype.constructor = Student;

let s1 = new Student('刘一');
console.log(s1.name); // 刘一
console.log(s1.showName()); // 刘一
console.log(s1.age); // 18
console.log(s1.friends); // ["小明", "小强"]

// 父子构造函数的原型对象之间有共享问题（修改子会影响父）
s1.friends.push('小红');
console.log(s1.friends); // ["小明", "小强", "小红"]
let s2 = new Student();
console.log(s2.friends); // ["小明", "小强", "小红"]

三、组合方式（混合了call方式、原型链方式）

组合式继承是比较常用的一种继承方法，其背后的思路是：

  1. 通过使用原型链实现对原型属性和方法的继承（Child.prototype = new Parent()）
  2. 通过借用构造函数来实现对实例属性的继承（Parent.call(this,hello)）

优点：

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

缺点：

  1. 调用了两次父类构造函数 Person（耗内存），子类的构造函数会代替原型上的那个父类构造函数。
  2. 父子构造函数的原型对象之间有共享问题（问题依旧）
function Worker(name) {
    Person.call(this, name); // 构造函数继承
}

Worker.prototype = new Person(); // 原型链继承
Worker.prototype.constructor = Worker;

let w1 = new Worker('张三');
console.log(w1.name); // 张三
console.log(w1.showName()); // 张三
console.log(w1.age); // 18
console.log(w1.friends); // ["小明", "小强"]

//一个实例修改了原型属性，另一个实例的原型属性也会被修改 
w1.friends.push('李四')
let p1 = new Person()
console.log(p1.friends); // ["小明", "小强", "李四"]

四、原型式继承

优点：

  1. 类似于复制一个对象，用函数来包装。

缺点：

  1. 所有实例都会继承原型上的属性。
  2. 无法实现复用。（新实例属性都是后面添加的）

content() 对传入其中的对象执行了一次浅复制，将构造函数Fn的原型直接指向传入的对象。

function content(obj) { // 先封装一个函数容器，用来输出对象和承载继承的原型
    function Fn() {}
    Fn.prototype = obj; // 修改类的原型为obj, 于是Fn的实例都将继承obj上的方法
    return new Fn();
}

let p1 = content(new Person('李四'));
//上面在ECMAScript5 有了一新的规范写法，Object.create() 效果是一样的  
// let p1 = Object.create(new Person('李四'));

console.log(p1.name); // 李四
console.log(p1.showName()); // 李四
console.log(p1.age); // 18
console.log(p1.friends); // ["小明", "小强"]

五、寄生式继承

优点：

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

缺点：

  1. 没用到原型，无法复用。
function content(obj) {
    function Fn() {}
    Fn.prototype = obj; // 继承了传入的参数
    return new Fn();
}

// 在原型式继承外面套了个壳子
function subObj(obj) {
    let sub = content(obj);
    sub.name = "王五";
    return sub;
}

let p1 = subObj(new Person());

console.log(p1.name); // 王五
console.log(p1.showName()); // 王五
console.log(p1.age); // 18
console.log(p1.friends); // // ["小明", "小强"]

六、寄生组合式继承（ 常用）

优点：

  1. 堪称完美
// 寄生
function content(obj) {
    function Super() {}
    Super.prototype = obj; // 继承了传入的参数
    return new Super();
}

let con = content(Person.prototype);

// 组合
function Student(name) {
    Person.call(this, name);
}

Student.prototype = con;
con.constructor = Student; // S

let s1 = new Student('赵六');

console.log(s1.name); // 赵六
console.log(s1.showName()); // 赵六
console.log(s1.age); // 18
console.log(s1.friends); // // ["小明", "小强"]

将上面的简化下

function Student(name) {
    Person.call(this, name);
}

// 创建一个没有实例方法的类
let Super = function () {};
Super.prototype = Person.prototype;
//将实例作为子类的原型
Student.prototype = new Super();

let s1 = new Student('赵六');
console.log(s1.name); // 赵六
console.log(s1.showName()); // 赵六
console.log(s1.age); // 18
console.log(s1.friends); // // ["小明", "小强"]

对象冒充

function Temp(name) {
    this.aaa = Person; // this.aaa是作为一个临时的属性，并且指向 Person 所指向的对象，
    this.aaa(name); // 执行this.aaa方法，即执行 Person 所指向的对象函数
    delete this.aaa; // 销毁this.aaa属性，即此时 Temp 就已经拥有了 Person 的所有属性和方法
    // 以上三行相当于： Person.call(this);
}

var s1 = new Temp('张三');

console.log(s1.name); // 李四
console.log(s1.showName()); // 李四

// 无法继承原型对象上的属性方法
console.log(s1.age); // undefined
console.log(s1.friends); // undefined
posted @ 2022-07-20 18:16  猫老板的豆  阅读(11)  评论(0)  编辑  收藏  举报