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

資訊專欄INFORMATION COLUMN

圖解javascript原型&原型鏈

sutaking / 782人閱讀

我們?cè)趯W(xué)習(xí)javascript時(shí)，經(jīng)常會(huì)聽(tīng)到“萬(wàn)物皆對(duì)象”，但是呢，其實(shí)萬(wàn)物皆對(duì)象的對(duì)象也有區(qū)別。分為普通對(duì)象和函數(shù)對(duì)象。
1.對(duì)象分為函數(shù)對(duì)象和普通對(duì)象
? ??通過(guò)new Function()創(chuàng)建的對(duì)象都是函數(shù)對(duì)象，其他的都是普通對(duì)象。

2.構(gòu)造函數(shù)
而提到new關(guān)鍵字，我們不得不提到構(gòu)造函數(shù)。構(gòu)造函數(shù)又分為自定義構(gòu)造函數(shù)及native構(gòu)造函數(shù)(即構(gòu)造器)
2.1?自定義構(gòu)造函數(shù)

 function Person(name,age,job){
? ? ? ? this.name = name;
? ? ? ? this.age = age;
? ? ? ? this.job = job;
? ??}
? ? var miya = new Person("miya",18,"engineer"); //miya是構(gòu)造函數(shù)Person的實(shí)例；

而實(shí)例的構(gòu)造函數(shù)屬性(constructor) 都指向構(gòu)造函數(shù)
? ? 即：miya.constuctor = Person?
? ??
2.2 構(gòu)造器?
? ??js內(nèi)置的構(gòu)造器包括Number,Boolean,String,Object,Function,Array,RegExp,Error,Date等
同樣的，我們的構(gòu)造器的實(shí)例也有一個(gè)constuctor指向它的構(gòu)造器
? ?

    let miya= new Array()
? ??miya.constuctor ==Array;

通過(guò)以上的分析，我們可以得到以下這張圖? ??

這里擴(kuò)展一下，其實(shí)我們?cè)谧鲱愋团袛嗟臅r(shí)候習(xí)慣用typeof，typeof判斷簡(jiǎn)單數(shù)據(jù)類型的時(shí)候其實(shí)是ok的。但是typeof有判斷復(fù)雜數(shù)據(jù)類型不是很清晰，得到的基本是String或者Function
比如一下圖示判斷

但是，通過(guò)上述我們知道構(gòu)造器的實(shí)例都有一個(gè)constructor的屬性指向構(gòu)造器。那其實(shí)我們直接用constructor便可以清晰地知道這個(gè)實(shí)例從哪里來(lái)。

3.原型對(duì)象
? ? 每個(gè)函數(shù)對(duì)象都有一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象即prototype。
? ??所有的prototype會(huì)有一個(gè)默認(rèn)的constuctor屬性，指向函數(shù)對(duì)象本身。? ??

function Person(name,age,job){
this.name = name;
    this.age = age;
    this.job = job;
}
Person.prototype.sayName = function () {
    console.log(this.name);
};

let miya = new Person("miya",18,"engineer");
let tiffany = new Person("tiffany",18,"engineer");
miya.sayName();  //miya
tiffany.sayName();  //tiffany
console.log(miya.sayName == tiffany.sayName);  //true
console.log(Person.prototype.constructor == Person);  //true

通過(guò):Person.prototype.constuctor?= Person ，因?yàn)闃?gòu)造函數(shù)的實(shí)例是有一個(gè)constructor的屬性指向構(gòu)造函數(shù)的，我們可以得到結(jié)論其實(shí)Person.prototype也是Person的實(shí)例
? ? 即：原型對(duì)象是構(gòu)造函數(shù)的一個(gè)實(shí)例【原型對(duì)象(Function.prototype除外)是一個(gè)普通對(duì)象，而不是函數(shù)對(duì)象】

4.__proto__屬性
? ? 4.1 JS在創(chuàng)建對(duì)象的時(shí)候都會(huì)有一個(gè)__proto__指向它的構(gòu)造函數(shù)的原型對(duì)象

其實(shí)，每個(gè)對(duì)象都有一個(gè)__proto__屬性，但只有函數(shù)對(duì)象有prototype屬性。
因此，可以得到以下這樣圖。

? ? 4.2構(gòu)造函數(shù)擴(kuò)展
? 而我們的構(gòu)造函數(shù)本質(zhì)上都是從Function new出來(lái)的。他們本質(zhì)上都是Function的一個(gè)實(shí)例。都有一個(gè)__proto屬性指向Function的原型，也有一個(gè)constructor屬性指向Function。

? ? 提示：Math，JSON是以對(duì)象形式存在的，無(wú)需new。他們的__proto__是Object.prototype?

因此可以得到以下的圖示，所有的函數(shù)對(duì)象的__proto__都指向Function.prototype(是一個(gè)空函數(shù))


5.函數(shù)對(duì)象
? ? 1.所有的構(gòu)造器都是通過(guò)Function new出來(lái)的，他們都是Function的實(shí)例，他們的__pro__都指向Function.prototype，甚至包括根構(gòu)造器Object及Function本身。

Number.__proto__ === Function.prototype  // true
Number.constructor == Function //true

String.__proto__ === Function.prototype  // true
String.constructor == Function //true

Object.__proto__ === Function.prototype  // true
Object.constructor == Function // true

Function.__proto__ === Function.prototype // true
Function.constructor == Function //true

? ? 2.除Object.prototype外，所有的構(gòu)造器的prototype的__proto__屬性都指向Object.prototype

