ES中的继承

最新推荐文章于 2022-12-25 20:33:48 发布

嘧

最新推荐文章于 2022-12-25 20:33:48 发布

阅读量276

点赞数

分类专栏： js入门学习文章标签：原型模式 javascript 开发语言

本文链接：https://blog.csdn.net/qq_50748038/article/details/126479446

版权

js入门学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。在 ECMAScript 中函数没有签名，所以实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。

1、原型链

ECMAScript 把原型链定义为 ECMAScript 的主要继承方式。如果原型是另一个类型的实例呢？一个原型本身有一个内部指针指向另一个原型，另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。 构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。

实现原型链案例：

// 创建Animal
function Animal() {
  this.name = 'animal';
}
Animal.prototype.getAnimalName = function () {
  console.log(this.name + 'getAnimalName');
}
// 创建Dog
function Dog() {
  this.name = 'dog';
}
Dog.prototype = new Animal();// Dog继承Animal 将Animal的实例赋值给Dog的原型对象，相当于将Animal的实例中的__proto__赋值给了Dog的原型对象。Dog原型对象通过Animal对象的实例中的[[prototype]](__proto__)来访问到Animal原型对象中的属性和方法。
console.log(Dog.prototype.__proto__ === Animal.prototype );//true 不建议使用
// 在使用原型链继承的时候，要在继承之后再去原型对象上定义自己所需的属性和方法
Dog.prototype.getDogName = function () {
  console.log(this.name + 'getDogName');
}
//创建dog实例
var d1 = new Dog();
d1.getAnimalName();//doggetAnimalName
d1.getDogName();//doggetDogName

代码解读：以上代码通过创建 Animal 的实例并将其赋值给Dog的原型对象，实现Dog. prototype对 Animal 的继承。这个赋值重写了 Dog 最初的原型，将其替换为Animal 的实例。这意味着 Animal 实例可以访问的所有属性和方法也会存在于 Dog. prototype。实现继承后，代码又给Dog.prototype，也就是这个 Animal 的实例添加了一个新方法。最后创建 Dog 实例并调用了它继承的 getAnimalName方法。

图解：

在通过原型链实现继承之后，搜索就可以继承向上，搜索原型的原型。对前面的例子而言，调用 d1.getAnimalName()经过了3步搜索：d1、Dog.prototype 和Animal.prototype，最后一步才找到这个方法。对属性和方法的搜索会一直持续到原型链的末端。

1.1默认原型

默认情况下，所有引用类型都继承自 Object，这也是通过原型链实现的。任何函数的默认原型都是一个 Object 的实例，这意味着这个实例有一个内部指针指向Object.prototype。也因此自定义类型能够继承包括 toString()、valueOf()在内的所有默认方法。

1.2确定原型与实例的关系的方法

//方法一 使用instanceof操作符 如果实例的原型链中出现过相应的构造函数，则instanceof返回 true。
//检测构造函数的'prototype'属性是否出现在某个实例对象的原型链上。
console.log(d1 instanceof Object);  //true
console.log(d1 instanceof Animal);  //true
console.log(d1 instanceof Dog);     //true

//方法二 使用isPrototypeOf()方法 只要原型链中包含这个原型，这个方法就返回 true
console.log(Object.prototype.isPrototypeOf(d1)); // true 
console.log(Animal.prototype.isPrototypeOf(d1)); // true 
console.log(Dog.prototype.isPrototypeOf(d1)); // true

1.3原型链的破坏

以对象字面量方式创建原型方法会破坏之前的原型链，因为这相当于重写了原型链

//创建Animal对象
function Animal() {
  this.name = 'animal';
}
Animal.prototype.getAnimalName = function () {
  console.log(this.name);
};
//创建Dog
function Dog() {
  this.name = 'dog';
}
// 继承 将Animal的实例赋值给Dog的原型对象
Dog.prototype = new Animal()
//以字面量方式创建原型方法 相当于重写Dog.prototype
Dog.prototype = {
  getDogName() {
    console.log(this.name);
  },
  someOtherMethod() {
    return false;
  }
};
var d1 = new Dog();
d1.getAnimalName(); // 出错！ Dog的原型对象被重写了，重写后的原型是一个Object实例，之前的原型链断开

1.4原型链的问题

问题一：原型中包含的引用值会在所有实例间共享，在使用原型实现继承时，原型实际上变成了另一个类型的实例。

//创建Animal对象
function Animal() {
  this.categorys = ["cat", "rabbit"];
}
function Dog() { }
// 继承 Animal Dog.prototype变成了Animal的一个实例，继承了Animal的categorys属性
Dog.prototype = new Animal();
var d1 = new Dog();
d1.categorys.push("dog");
console.log(d1.categorys); // [ 'cat', 'rabbit', 'dog' ]
var d2 = new Dog();
console.log(d2.categorys); // [ 'cat', 'rabbit', 'dog' ] Dog的所有实例都会共享这个 categorys属性

