javascript 之 prototype與proto

WrBug 發布于2019-08-22 15:40 / 1688人閱讀

摘要：首先，先介紹一個今天的主角隱式原型與顯式原型什么是和顯式原型在每一個函數請注意是函數創建之后都會有一個叫的屬性，這個屬性指向的是函數的原型對象。最后總結一下對象有屬性指向該對象的構造函數的原型對象。

首先，先介紹一個今天的主角：proto（隱式原型）與prototype（顯式原型）

什么是__proto__和prototype？

prototype（顯式原型）
在每一個函數（請注意是函數）創建之后都會有一個叫prototype的屬性，這個屬性指向的是函數的原型對象。

__proto__（隱式原型）
javascript 中任意對象都具有一個內置屬性，在ES5之前并沒有標準的方法訪問這個屬性，但是在絕大多數瀏覽器中都支持通過__proto__來訪問這個屬性，我們叫他隱式原型

prototype 和 __proto__之間的聯系

首先我們來看一個例子：

 function Foo(){}

 var foo = new Foo();

 foo.__proto__ === Foo.prototype; //=>true

由上面我們可以看出函數foo的隱式原型指向其構造函數的顯式原型.

通過這個我們能得出一個這樣的結論么：
某對象（萬物皆對象）.__proto__ === 其構造函數.prototype么，
答案是否定的，我們來看以下例子：

let obj = {name: "zarr"};
let sonObj = Object.create(obj);
console.log(sonObj.name); //=>zarr
console.log(sonObj.__proto__ === obj.prototype) //=>false
console.log(sonObj.__proto__ === obj) //=>true

ok，我們再看一個例子

var Obj = { a: 13 };
var obj = Object.create(Obj);
console.log(obj.a); //=>13
console.log(obj.__proto__ === Obj) //=>true

var Func = function () {
    this.a = "ds";
}

var func = Object.create(Func);
console.log(func.__proto__ === Func.prototype) //=>false
console.log(func.__proto__ === Func) //=>true
console.log(func.a) //undefined

不是說一個對象的隱式原型等于起構造函數的原型？為什么這個時候又等于這個構造函數了？
這就要分析一下Object.create的實現了，其實實現起來也不難，大家看下面

Object.create = function(obj){
     function f() {} 
     f.prototype = obj;
     return new f();
}

這下明朗了, 通過Object.create構造出的對象其實還是new出來的對象，比如上例的var func = Object.create(Func)； func.__proto__ === f.prototype === Func,
func.__proto__ === f.prototype這個還是成立的，但是由于函數f在調用完Object.create方法之后就被銷毀了，所以只有func.__proto__ === Func。

ok,最后總結一下
1.對象有屬性__proto__,指向該對象的構造函數的原型對象。
2.方法除了有屬性__proto__,還有屬性prototype，prototype指向該方法的原型對象。

云服務器 GPU云服務器 javascript__ajax _javascript _JavaScript_API _JavaScript_MVC

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

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

JavaScript之原型與原型鏈

摘要：個人博客原文地址萬物皆對象在中除值類型之外，其他的都是對象，為了說明這點，我們舉幾個例子我們可以使用來做類型判斷除了屬于值類型之外，其他都是對象。個人博客原文地址萬物皆對象在JavaScript中除值類型之外，其他的都是對象，為了說明這點，我們舉幾個例子我們可以使用typeof來做類型判斷 typeof a; // undefined typeof 1; ...

wuyangchun 2019-08-23 10:33 評論0 收藏0
深入學習js之——原型和原型鏈

摘要：我們用一張圖表示構造函數和實例原型之間的關系好了構造函數和實例原型之間的關系我們已經梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關系呢。開篇：在Brendan Eich大神為JavaScript設計面向對象系統的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向對象系統，并不是因為時間匆忙，它設計起來相對簡單，而是因為從一開始B...

FingerLiu 2019-08-23 15:25 評論0 收藏0
深入學習js之——原型和原型鏈

摘要：我們用一張圖表示構造函數和實例原型之間的關系好了構造函數和實例原型之間的關系我們已經梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關系呢。開篇：在Brendan Eich大神為JavaScript設計面向對象系統的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向對象系統，并不是因為時間匆忙，它設計起來相對簡單，而是因為從一開始B...

xialong 2019-08-23 15:04 評論0 收藏0
JavaScript深入之從原型到原型鏈

摘要：深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。讓我們用一張圖表示構造函數和實例原型之間的關系在這張圖中我們用表示實例原型。 JavaScript深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。構造函數創建對象我們先...

Songlcy 2019-08-21 15:32 評論0 收藏0
Javascript重溫OOP之原型與原型鏈

摘要：在構造函數中的中定義的屬性和方法，會被創建的對象所繼承下來。從上面的輸出結果看出，指向了其構造函數的，而本身也是一個對象，其內部也有屬性，其指向的是直到最后指向，這條原型鏈才結束。和都指向，說明原型鏈到終止。 prototype原型對象每個函數都有一個默認的prototype屬性，其實際上還是一個對象，如果被用在繼承中，姑且叫做原型對象。在構造函數中的prototype中定義的屬性...

lindroid 2019-08-21 10:57 評論0 收藏0