Function.prototype.__proto__ === Object.prototype; // true
Number.prototype.__proto__ === Object.prototype; // true
String.prototype.__proto__ === Object.prototype; // true
Array.prototype.__proto__ === Object.prototype; // true
Boolean.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === Object.prototype; // true


? ? 3.那Object.prototype的__proto__屬性是指向null的。

Object.prototype.__proto__?=== null;?// true

? ??Function.prototype也是唯一一個(gè)typeof XXX.prototype為?function的prototype? ??
? ??推導(dǎo)Function.prototype.__proto__是什么呢？ Object.prototype
? ? 所有的構(gòu)造器都繼承Function.prototype的屬性及方法 =>所有的構(gòu)造器函數(shù)都是普通的js函數(shù)可以用Object的方法
? ? Object.prototype.__proto__ == null
?
?

console.log(typeof Function.prototype) // function
console.log(typeof Object.prototype)   // object
console.log(typeof Number.prototype)   // object
console.log(typeof Boolean.prototype)  // object
console.log(typeof String.prototype)   // object
console.log(typeof Array.prototype)    // object
console.log(typeof RegExp.prototype)   // object
console.log(typeof Error.prototype)    // object
console.log(typeof Date.prototype)     // object
console.log(typeof Object.prototype)   // object

?
補(bǔ)充：
? ??null是一個(gè)獨(dú)立數(shù)據(jù)類型，而不是一個(gè)空引用，只是期望此處引用一個(gè)對(duì)象?https://developer.mozilla.org...
? ? typeof null == Object是一個(gè)遺留bug

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

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

相關(guān)文章

  • 《你不知道的javascript》筆記_對(duì)象&原型

    摘要：上一篇你不知道的筆記寫在前面這是年第一篇博客，回顧去年年初列的學(xué)習(xí)清單，發(fā)現(xiàn)僅有部分完成了。當(dāng)然，這并不影響年是向上的一年在新的城市穩(wěn)定連續(xù)堅(jiān)持健身三個(gè)月早睡早起游戲時(shí)間大大縮減，學(xué)會(huì)生活。 上一篇：《你不知道的javascript》筆記_this 寫在前面 這是2019年第一篇博客，回顧去年年初列的學(xué)習(xí)清單，發(fā)現(xiàn)僅有部分完成了。當(dāng)然，這并不影響2018年是向上的一年：在新的城市穩(wěn)定、...

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

  • 【5】JavaScript 函數(shù)高級(jí)——原型與原型鏈深入理解（圖解）

    摘要：探索是如何判斷的表達(dá)式如果函數(shù)的顯式原型對(duì)象在對(duì)象的隱式原型鏈上，返回，否則返回是通過(guò)自己產(chǎn)生的實(shí)例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測(cè)試題測(cè)試題報(bào)錯(cuò)對(duì)照下圖理解 原型與原型鏈深入理解（圖解） 原型（prototype） 函數(shù)的 prototype 屬性（圖） 每個(gè)函數(shù)都有一個(gè)prototype屬性，它默認(rèn)指向一個(gè)Object空對(duì)象（即稱為：原型對(duì)象） 原型對(duì)象中有...

    馬龍駒 評(píng)論0 收藏0

  • 《javascript高級(jí)程序設(shè)計(jì)》筆記：原型圖解

    摘要：不理解沒(méi)關(guān)系，下面會(huì)結(jié)合圖例分析上一篇高級(jí)程序設(shè)計(jì)筆記創(chuàng)建對(duì)象下一篇高級(jí)程序設(shè)計(jì)筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對(duì)象與原型鏈繼承與原型鏈 文章直接從原型圖解開(kāi)始的，如果對(duì)一些概念不太清除，可以結(jié)合后面幾節(jié)查看 1. 圖解原型鏈 1.1 鐵三角關(guān)系（重點(diǎn)） function Person() {}; var p = new Person(); showImg(https://s...

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

  • Deep in JS - 收藏集 - 掘金

    摘要：今天同學(xué)去面試，做了兩道面試題全部做錯(cuò)了，發(fā)過(guò)來(lái)給道典型的面試題前端掘金在界中，開(kāi)發(fā)人員的需求量一直居高不下。 排序算法 -- JavaScript 標(biāo)準(zhǔn)參考教程（alpha） - 前端 - 掘金來(lái)自《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》，by 阮一峰 目錄 冒泡排序 簡(jiǎn)介 算法實(shí)現(xiàn) 選擇排序 簡(jiǎn)介 算法實(shí)現(xiàn) ... 圖例詳解那道 setTimeout 與循環(huán)閉包的經(jīng)典面...

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

  • 《javascript高級(jí)程序設(shè)計(jì)》筆記：繼承

    摘要：繼承和前面兩篇文章中的知識(shí)非常相關(guān)，如果對(duì)函數(shù)創(chuàng)建原理和原型鏈不熟悉，請(qǐng)猛戳高級(jí)程序設(shè)計(jì)筆記創(chuàng)建對(duì)象高級(jí)程序設(shè)計(jì)筆記原型圖解繼承，通俗的說(shuō)，就是將自身不存在的屬性或方法，通過(guò)某種方式為自己所用文章分別介紹原型鏈繼承繼承借用構(gòu)造函數(shù)繼承組合繼 繼承和前面兩篇文章中的知識(shí)非常相關(guān)，如果對(duì)函數(shù)創(chuàng)建原理和原型鏈不熟悉，請(qǐng)猛戳：《javascript高級(jí)程序設(shè)計(jì)》筆記：創(chuàng)建對(duì)象《javascri...

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

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

0條評(píng)論

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