ES5的原型鏈和ES6的類實(shí)現(xiàn)詳解

王偉廷發(fā)布于2019-08-15 10:56 / 3171人閱讀

摘要：類才支持實(shí)例屬性代碼解讀上面暫時只是概念性的寫法，事實(shí)上，的類只是一個原型鏈的語法糖而已，主要是從寫法上更接近于面相對象的類而已，另外一個作用就是區(qū)分的構(gòu)造函數(shù)和函數(shù)之間的區(qū)分。

ES5的原型鏈和ES6的類實(shí)現(xiàn)詳解

JavaScript最初設(shè)計(jì)時受到了面相對象編程的影響，從而引入了new關(guān)鍵字，來實(shí)例化對象。而在ES5中new后面跟著的是構(gòu)造函數(shù)（也是函數(shù)），而到了ES6則改成了clas了，而一開始new創(chuàng)建對象都是獨(dú)立的對象，并不能像java那樣擁有繼承的概念，去共享變量和方法，為了解決這個問題，JavaScript就又給構(gòu)造函數(shù)設(shè)計(jì)了一個prototype屬性，這樣所有私有的方法和變量就放到構(gòu)造函數(shù)里面定義，而所有的公共的變量和方法就放到prototype對象里面，這樣當(dāng)構(gòu)造函數(shù)創(chuàng)建一個實(shí)例化的對象的時候，就即擁有自己的私有變量和方法，也有公有的變量和方法了，實(shí)例化出來的對象的私有方法和變量修改都不會互相有影響，只有在修改公有的變量和方法的時候是對所有實(shí)例生效的。

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時，寫原型鏈的方法，目的是為了代碼簡潔，方便復(fù)用，僅供參考。代碼中在原型鏈上定義了一個welcome公共變量，這里要注意的是如果有同樣名稱的私有變量welcome時，原型方法introduce里面的this.welcome會首先查找私有變量welcome并使用，這個其實(shí)就和面相對象的覆寫類似了。另外可以看出，ES5的構(gòu)造函數(shù)（一般首字母大寫以區(qū)分普通函數(shù)）在new的時候確實(shí)是創(chuàng)建了不同的區(qū)塊來存放其私有變量name的值的，而對于原型鏈的變量welcome和方法introduce也確實(shí)是各個Person實(shí)例共用了同一塊內(nèi)存區(qū)域的，只要其中一個修改了原型鏈上的變量其他所有的對象實(shí)例再調(diào)用的時候從公共內(nèi)存取出來的也就是被修改過只有的值了，這里要注意的是，構(gòu)造函數(shù)new出來的實(shí)例對象，創(chuàng)建出來的指向原型鏈prototype的是其__proto__屬性，也就是說person1.__proto__ === Person.prototype === person2.__proto__，這也從實(shí)際上證明了原型鏈對象在內(nèi)存中只存了一份，是共用的。

ES6類

Example

class Person {
    constructor(name) {
        this.name = name;
    }
    welcome = "hello";  // S7才支持實(shí)例屬性
    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

代碼解讀：上面暫時只是概念性的寫法，事實(shí)上，ES6的類只是一個ES5原型鏈的語法糖而已，主要是從寫法上更接近于面相對象的類而已，另外一個作用就是區(qū)分ES5的構(gòu)造函數(shù)和函數(shù)之間的區(qū)分。

小結(jié)：對于ES5和ES6的類似面相對象和非面向?qū)ο蟮脑颍詊ava為例提出以下幾點(diǎn)個人見解：

1、java在繼承（extend）的時候，子類是會復(fù)制一遍所有父類的方法和屬性（除已覆寫的除外）到一個獨(dú)立的內(nèi)存空間中的，即所有子類之間不存在任何的關(guān)系；而這點(diǎn)其實(shí)就和ES5的原型繼承prototype和ES6的extend有很大的不同了。
2、java在new創(chuàng)建一個實(shí)例的時候同樣是會開辟一個獨(dú)立的屬于該實(shí)例的內(nèi)存空間，同一個類的實(shí)例之間互不影響；而ES5和ES6的創(chuàng)建實(shí)例的時候?qū)嵗匀皇呛皖愂谴嬖陉P(guān)聯(lián)的，而且是可以直接影響到類以及其他子類的公共狀態(tài)和方法的。