欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript學(xué)習(xí)筆記7 原型鏈的原理

 更新時間:2010年01月11日 00:33:25   作者:  
說到prototype,就不得不先說下new的過程。
我們先看看這樣一段代碼:
復(fù)制代碼 代碼如下:

<script type="text/javascript">
var Person = function () { };
var p = new Person();
</script>

很簡單的一段代碼,我們來看看這個new究竟做了什么?我們可以把new的過程拆分成以下三步:

<1> var p={}; 也就是說,初始化一個對象p。

<2> p.__proto__=Person.prototype;

<3> Person.call(p);也就是說構(gòu)造p,也可以稱之為初始化p。

關(guān)鍵在于第二步,我們來證明一下:
復(fù)制代碼 代碼如下:

<script type="text/javascript">
var Person = function () { };
var p = new Person();
alert(p.__proto__ === Person.prototype);
</script>

這段代碼會返回true。說明我們步驟2的正確。

那么__proto__是什么?我們在這里簡單地說下。每個對象都會在其內(nèi)部初始化一個屬性,就是__proto__,當(dāng)我們訪問一個對象的屬性時,如果這個對象內(nèi)部不存在這個屬性,那么他就會去__proto__里找這個屬性,這個__proto__又會有自己的__proto__,于是就這樣一直找下去,也就是我們平時所說的原型鏈的概念。

按照標(biāo)準(zhǔn),__proto__是不對外公開的,也就是說是個私有屬性,但是Firefox的引擎將他暴露了出來成為了一個共有的屬性,我們可以對外訪問和設(shè)置。

好,概念說清了,讓我們看一下下面這些代碼:
復(fù)制代碼 代碼如下:

<script type="text/javascript">
var Person = function () { };
Person.prototype.Say = function () {
alert("Person say");
}
var p = new Person();
p.Say();
</script>

這段代碼很簡單,相信每個人都這樣寫過,那就讓我們看下為什么p可以訪問Person的Say。

首先var p=new Person();可以得出p.__proto__=Person.prototype。那么當(dāng)我們調(diào)用p.Say()時,首先p中沒有Say這個屬性,于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我們在上面定義了Person.prototype.Say=function(){}; 于是,就找到了這個方法。

好,接下來,讓我們看個更復(fù)雜的。
復(fù)制代碼 代碼如下:

<script type="text/javascript">
var Person = function () { };
Person.prototype.Say = function () {
alert("Person say");
}
Person.prototype.Salary = 50000;
var Programmer = function () { };
Programmer.prototype = new Person();
Programmer.prototype.WriteCode = function () {
alert("programmer writes code");
};
Programmer.prototype.Salary = 500;
var p = new Programmer();
p.Say();
p.WriteCode();
alert(p.Salary);
</script>

我們來做這樣的推導(dǎo):

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

而在上面我們指定了Programmer.prototype=new Person();我們來這樣拆分,var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根據(jù)上面得到p.__proto__=Programmer.prototype??梢缘玫絧.__proto__.__proto__=Person.prototype。

好,算清楚了之后我們來看上面的結(jié)果,p.Say()。由于p沒有Say這個屬性,于是去p.__proto__,也就是Programmer.prototype,也就是p1中去找,由于p1中也沒有Say,那就去p.__proto__.__proto__,也就是Person.prototype中去找,于是就找到了alert(“Person say”)的方法。

其余的也都是同樣的道理。

這也就是原型鏈的實現(xiàn)原理。

最后,其實prototype只是一個假象,他在實現(xiàn)原型鏈中只是起到了一個輔助作用,換句話說,他只是在new的時候有著一定的價值,而原型鏈的本質(zhì),其實在于__proto__!

相關(guān)文章

  • jquery和javascript的區(qū)別(常用方法比較)

    jquery和javascript的區(qū)別(常用方法比較)

    jquery 就對javascript的一個擴展,封裝,就是讓javascript更好用,更簡單,為了說明區(qū)別,下面與大家分享下JavaScript 與JQuery 常用方法比較
    2013-07-07
  • ES6變量賦值和基本數(shù)據(jù)類型詳解

    ES6變量賦值和基本數(shù)據(jù)類型詳解

    本文詳細講解了ES6變量賦值和基本數(shù)據(jù)類型,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-07-07
  • 詳解JavaScript實現(xiàn)異步Ajax

    詳解JavaScript實現(xiàn)異步Ajax

    本文詳細講解了JavaScript實現(xiàn)異步Ajax的方法,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-05-05
  • JavaScript匿名函數(shù)與委托使用示例

    JavaScript匿名函數(shù)與委托使用示例

    本例主要介紹了JavaScript匿名函數(shù)與委托的使用,需要的朋友可以參考下
    2014-07-07
  • 簡單介紹JavaScript的變量和數(shù)據(jù)類型

    簡單介紹JavaScript的變量和數(shù)據(jù)類型

    這篇文章主要介紹了簡單介紹JavaScript的變量和數(shù)據(jù)類型,是JS入門中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-06-06
  • js選擇器全面解析

    js選擇器全面解析

    下面小編就為大家?guī)硪黄猨s選擇器全面解析。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • 圖解prototype、proto和constructor的三角關(guān)系

    圖解prototype、proto和constructor的三角關(guān)系

    在javascript中,prototype、constructor以及__proto__之間有著“著名”的剪不斷理還亂的三角關(guān)系,樓主就著自己對它們的淺顯認識,來粗略地理理以備忘,有不對之處還望斧正。
    2016-07-07
  • Three.js源碼閱讀筆記(光照部分)

    Three.js源碼閱讀筆記(光照部分)

    好久沒看Three.js源碼了。今天天氣不錯,接著看;這次從光照部分看起:光照模型,從光線本身角度來看包括環(huán)境光、平行光、點光源,從物體表面材質(zhì)角度看又包括漫反射和鏡面反射,需要了解的朋友可以參考下
    2012-12-12
  • JavaScript indexOf方法入門實例(計算指定字符在字符串中首次出現(xiàn)的位置)

    JavaScript indexOf方法入門實例(計算指定字符在字符串中首次出現(xiàn)的位置)

    這篇文章主要介紹了JavaScript indexOf方法入門實例,indexOf方法用于計算指定字符在字符串中首次出現(xiàn)的位置,需要的朋友可以參考下
    2014-10-10
  • js變量提升深入理解

    js變量提升深入理解

    下面小編就為大家?guī)硪黄猨s變量提升深入理解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09

最新評論