问题二：子构造函数在实例化时不能给父构造函数传参。无法在不影响所有对象实例的情况下把参数传进父构造函数。

因此综合以上两个问题，一般不会单独使用原型链

2.经典继承

经典继承也称为对象伪装或者“盗用构造函数”，这一技术就是为了解决原型包含引用值导致的继承问题。基本思路：在子构造函数中调用父构造函数。可以使用apply()和 call()方法以新创建的对象为上下文执行构造函数。

function Animal() {
  this.categorys = ["cat", "rabbit"];
}
function Dog() {
  // 继承Animal this指向Animal对象 
  Animal.call(this);
}
// 在var d1 = new Dog()时，是d1调用Dog构造函数，所以其内部this的值指向的是d1,所以Animal.call(this)就相当于Animal.call(d1)，就相当于d1.Animal()。最后，d1去调用Animal方法时,Animal内部的this指向就指向了d1。那么Animal内部this上的所有属性和方法，都被拷贝到了d1上。所以，每个实例都具有自己的categorys属性副本。他们互不影响。
var d1 = new Dog();
d1.categorys.push("dog");
console.log(d1.categorys); // [ 'cat', 'rabbit', 'dog' ]
var d2 = new Dog();
console.log(d2.categorys); // [ 'cat', 'rabbit' ]

通过使用 call()（或 apply()）方法改变this的指向（上下文执行环境），Animal构造函数在为 Dog 的实例创建的新对象的上下文中执行了。这相当于新的 Dog 对象上运行了Animal()函数中的所有初始化代码。结果就是每个实例都会有自己的 categorys 属性。

2.1传参

经典继承函数可以在子构造函数中向父构造函数传参。

function Animal(name) {
    this.name = name;
  }
  function Dog() {
    // 继承 Animal 并传参
    Animal.call(this, "zhangsan");
    // 实例属性 为避免Animal构造函数覆盖Dog定义的属性，在调用父类构造函数之后再给子类实例添加额外的属性
    this.age = 18;
  }
  var d = new Dog();
  var a = new Animal();
  console.log(d.name); // zhangsan
  console.log(a.name); //undefined
  console.log(d.age); // 18

在这个例子中，Animal 构造函数接收一个参数name，然后将它赋值给name属性。在 Dog构造函数中调用 Animal 构造函数时传入这个参数，实际上会在 Dog 的实例上定义 name 属性。

2.2经典继承的问题

（1）函数不能重用，因为经典继承必须在构造函数中定义方法。

（2）子构造函数不能访问父构造函数原型上定义的方法。因此，经典继承函数基本上也不能单独使用。

2.3经典继承总结：

1.创建的实例并不是父构造函数(Animal)的实例，只是子构造函数(Dog)的实例。

2.没有拼接原型链，不能使用instanceof。因为子类的实例只继承了父类的实例属性/方法，没有继承父类的构造函数的原型对象中的属性/方法。

3.每个子类的实例都持有父类的实例方法的副本，浪费内存，影响性能，而且无法实现父类的实例方法的复用。

3.组合继承(伪经典继承)

组合继承综合了原型链和经典继承的优点。基本思路：使用原型链继承原型上的属性和方法，而通过经典继承函数继承实例属性。既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。

function Animal(name) {
  this.name = name;
  this.categorys = ["cat", "rabbit"];
}
Animal.prototype.sayName = function () {
  console.log(this.name);
};
function Dog(name, age) {
  // 继承 Dog构造函数调用了Animal构造函数并传入了name参数
  Animal.call(this, name);
  // 定义了自己的属性age
  this.age = age;
}
// 继承方法 Dog.prototype被赋值为Animal的实例
Dog.prototype = new Animal();
Dog.prototype.sayAge = function () {
  console.log(this.age);
};
var d1 = new Dog("zhangsan", 18);
d1.categorys.push("dog");
console.log(d1.categorys); // [ 'cat', 'rabbit', 'dog' ]
d1.sayName(); // zhangsan
d1.sayAge(); // 18 
var d2 = new Dog("lisi", 19);
console.log(d2.categorys); // [ 'cat', 'rabbit' ]
d2.sayName(); // lisi
d2.sayAge(); // 19

在这个例子中，Animal 构造函数定义了两个属性，name 和 categorys，而它的原型上也定义了一个方法叫 sayName()。Dog.prototype 被赋值为 Animal 的实例。原型赋值之后，又在这个原型上添加了新方法 sayAge()。这样，就可以创建两个 Dog 实例，让这两个实例都有自己的属性，包括 categorys，同时还共享相同的方法。

组合继承弥补了原型链和经典继承函数的不足，是 JavaScript 中使用最多的继承模式。而且组合继承也保留了 instanceof 操作符和 isPrototypeOf()方法识别合成对象的能力。