成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript之原型解析（上）

lushan / 1423人閱讀

摘要：前言原型這個(gè)概念在這門語(yǔ)言中是一個(gè)核心關(guān)鍵的知識(shí)點(diǎn)，但是你是否真的已經(jīng)完全理解透徹了呢可能我個(gè)人的理解能力較差，因此經(jīng)過(guò)多次翻閱書籍和實(shí)踐我才真正了解原型，所以記錄下來(lái)以加深理解，也以便日后深入探討。

前言 
原型這個(gè)概念在JavaScript這門語(yǔ)言中是一個(gè)核心關(guān)鍵的知識(shí)點(diǎn)，但是你是否真的已經(jīng)完全理解透徹了呢?可能我個(gè)人的理解能力較差，因此經(jīng)過(guò)多次翻閱書籍和實(shí)踐我才真正了解原型，所以記錄下來(lái)以加深理解，也以便日后深入探討。如有不正確的地方，歡迎斧正！
原型涉及到的概念 

__proto__/[[prototype]]



prototype


constructor
區(qū)分原型指針和原型屬性

注：首先要區(qū)分的是原型指針__proto__/[[prototype]]和原型屬性prototype，很多時(shí)候我們可能會(huì)把它們混為一談，但是兩者實(shí)際上不是同一種東西?。?！

原型指針__proto__/[[prototype]]

先來(lái)看一個(gè)例子：

var obj = {};
function fn() {};
console.log(obj.__proto__ === Object.prototype); // true
console.log(obj.__proto__ === Object.getPrototypeOf(obj)); // true
console.log(fn.__proto__ === Function.prototype); // true
console.log(fn.__proto__ === Object.getPrototypeOf(Function)); // true

實(shí)際上，實(shí)例對(duì)象的原型指針[[prototype]]在某些宿主環(huán)境下是不能讀取到的；
但也有例外:
(1) 在瀏覽器環(huán)境下原型指針可以使用__proto__屬性讀取到
(2) ECMAScript 5版本增加的新方法Object.getPrototypeOf()可以進(jìn)行讀取到

解釋：
每個(gè)對(duì)象在創(chuàng)建的時(shí)候都會(huì)有個(gè)原型指針的屬性指向負(fù)責(zé)構(gòu)造該對(duì)象的原型對(duì)象，以上面為例 ->
obj是由原型對(duì)象Object.prototype構(gòu)造的，等同于使用new Object構(gòu)造
fn是由原型對(duì)象Function.prototype構(gòu)造的，等同于使用new Function構(gòu)造

經(jīng)典的原型鏈圖示

?

謹(jǐn)記，往原型鏈向上追溯，最終都是由原型對(duì)象Object.prototype進(jìn)行構(gòu)造！

原型屬性prototype

再來(lái)個(gè)栗子：

var obj = {};
function fn() {};
console.log(obj.prototype); // undefined
console.log(fn.prototype === Object.prototype); // false
console.log(fn.prototype === new fn().__proto__); // true
console.log(fn.prototype === Object.getPrototypeOf(new fn)); // true

解釋：
以前我一直混淆的概念就在這里，
為什么obj.prototype是undefined呢?
為什么fn.prototype指向的不是Object.prototype?
如果你跟我一樣有這樣的疑惑的話，說(shuō)明你理解錯(cuò)了原型指針__proto__/[[prototype]]和原型屬性prototype的概念?。?！

