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

資訊專欄INFORMATION COLUMN

Javascript 深入淺出原型

wpw / 2681人閱讀

摘要：重點(diǎn)實(shí)例對(duì)象是通過原型對(duì)象與構(gòu)造函數(shù)取得聯(lián)系的。原型鏈的形成是真正是靠的，而不是。函數(shù)對(duì)象和原型對(duì)象通過和屬性進(jìn)行相互關(guān)聯(lián)。

JavaScript 使用 prototypal 原型模型，雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及，但是只要善于運(yùn)用，其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。

個(gè)人博客排版更佳：https://haonancx.github.io/

先聊一聊對(duì)象的事情

JavaScript 中，萬物皆對(duì)象！但對(duì)象也是有區(qū)別的，主要分為普通對(duì)象（Object）和函數(shù)對(duì)象（Function）。

說好的只聊技術(shù)，怎么聊上個(gè)人問題了??？

好了,安慰一下,請(qǐng)你吃下面 這道菜！

function example(){};
var example2 = function(){};
var example3 = new Function("str","console.log(str)");

var other = {};
var other2 =new Object();
var other3 = new example();

console.log(typeof other); //object 下面檢測(cè)一下他們都是些什么類型函數(shù)
console.log(typeof other2); //object
console.log(typeof other3); //object
console.log(typeof example); //function
console.log(typeof example2); //function
console.log(typeof example3); //function

怎么區(qū)分普通對(duì)象和函數(shù)對(duì)象呢？！其實(shí)很簡(jiǎn)單，凡是通過 new Function() 創(chuàng)建的對(duì)象都是函數(shù)對(duì)象，其他的都是普通對(duì)象；所以 other、other2、other3 為普通對(duì)象，而 example、example2、example3 為函數(shù)對(duì)象。

在 JavaScript 中，每當(dāng)定義一個(gè)函數(shù)對(duì)象時(shí)候，對(duì)象中都會(huì)包含一些預(yù)定義的屬性（意思就是這個(gè)函數(shù)對(duì)象一旦被定義就必然會(huì)有這些屬性）。

其中函數(shù)對(duì)象的一個(gè)屬性就是原型對(duì)象 prototype；這個(gè)屬性會(huì)指向函數(shù)的原型對(duì)象。

默認(rèn)情況下每個(gè)原型對(duì)象又都會(huì)獲取一個(gè) constructor 屬性，這個(gè)屬性包含一個(gè)指向 prototype 屬性所在函數(shù)的指針。

普通對(duì)象沒有prototype,但有 _proto _屬性。
讓你現(xiàn)出"原型"

來來來,了解完對(duì)象,我們?cè)撻_車上路了（老司機(jī)秒懂）

function Dogs(){
}
Dogs.prototype.name = "Collie";
Dogs.prototype.age = 3;
Dogs.prototype.DogsName = function(){
alert(this.name); 
};

var DogsA = new Dogs();
DogsA.DogsName();//"Collie"

上面的代碼中，創(chuàng)建了一個(gè) Dogs 函數(shù)，這時(shí)候它就會(huì)擁有一個(gè) prototype 屬性，這個(gè)屬性指向了 Dogs Prototype 原型對(duì)象，而這個(gè)原型對(duì)象擁有一個(gè) constructor (構(gòu)造函數(shù)) 屬性，其指針指向了 Dogs,就是 prototype 屬性所在的函數(shù) Dogs；當(dāng)你創(chuàng)建一個(gè)對(duì)象實(shí)例（ DogsA，就是這條語(yǔ)句：var DogsA = new Dogs(); ）的時(shí)候，同樣會(huì)擁有一個(gè) prototype 屬性；這個(gè) prototype 屬性會(huì)指向其原型對(duì)象，而不是直接指向其構(gòu)造函數(shù) Dogs。

重點(diǎn)：實(shí)例對(duì)象是通過原型對(duì)象與構(gòu)造函數(shù)取得聯(lián)系的。
原型鏈，老司機(jī)，深入一些！
JS 在創(chuàng)建對(duì)象（不論是普通對(duì)象還是函數(shù)對(duì)象）的時(shí)候，都有一個(gè)叫做 proto 的內(nèi)置屬性，用于指向創(chuàng)建它的函數(shù)對(duì)象的原型對(duì)象 prototype。

