成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

圖解javascript原型&原型鏈

sutaking / 826人閱讀

我們在學習javascript時，經(jīng)常會聽到“萬物皆對象”，但是呢，其實萬物皆對象的對象也有區(qū)別。分為普通對象和函數(shù)對象。
1.對象分為函數(shù)對象和普通對象
? ??通過new Function()創(chuàng)建的對象都是函數(shù)對象，其他的都是普通對象。

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的實例；

而實例的構(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)造器的實例也有一個constuctor指向它的構(gòu)造器
? ?

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

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

這里擴展一下，其實我們在做類型判斷的時候習慣用typeof，typeof判斷簡單數(shù)據(jù)類型的時候其實是ok的。但是typeof有判斷復(fù)雜數(shù)據(jù)類型不是很清晰，得到的基本是String或者Function
比如一下圖示判斷

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

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

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

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

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

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

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

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

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


5.函數(shù)對象
? ? 1.所有的構(gòu)造器都是通過Function new出來的，他們都是Function的實例，他們的__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也是唯一一個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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104734.html

相關(guān)文章

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

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

    seasonley 評論0 收藏0

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

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

    馬龍駒 評論0 收藏0

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

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

    vspiders 評論0 收藏0

  • Deep in JS - 收藏集 - 掘金

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

    enali 評論0 收藏0

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

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

    JerryC 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<