JavaScript继续明白：ES5继续体式格局+ES6Class继续对照

2023年2月25日 100次阅读 来源: candyCat

JavaScript中完成继续

  在JavaScript中完成继续重要完成以下两方面的属性和要领的继续，这两方面互相互补，既有同享的属性和要领，又有特有的属性和要领。

  1. 实例属性和要领的继续：
    目标：每一个实例都有自身特有的属性和要领。特别是援用范例属性，假如被同享，一切实例都可修正援用范例属性，而且反应到一切实例中。
  2. 原型属性和要领的继续：
    目标：在继续中完成属性和要领的同享。防止每建立一次实例，都要新建一次属性和要领。

ES5—寄生组合式继续

  ES5的继续体式格局有多种：重要有原型链继续、借用组织函数、组合式继续、寄生式继续和寄生组合式继续。寄生组合式继续集组合式继续和寄生式继续的长处于一身，是ES5中，基于范例继续的最有用体式格局。
  接下来基于寄生组合式继续对ES5完成继续的方面举行诠释。

//父类
function SuperType(name){
    //父类实例属性
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
//父类原型要领
SuperType.prototype.sayName = function(){
    alert(this.name);
};
//子类
function SubType(name, age){
    SuperType.call(this, name);//1.借用组织函数：继续父类的实例属性；
    this.age = age;
}
//2.寄生式继续：将父类原型的副本强迫赋值给子类原型，完成继续父类的原型要领。
inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){
    alert(this.age);
};

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); //建立父类原型的副本
    prototype.constructor = subType; //将该副本的constructor属性指向子类
    subType.prototype = prototype; //将子类的原型属性指向副本
}

  以上示例就是ES5中寄生组合式继续的一个例子，怎样完成子类继续父类？

  • 借用组织函数SuperType.call(this, name);：当new SubType()建立子类实例时，起首挪用父类组织函数，完成了子类实例继续父类的实例属性和要领；
  • 寄生式继续inheritPrototype(SubType, SuperType);：将父类原型副本强迫替换成子类原型（1.副本constructor指向子类；2.子类prototype指向副本），使得子类原型包括父类原型中的一切属性和要领，完成了原型属性和要领的继续。

ES6中Class继续

  ES5中经由过程函数建立范例并基于原型完成继续的体式格局与其他面向对象的言语比拟确切比较另类，没有那末简单明了；ES6就供应了越发靠近传统言语的写法，引入了类的观点。

经由过程class关键字定义类

class super{
    constructor(name,color){
        this.name=name;
        this.color=["red","blue","green"];
    }
    sayName(){
        alert(this.name);
    }
}
 1. constructor为组织函数，假如非显现建立组织函数，定义类时也会自动建立组织函数；
 2. 经由过程`this`定义的属性和要领属于实例属性和要领；不然都是定义在原型上的属性和要领;
 3. class类中定义的要领`constructor、sayName`都属于原型要领。

extends完成类的继续

class Person{
    constructor(name,color){
        this.name=name;
        this.color=["red","blue","green"];
    }
    sayName(){
        alert(this.name);
    }
}

class Student extends Person(){
    constructor(name,color,score){
        super(name,color);//挪用父类组织函数，this指向子类
        this.score=score;
    }
    showScore(){
        alert(this.score);
    }
}

let stu1=new Student("xuxu",["white","black","pink"],90);
stu1.sayName();//"xuxu"
stu1.showScore();//90
 1. 子类组织函数中挪用父类组织函数，完成了子类继续父类的实例属性和要领；
 2. 经由过程extends，子类原型继续父类原型上的属性和要领：
    - Student.__proto__=Person;//作为对象，子类原型即是父类（组织函数的继续）
    - Student.prototype.__proto__=Person.prototype;//作为组织函数，子类原型对象是父类原型对象的实例。
 3. 子类静态要领继续父类静态要领
    - 静态要领的定义：关键字static；
    - 挪用要领：类名挪用（而不是实例挪用）；
    - 一般要领中，super作对象示意父类原型（用来挪用父类原型要领）；
      静态要领中super作对象示意父类（用来挪用父类静态要领）。
    - 一般要领中this指向实例对象；静态要领中hits指向当前子类。

prototype和__proto__互相关系

对象（实例和原型对象）有__proto__属性，组织函数有prototype属性，原型对象有constructor属性。
  假定class B extends A，实例对象分别是insB、insA:

  1. A.prototype.constructor=A;//类的原型的组织函数指向类自身。
  2. insA.__proto__=A.prototype;//类的实例的原型指向建立它的组织函数的原型。
  3. B.__proto__=A;//作为对象，子类的原型即是父类
  4. B.prototype.__proto__=A.prototype;//作为组织函数子类原型继续父类原型
  5. insB.__proto__.__proto__=insA.__proto__;//子类实例的原型的原型指向父类实例的原型

总结

  1. ES5中：

    • 应用借用组织函数完成 实例属性和要领的继续 ；
    • 应用原型链或许寄生式继续完成 同享的原型属性和要领的继续 。

  2. ES6中：

    • 应用class定义类，extends完成类的继续；
    • 子类constructor里挪用super()（父类组织函数）完成 实例属性和要领的继续；
    • 子类原型继续父类原型，完成 原型对象上要领的继续。
    原文作者：candyCat
    原文地址: https://segmentfault.com/a/1190000015766680
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