ES5与ES6的继承

时间：2021-08-19 22:29:46

JavaScript本身是一种神马语言：

提到继承，我们常常会联想到C#、java等面向对象的高级语言(当然还有C++)，因为存在类的概念使得这些语言在实际的使用中抽象成为一个对象，即面向对象。JavaScript这门语言本身就是作为浏览器脚本语言的弱语言，伴随着没有类的概念，JavaScript就成为了一种基于对象的语言而不是面向对象的语言，面向对象就会存在继承，那么基于对象的JavaScript是如何继承的。

ES5规则

JavaScript的4种继承方式：

(1)原型继承

栗子：

 function Animal() {

     this.name = "Animal";

     this.actions = ['eat', 'drink']

     this.eat = function () {

         console.log('eat');

     };

 }

 Animal.prototype = {

     age: '6years',

     hobbies: []

 }

 function Dog() {

     //do someting

 }

 Dog.prototype = new Animal();

 function Cat() {

     //do someting

 }

 Cat.prototype = new Animal();

 var dog = new Dog();

 var cat = new Cat();

结果：

ES5与ES6的继承

可以看到cat跟dog都继承了animal的实例对象，原型继承原型继承是最基础的继承方式，核心就是重写子类原型，是父类实例对象充当子类原型。

如果此时作如下操作会有什么情况发生

 dog.name = 'dog'

 dog.actions.push('look');

 dog.age = '7years';

 dog.hobbies.push('sleep');

cat的结果：

ES5与ES6的继承

结果已经很明显了，原型上的引用类型会被共享。

原因就是操作数组时，首先会在对象下找当前数组，如果有就会更改对象下的数组，如果没有就会到原型里面找数组，由于dog跟cat的原型是同一个animal所以修改的就是同一个数组，如果是简单类型，查找对象内没有此属性，重新生成一个属性，并且不会继续使用原型内部的属性，即原型共享。

结论：优点：最基本的继承方式，简单；缺点：原型中的引用类型共享。

到这里是不是有一种原型链的感觉了呢~

(2)改变上下文的继承

 function Animal(name) {

     this.name = name;

     this.actions = ['eat', 'drink']

     this.eat = function () {

         console.log('eat');

     };

 }

 function Dog() {

     Animal.call(this, 'dog')

 }

 function Cat() {

     Animal.call(this, 'cat')

 }

 var dog = new Dog();

 var cat = new Cat();

结果：

ES5与ES6的继承

利用call(apply,bind)方式改变了Animal函数内部this的指向，使this指向分别指向了Dog和Cat

优点：摒弃了原型，避免了原型共享；解决了向父类构造函数传参的问题。

缺点：没生成一个新对象，都会重新定义一次function，严重影响内存。

这里是不是有一种多态的感觉了呢~

(3)把前两种结合起来继承：

栗子：

 function Animal(name) {

     this.name = name;

     this.actions = ['eat', 'drink']

 }

 Animal.prototype = {

     eat: function () {

         console.log('eat');

     }

 }

 function Dog(name) {

     Animal.call(this, name)

 }

 Dog.prototype = new Animal();

 function Cat(name) {

     Animal.call(this, name)

 }

 Cat.prototype = new Animal();

 var dog = new Dog('dog');

 var cat = new Cat('cat');

结果：

ES5与ES6的继承

优点：这种方式成功的避免了重复定义function的尴尬情况，同时解决了原型共享的问题。

缺点：如果有两个子类继承父类，但是父类的属性有一个子类不用，怎么搞？这个是没法避免的，而且父类的属性全部在子类的原型上，很不美观。

这里是不是又仿佛看见了new的原理了呢~

(4)寄生组合继承：

为了扣掉组合继承中原型中不需要的属性，看到为了满足这一点，可不可以介样：

 function Animal(name) {

     this.name = name;

     this.actions = ['eat', 'drink']

 }

 Animal.prototype = {

     eat: function () {

         console.log('eat');

     }

 }

 function Dog(name) {

     Animal.call(this, name)

 }

 Dog.prototype = Animal.prototype;

 function Cat(name) {

     Animal.call(this, name)

 }

 Cat.prototype = Animal.prototype;

 var dog = new Dog('dog');

 var cat = new Cat('cat');

结果：

ES5与ES6的继承

是不是达到了原型中的属性被消灭的效果了呢。这里我们可以联想到什么呢，那就是js的new关键字

回顾一下：

 var

     Demo = function () {

         var

             self = this;

     };

 var demo = {};

 demo.__proto__ = Demo.prototype;

 Demo.call(demo);

区别在于将Demo.prototype是给对象的原型赋值，一个是给方法的原型赋值。

接着上面的栗子来，乍一看好像对，实际Child中的__proto__为Object，并不是Parent，已经背离了Child继承Parent的目的。为啥呢？因为prototype就是Object，js里一切皆为对象。

我们可以自己控制对象的原型

改进：

 function Animal(name) {

     this.name = name;

     this.actions = ['eat', 'drink']

 }

 Animal.prototype.eat = function () {

     console.log('eat');

 }

 function Dog(name) {

     Animal.call(this, name)

 }

 function Cat(name) {

     Animal.call(this, name)

 }

 function initObject(obj) {

     var

         F = function () { };

     F.prototype = obj;

     return new F();

 }

 var

     dogPrototype = initObject(Animal.prototype),

     catPrototype = initObject(Animal.prototype);

 dogPrototype.constructor = Dog;

 catPrototype.constructor = Cat;

 Dog.prototype = dogPrototype;

 Cat.prototype = catPrototype;

 var dog = new Dog('dog');

 var cat = new Cat('cat');

结果：

ES5与ES6的继承

可以看到cat与dog的原型已经是Animal了。ES5 over~

ES6规则

 class Animal {

     constructor(name) {

         this.name = name;

     };

     eat() {

         console.log('eat')

     };

 }

 class Dog extends Animal {

     constructor() {

         super();

     };

     eat() {

         super.eat();

     };

 }

 var dog = new Dog();

ES6很大程度优化了ES5的继承方式，而且constructor也暴露出来，利用super可以直接调用父级函数以及属性，相当地方便。

相关文章