我們可以測(cè)試一下，以上面的代碼為例：

console.log(DogsA._proto_ === Dogs.prototype) //true

同樣，Dogs.prototype對(duì)象也有 _proto _ 屬性，它指向創(chuàng)建它的函數(shù)對(duì)象（Object）的 prototype

  console.log(Dogs.prototype._proto_ === Object.prototype) //true
你瞧，證明了你 DogsA 是我 Dogs 實(shí)例化出來的對(duì)象出來的。

好了繼續(xù)，Object.prototype對(duì)象也有 _proto _屬性，但它比較特殊，為 NULL

  console.log(Object.prototype._proto_) //null

我們把這個(gè)有 proto 串起來，直到 Object.prototype.__proto_ _為 NULL 的鏈就叫做原型鏈。

總結(jié)

原型和原型鏈?zhǔn)?JS 實(shí)現(xiàn)繼承的一種模型。

原型鏈的形成是真正是靠 _proto _ 的，而不是 prototype。

所有的原型對(duì)象都有 constructor 屬性，該屬性對(duì)應(yīng)創(chuàng)建所有指向該原型的實(shí)例構(gòu)造函數(shù)。

函數(shù)對(duì)象和原型對(duì)象通過 prototype 和 constructor 屬性進(jìn)行相互關(guān)聯(lián)。

該文章部分知識(shí)網(wǎng)絡(luò)整理

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

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

相關(guān)文章

  • JavaScript深入之從原型到原型鏈

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

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

  • JavaScript深入之new的模擬實(shí)現(xiàn)

    摘要：深入系列第十二篇，通過的模擬實(shí)現(xiàn)，帶大家揭開使用獲得構(gòu)造函數(shù)實(shí)例的真相一句話介紹運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象類型之一也許有點(diǎn)難懂，我們?cè)谀M之前，先看看實(shí)現(xiàn)了哪些功能。 JavaScript深入系列第十二篇，通過new的模擬實(shí)現(xiàn)，帶大家揭開使用new獲得構(gòu)造函數(shù)實(shí)例的真相 new 一句話介紹 new: new 運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具...

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

  • 深入理解JavaScript

    摘要：深入之繼承的多種方式和優(yōu)缺點(diǎn)深入系列第十五篇，講解各種繼承方式和優(yōu)缺點(diǎn)。對(duì)于解釋型語(yǔ)言例如來說，通過詞法分析語(yǔ)法分析語(yǔ)法樹，就可以開始解釋執(zhí)行了。 JavaScript深入之繼承的多種方式和優(yōu)缺點(diǎn) JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 寫在前面 本文講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 但是注意： 這篇文章更像是筆記，哎，再讓我...

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

  • JavaScript深入之創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)

    摘要：深入系列第十四篇，講解創(chuàng)建對(duì)象的各種方式，以及優(yōu)缺點(diǎn)。也就是說打著構(gòu)造函數(shù)的幌子掛羊頭賣狗肉，你看創(chuàng)建的實(shí)例使用都無法指向構(gòu)造函數(shù)這樣方法可以在特殊情況下使用。 JavaScript深入系列第十四篇，講解創(chuàng)建對(duì)象的各種方式，以及優(yōu)缺點(diǎn)。 寫在前面 這篇文章講解創(chuàng)建對(duì)象的各種方式，以及優(yōu)缺點(diǎn)。 但是注意： 這篇文章更像是筆記，因?yàn)椤禞avaScript高級(jí)程序設(shè)計(jì)》寫得真是太好了！ 1....

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

  • 深入理解Javascript原型關(guān)系

    摘要：如下所示在規(guī)范中，已經(jīng)正式把屬性添加到規(guī)范中也可以通過設(shè)置和獲取對(duì)象的原型對(duì)象對(duì)象之間的關(guān)系可以用下圖來表示但規(guī)范主要介紹了如何利用構(gòu)造函數(shù)去構(gòu)建原型關(guān)系。 前言 在軟件工程中，代碼重用的模式極為重要，因?yàn)樗麄兛梢燥@著地減少軟件開發(fā)的成本。在那些主流的基于類的語(yǔ)言（比如Java,C++）中都是通過繼承(extend)來實(shí)現(xiàn)代碼復(fù)用，同時(shí)類繼承引入了一套類型規(guī)范。而JavaScript是...

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

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

0條評(píng)論

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