JavaScript基礎之創建對象、原型、原型對象、原型鏈

wangbjun 發布于2019-08-22 15:16 / 1919人閱讀

摘要：在最開始的時候，原型對象的設計主要是為了獲取對象的構造函數。同理數組通過調用函數通過調用原型鏈中描述了原型鏈的概念，并將原型鏈作為實現繼承的主要方法。

對象的創建

在JavaScript中創建一個對象有三種方式。可以通過對象直接量、關鍵字new和Object.create()函數來創建對象。

1. 對象直接量

創建對象最直接的方式就是在JavaScript代碼中使用對象直接量。在ES5中對象直接量是由若干 名/值組成的映射表, 整個映射表由{}包含起來。每個名/值中間使用:進行分割，名/值之間使用,進行分割。

var o1 = {};
var o2 = {name: "javascript"}
var o3 = {title: "object", o2: o2} 
// 數組、日期、函數、正則等作為特殊的對象，這里暫不討論
// ES6 也暫時不討論

上面就是使用對象直接量創建對象，這種方式比較簡單方便。

2. 通過new創建對象

通過關鍵字new + 函數調用，就可以創建一個新的對象。被調用的函數被稱為構造函數。根據高程中描述，使用 new + 調用函數 創建一個對象，這種方式會經歷以下 4 個步驟:

(1) 創建一個新對象;
(2) 將構造函數的作用域賦給新對象(因此 this 就指向了這個新對象);
(3) 執行構造函數中的代碼(為這個新對象添加屬性);
(4) 返回新對象。

舉個例子:

    var Foo = function(name) {
         this.name = name
    }
    
    var foo = new Foo("我"); 
    /*
        var foo = new Foo("我") 
        創建對象大致的流程是
        （1）  var obj = {};
        `高程`中步驟(2),(3)如果不清楚的小伙伴，可以參考下面的實現
        （2)、(3) Foo.call(obj); call 方法能夠改變函數Foo的執行上下，把this指向obj，然后執行Foo函數
        （4） foo = obj;   
    */
    typeof foo; // "object"
    foo.constructor === Foo // true

3. 通過Object.create() 創建對象

這里是ES5官方提供的一個創建對象的方法。

    var obj = {name: "javascript"};
    var newObj = Object.create(obj);
    newObj.name // => javascript

原型

JS中每個函數都可以看成一個對象，而原型(prototype)就是函數中的其中一個屬性。這里要很清楚，原型是函數上面的一個屬性，這個屬性只有函數對象才能擁有，別的類型是沒有prototype屬性。而原型的作用就是它所引用的對象能夠被擁有它的函數所構建的實例化對象所訪問。

那么原型是怎么和對象建立聯系的？

編寫代碼如下:

let obj = {name: "javascript"};
console.log(obj.name) // => javascript
console.log(obj)

控制臺輸出如下:

我們在程序中定義一個JavaScript對象，然后打印這個對象，這里除了前面定義的name屬性外，還有另外一個__proto__屬性。前面說道函數上面的 prototype(原型)所指向的對象能夠擁有它的函數所構建的實例化對象所訪問。至于具體怎么訪問的細節沒有說明。其實就是通過__proto__這個屬性作為橋梁進行的聯接。

let obj = {name: "javascript"};
console.log(obj.__proto__ === Object.prototype) //true

對比發現__proto__所指的對象和Object.prototype所指的是一樣的。我們是可以認定__proto__就是這座橋梁，那么obj就能訪問到Object.prototype所指的對象就是理所當然了。

于是我就在猜測在使用直接定義量去定義對象的時候，在底層的實現很有可能就是通過new Object()的這種方式實現的。

于是我編寫了下面的測試代碼:

 let obj = {name: "javascript"};
 let obj1 = new Object({name: "javascript"});

發現上面的obj與obj1兩者數據結構基本一致。

原型對象

原型對象簡單來說就是函數的原型所指向的對象。前面說原型的時候，說了Object.prototype所指對象就是Object(函數)的原型對象。在每個函數的原型對象中，默認會有constructor屬性，用于指向函數本身。

Object.prototype.constructor === Object // true
let Test = function() {console.log("test")};
Test.prototype.constructor === Test // true

在最開始的時候，原型對象的constructor設計主要是為了獲取對象的構造函數。后來發現constructor屬性易變，不可信。推薦使用instanceof。

var Test = function() {console.log("test")};
var test = new Test();
console.log(test.constructor); // Test
test.constructor = Object;
console.log(test.constructor); // Object
/*這里想使用 test.constructor 來判斷是否是Test的實例化對象就不可信。而應該使用 instanceof */
test instanceof Test // true

原型對象有什么作用，主要實現對象的繼承。

例如我們常用的對象、數組、函數都是得益于原型。

當我們使用變量直接量定義一個對象的時候，其實我們是沒有定義它上面的這些能夠調用的方法

let obj = {};

這些方法怎么來的，就是通過調用Object上面的原型對象而來的。

console.log(Object.prototype)

同理數組(通過調用Array.prototype),函數(通過調用Function.prototype)

原型鏈

ECMAScript中描述了原型鏈的概念，并將原型鏈作為實現繼承的主要方法。其基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。簡單回顧一下構造函數、原型和實例的關系:每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。那么，假如我們讓原型對象等于另一個類型的實例，結果會怎么樣呢?顯然，此時的原型對象將包含一個指向另一個原型的指針，相應地，另一個原型中也包含著一個指向另一個構造函數的指針。假如另一個原型又是另一個類型的實例，那么上述關系依然成立，如此層層遞進，就構成了實例與原型的鏈條。這就是所謂原型鏈的基本概念。

云服務器 GPU云服務器原型原型鏈原型鏈 javascript原型原型鏈繼承

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

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

JS面向對象二:this/原型鏈/new原理

摘要：情況沒有明確作用對象的情況下，通常為全局對象例如函數的回調函數，它的就是全局對象。正因如此，機器可以作為這類對象的標志，即面向對象語言中類的概念。所以機器又被稱為構造函數。原型鏈也就是繼承鏈。 JS面向對象二:this/原型鏈/new原理阮一峰JavaScript教程:面向對象編程阮一峰JavaScript教程:實例對象與 new 命令阮一峰JavaScript教程:this 關...

anRui 2019-08-26 12:17 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

AaronYuan 2019-08-20 18:55 評論0 收藏0
JS面向對象的程序設計之繼承的實現 - 原型鏈

摘要：簡單回顧一下構造函數原型和實例對象之間的關系每個構造函數都有一個原型對象。找到生成構造函數的原型對象的構造函數，搜索其原型對象，找到了。 JS面向對象的程序設計之繼承的實現 - 原型鏈前言：最近在細讀Javascript高級程序設計，對于我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯誤，會非常感謝您的指出。文中絕大部分內容引用自《JavaS...

zhaochunqi 2019-08-23 12:22 評論0 收藏0