ES5的原型链和ES6的类完成详解

2024年1月12日 173次阅读 来源: 夜里的太阳

ES5的原型链和ES6的类完成详解

JavaScript最初设想时受到了面相对象编程的影响，从而引入了new关键字，来实例化对象。而在ES5中new背面随着的是组织函数（也是函数），而到了ES6则改成了clas了，而一开始new建立对象都是自力的对象，并不能像java那样具有继续的观点，去同享变量和要领，为了处理这个题目，JavaScript就又给组织函数设想了一个prototype属性，如许一切私有的要领和变量就放到组织函数内里定义，而一切的大众的变量和要领就放到prototype对象内里，如许当组织函数建立一个实例化的对象的时刻，就即具有本身的私有变量和要领，也有公有的变量和要领了，实例化出来的对象的私有要领和变量修正都不会相互有影响，只需在修正公有的变量和要领的时刻是对一切实例见效的。

ES5原型链

Example

function Person(name){
    this.name = name;
}
(function ($Person){
    $Person.prototype = {
        welcome: "hello",
        introduce: function(){
            return this.welcome + ",I am " + this.name;
        }
    }
})(Person)

var person1 = new Person("arvin");
var person2 = new Person("peter");
console.log(person1.introduce());   // hello,I am arvin
console.log(person2.introduce());   // hello,I am peter

person1.__proto__.welcome = "hi";
console.log(person1.introduce());   // hi,I am arvin
console.log(person2.introduce());   // hi,I am peter

代码解读：以上是本人推荐在运用ES5时，写原型链的要领，目标是为了代码简约，轻易复用，仅供参考。代码中在原型链上定义了一个welcome大众变量，这里要注意的是如果有一样称号的私有变量welcome时，原型要领introduce内里的this.welcome会起首查找私有变量welcome并运用，这个实在就和面相对象的覆写相似了。别的能够看出，ES5的组织函数（平常首字母大写以辨别一般函数）在new的时刻确实是建立了差别的区块来寄存其私有变量name的值的，而关于原型链的变量welcome和要领introduce也确实是各个Person实例共用了统一块内存地区的，只需个中一个修正了原型链上的变量其他一切的对象实例再挪用的时刻从大众内存取出来的也就是被修正过只需的值了，这里要注意的是，组织函数new出来的实例对象，建立出来的指向原型链prototype的是其__proto__属性，也就是说person1.__proto__ === Person.prototype === person2.__proto__，这也从实际上证明了原型链对象在内存中只存了一份，是共用的。

ES6类

Example

class Person {
    constructor(name) {
        this.name = name;
    }
    welcome = 'hello';  // S7才支撑实例属性
    introduce(){
        return this.welcome + ",I am " + this.name;
    }
}

var person1 = new Person("arvin");
var person2 = new Person("peter");
console.log(person1.introduce());   // hello,I am arvin
console.log(person2.introduce());   // hello,I am peter

person1.__proto__.welcome = "hi";
console.log(person1.introduce());   // hi,I am arvin
console.log(person2.introduce());   // hi,I am peter

代码解读：上面临时只是观点性的写法，事实上，ES6的类只是一个ES5原型链的语法糖罢了，主如果从写法上更接近于面相对象的类罢了，别的一个作用就是辨别ES5的组织函数和函数之间的辨别。

小结：关于ES5和ES6的相似面相对象和非面向对象的缘由，以java为例提出以下几点个人见解：

1、java在继续（extend）的时刻，子类是会复制一遍一切父类的要领和属性（除已覆写的除外）到一个自力的内存空间中的，即一切子类之间不存在任何的关联；而这点实在就和ES5的原型继续prototype和ES6的extend有很大的差别了。

2、java在new建立一个实例的时刻一样是会拓荒一个自力的属于该实例的内存空间，统一个类的实例之间互不影响；而ES5和ES6的建立实例的时刻实例仍然是和类是存在关联的，而且是能够直接影响到类以及其他子类的大众状况和要领的。

    原文作者：夜里的太阳
    原文地址: https://segmentfault.com/a/1190000010275040
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