/**
* 1. 如果你想得到構(gòu)造某對(duì)象的原型對(duì)象，你應(yīng)該讀取該對(duì)象的原型指針
* 2. 然而，讀取某對(duì)象的原型屬性prototype時(shí)，你的意圖應(yīng)該是想以該對(duì)象作為原型對(duì)象進(jìn)行構(gòu)造實(shí)際對(duì)象
/
// 這就解析了為什么，實(shí)例對(duì)象new fn的原型指針__proto__指向了fn.prototype(fn的原型屬性)
// 另外，因?yàn)閛bj是普通對(duì)象，不可以使用new關(guān)鍵字進(jìn)行構(gòu)造實(shí)例，因此自然也就沒(méi)有原型屬性了 -> undefined

如果還有疑惑，建議結(jié)合上面經(jīng)典的原型鏈圖示進(jìn)行思考！

構(gòu)造器指針constructor

老規(guī)矩，上代碼

var obj = {};
function fn() {};
console.log(obj.constructor === Object); // true
console.log(fn.constructor === Function); // true
console.log(obj.hasOwnProperty("construnctor")); // false
console.log(fn.hasOwnProperty("construnctor")); // false

通過(guò)以上代碼，我們可以知道，其實(shí)obj和fn對(duì)象自身并沒(méi)有constructor這個(gè)屬性，實(shí)際上constructor是構(gòu)造他們的原型對(duì)象上面的屬性，并且指向構(gòu)造對(duì)象本身?。╫nce again，如果還有疑惑請(qǐng)建議結(jié)合上面經(jīng)典的原型鏈圖示進(jìn)行思考?。?/p> 參考文獻(xiàn) 

javascript高級(jí)程序設(shè)計(jì)（第三版）——[美]Nichilas C.Zakas 著


javascript權(quán)威指南（第6版）——David Flangan 著 淘寶前端團(tuán)隊(duì) 譯

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89079.html

相關(guān)文章

  • 獨(dú)家解析Javascript原型繼承 - 之函數(shù)原型和AOP

    摘要：引子獨(dú)家解析原型繼承已經(jīng)比較全面的分析了自定義函數(shù)類型，內(nèi)置基本類和內(nèi)置對(duì)象類型的的以及的原型鏈。鑒于函數(shù)是的一等公民，另辟新篇介紹函數(shù)的原型及其應(yīng)用。函數(shù)本身也是對(duì)象，它遵循獨(dú)家解析原型繼承所描述的自定義函數(shù)類型對(duì)象的原型法則。 引子 獨(dú)家解析Javascript原型繼承已經(jīng)比較全面的分析了自定義函數(shù)類型，JS內(nèi)置基本類(undefined, null, bool, number, ...

    ispring 評(píng)論0 收藏0

  • 進(jìn)擊JavaScript之（四）原型與原型鏈

    摘要：每一個(gè)由構(gòu)造函數(shù)創(chuàng)建的對(duì)象都會(huì)默認(rèn)的連接到該神秘對(duì)象上。在構(gòu)造方法中也具有類似的功能，因此也稱其為類實(shí)例與對(duì)象實(shí)例一般是指某一個(gè)構(gòu)造函數(shù)創(chuàng)建出來(lái)的對(duì)象，我們稱為構(gòu)造函數(shù)的實(shí)例實(shí)例就是對(duì)象。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來(lái)的。 本文您將看到以下內(nèi)容： 傳統(tǒng)構(gòu)造函數(shù)的問(wèn)題 一些相關(guān)概念 認(rèn)識(shí)原型 構(gòu)造、原型、實(shí)例三角結(jié)構(gòu)圖 對(duì)象的原型鏈 函數(shù)的構(gòu)造函數(shù)Function 一句話說(shuō)明什么...

    XBaron 評(píng)論0 收藏0

  • 進(jìn)擊JavaScript之（一）變量聲明提升

    摘要：如下代碼輸出的結(jié)果是代碼執(zhí)行分為兩個(gè)大步預(yù)解析的過(guò)程代碼的執(zhí)行過(guò)程預(yù)解析與變量聲明提升程序在執(zhí)行過(guò)程中，會(huì)先將代碼讀取到內(nèi)存中檢查，會(huì)將所有的聲明在此進(jìn)行標(biāo)記，所謂的標(biāo)記就是讓解析器知道有這個(gè)名字，后面在使用名字的時(shí)候不會(huì)出現(xiàn)未定義的錯(cuò)誤。 showImg(https://segmentfault.com/img/remote/1460000012922850); 如下代碼輸出的結(jié)果是...

    LeexMuller 評(píng)論0 收藏0

  • 學(xué)習(xí)JavaScript之原型鏈

    原型鏈之前一直都不是很理解，這兩天把《你不知道的JavaScript》和《JavaScript高級(jí)程序設(shè)計(jì)》的原型鏈那章看完后有所理解，在這里先記下來(lái)，加深印象。 什么是原型對(duì)象 要講清楚什么是原型鏈需要從原型對(duì)象開始談，那么什么是原型對(duì)象呢？《JavaScript高級(jí)程序設(shè)計(jì)》中是這樣講的： 無(wú)論什么時(shí)候，只要?jiǎng)?chuàng)建了一個(gè)新函數(shù)，就會(huì)根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性，這個(gè)屬...

    Leo_chen 評(píng)論0 收藏0

  • 前端面試之JavaScript（總結(jié)）

    1. JS基本的數(shù)據(jù)類型和引用類型 基本數(shù)據(jù)類型：number、string、null、undefined、boolean、symbol -- 棧 引用數(shù)據(jù)類型：object、array、function -- 堆 兩種數(shù)據(jù)類型存儲(chǔ)位置不同 原始數(shù)據(jù)類型是直接存儲(chǔ)在棧(stack)中的簡(jiǎn)單數(shù)據(jù)段，占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)； 引用數(shù)據(jù)類型存儲(chǔ)在堆(heap)中的對(duì)象，占據(jù)空間大、大...

    tomato 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<