ES5的原型鏈和ES6的類實現詳解

Warren 發布于2019-08-20 18:10 / 1543人閱讀

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

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的創建實例的時候實例仍然是和類是存在關聯的，而且是可以直接影響到類以及其他子類的公共狀態和方法的。

云服務器 GPU云服務器編程語言的類基于原型的語言不確定數據多少的類 php上傳文件的類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84160.html

ES5的原型鏈和ES6的類實現詳解

摘要：類才支持實例屬性代碼解讀上面暫時只是概念性的寫法，事實上，的類只是一個原型鏈的語法糖而已，主要是從寫法上更接近于面相對象的類而已，另外一個作用就是區分的構造函數和函數之間的區分。 ES5的原型鏈和ES6的類實現詳解 JavaScript最初設計時受到了面相對象編程的影響，從而引入了new關鍵字，來實例化對象。而在ES5中new后面跟著的是構造函數（也是函數），而到了ES6則改成了cla...

王偉廷 2019-08-15 10:56 評論0 收藏0
詳解javascript的類

摘要：原文地址詳解的類博主博客地址的個人博客從當初的一個彈窗語言，一步步發展成為現在前后端通吃的龐然大物。那么，的類又該怎么定義呢在面向對象編程中，類是對象的模板，定義了同一組對象又稱實例共有的屬性和方法。這個等同于的屬性現已棄用。。前言生活有度，人生添壽。原文地址：詳解javascript的類博主博客地址：Damonare的個人博客 ??Javascript從當初的一個彈窗語言，一...

hufeng 2019-08-29 11:30 評論0 收藏0
詳解javascript的類

摘要：原文地址詳解的類博主博客地址的個人博客從當初的一個彈窗語言，一步步發展成為現在前后端通吃的龐然大物。那么，的類又該怎么定義呢在面向對象編程中，類是對象的模板，定義了同一組對象又稱實例共有的屬性和方法。這個等同于的屬性現已棄用。。前言生活有度，人生添壽。原文地址：詳解javascript的類博主博客地址：Damonare的個人博客 ??Javascript從當初的一個彈窗語言，一...

marek 2019-08-20 11:59 評論0 收藏0
剖析JS的原型鏈和繼承

摘要：接下來我們來聊一下的原型鏈繼承和類。組合繼承為了復用方法，我們使用組合繼承的方式，即利用構造函數繼承屬性，利用原型鏈繼承方法，融合它們的優點，避免缺陷，成為中最常用的繼承。 JavaScript是一門面向對象的設計語言，在JS里除了null和undefined，其余一切皆為對象。其中Array/Function/Date/RegExp是Object對象的特殊實例實現，Boolean/N...

darkerXi 2019-08-21 16:48 評論0 收藏0