JavaScript 的原型詳解

jopen 12年前發布 | 43K 次閱讀 JavaScript開發 JavaScript

簡單描述js原型

        原型提供了一群同類對象共享屬性和方法的機制，對象繼承原型的所有屬性和方法（函數)。說白了js是使用原型來實現類繼承的。

充分理解prototype / __proto__

        初學者確實在這兩個屬性上是不容易分辨清楚地。所以，一個搞前端的朋友說，這兩個屬性完全搞明白了，那js原型也就差不多理解透徹了。那我嘗試闡述一下這兩個屬性（內容總結自他人的結晶和js文檔）。

JavaScript 的原型詳解

        prototype：prototype是函數的屬性，它應用的場合是函數被用作構造函數時，如果你想讓子類擁有某型特性，那我們可以直接操作父類（總是感覺父函數貼切）的這個prototype。所以在js的繼承中prototype是父類構造函數的一個屬性，這個屬性指向被構造函數創建的對象（一定要注意prototype是函數的屬性，而不是對象的）

        __proto__：在創建對象的過程中__proto__屬性會指向構建這個對象的函數的prototype屬性。Eg：var a = new Function(); a.__proto__ === Function.prototype。__proto__是所有的對象都擁有的屬性，但是這個屬性被廢棄不提倡使用了。

        實例一：

var A = function () {
     this .name = "a" ;
}
var B = {}
console.log(A.prototype);
console.log(B.prototype); //prototype是函數的屬性，所以這里打印undefined，大家也就不會奇怪了吧。
console.log(B.constructor.prototype);
console.log(A.__proto__);
console.log(B.__proto__);


        結果如下：

JavaScript 的原型詳解

原型鏈

        在js執行過程如果當前活動對象沒有這個屬性，那js執行引擎會按照該對象的__proto__屬性一直向上級查找，直到Object.__proto__，如果還是沒有發現則會返回undefined。上一張圖看看到底是如何尋找的。

JavaScript 的原型詳解

Javascript創建對象的步驟

        Javascript創建對象的步驟：(1)、創建新對象；(2)、將該對象的原型指向構造函數prototype所指向的那個原型對象；(3)、將該對象作為this參數調用構造函數。如下：

function Obj() {
}
var o = {};
Obj.call(o)

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！