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

資訊專欄INFORMATION COLUMN

小筆記：JS原型和原型鏈

CastlePeaK / 908人閱讀

摘要：所以為了方便查看一個對象的原型，和中提供了這個非標(biāo)準(zhǔn)不是所有瀏覽器都支持的訪問器引入了標(biāo)準(zhǔn)對象原型訪問器。在的原型對象中，還包含一個屬性，這個屬性對應(yīng)創(chuàng)建所有指向該原型的實例的構(gòu)造函數(shù)。

JS原型？ 
有句簡潔直觀的描述："原型是Javascript中的繼承的基礎(chǔ)，JavaScript的繼承就是基于原型的繼承"。

在JavaScript中，原型也是一個對象，通過原型可以實現(xiàn)對象的屬性繼承，JavaScript的對象中都包含了一個"[[Prototype]]"內(nèi)部屬性，這個屬性所對應(yīng)的就是該對象的原型。

"[[Prototype]]"作為對象的內(nèi)部屬性，是不能被直接訪問的。所以為了方便查看一個對象的原型，F(xiàn)irefox和Chrome中提供了__proto__這個非標(biāo)準(zhǔn)（不是所有瀏覽器都支持）的訪問器（ECMA引入了標(biāo)準(zhǔn)對象原型訪問器"Object.getPrototype(object)"）。在JavaScript的原型對象中，還包含一個"constructor"屬性，這個屬性對應(yīng)創(chuàng)建所有指向該原型的實例的構(gòu)造函數(shù)。

提到原型，我們必須要了解下Object和Function：

Object和Function都是JS的自帶函數(shù)，Object繼承自己，F(xiàn)untion繼承自己，Object和Function互相是繼承對方，也就是說Object和Function都既是函數(shù)也是對象。
//instanceof 就是判斷一個實例是否屬于某種類型
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

前面提到為了方便查看一個對象的原型，引入"__proto__",那么Function和Object對應(yīng)的原型是什么？

console.log(Function.__proto__); // ? () { [native code] }
console.log(Object.__proto__);  // ? () { [native code] }
console.log(Function.__proto__==Function.prototype); //true
console.log(Object.__proto__==Function.prototype); //true

所以,Object 是 Function的實例，而Function是它自己的實例。

說到Function和Object的相互繼承和對應(yīng)原型，可能覺得有點頭大，那我們先放一下，讓我們先了解下js對象的一些小知識

普通對象和函數(shù)對象

萬物皆對象,js中對象其實分為函數(shù)對象和普通對象。
函數(shù)對象可以創(chuàng)建普通對象，普通對象沒法創(chuàng)建函數(shù)對象，所以普通對象權(quán)利最低。

//普通對象
let str=new String();
let num=new Number();
let obj=new Object();
//....

凡是通過new Function創(chuàng)建的對象都是函數(shù)對象，其他都是普通對象（通常通過Object創(chuàng)建），可以通過typeof來判斷。

function f1(){}; // ==  var f1 = new Function();

function f2(a,b){
  alert(a+b);
}
//等價于
var f2 = new Function(a,b,"alert(a+b)");
說那么多，其實記住下面的內(nèi)容就好了：

1.每一個函數(shù)對象都有一個prototype屬性，但是普通對象是沒有的；prototype下面又有個construetor，指向這個函數(shù)。

2.每個對象都有一個名為_proto_的內(nèi)部屬性，指向它所對應(yīng)的構(gòu)造函數(shù)的原型對象，原型鏈基于_proto_;

讓我們建一個普通函數(shù)，可以看到：

var obj = {};
  console.log(obj.prototype); //undefined
  console.log(obj instanceof Object); //true
  console.log(obj.__proto__ === Object.prototype) //true
  console.log(Object === Object.prototype.constructor) //true
  console.log(Object.prototype.constructor) //function Object()
　console.log(Object.prototype.__proto__); //null

obj的確沒有prototype屬性

obj是Object的實例

obj的__proto__指向Object的prototype

Object.prototype.constructor指向Object本身

再建一個函數(shù)對象：

function Fun(){};
var f1 = new Fun();
console.log(f1.prototype); //undefined
console.log(f1 instanceof Fun); //true
console.log(f1.__proto__ === Fun.prototype); //true
console.log(Fun=== Fun.prototype.constructor) ;//true
console.log(Fun.prototype.__proto__ === Object.prototype) ;//true
console.log(Object.prototype.__proto__); //null

Fun是函數(shù)對象，f1還是普通對象

f1是Fun的實例

Fun的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;

原型鏈 
ECMscript中描述了原型鏈的概念，并將原型鏈作為js實現(xiàn)繼承的主要方法。
基本思路：利用原型，讓一個引用類繼承另一個引用類的屬性和方法。
構(gòu)造函數(shù)、原型和實例的關(guān)系：
    每個構(gòu)造函數(shù)都有一個原型對象，原型對象都包含一個指向構(gòu)造函數(shù)的指針，而實例都包含一個指向原型對象的內(nèi)部指針。

其實，avascript中，每個對象都會在內(nèi)部生成一個proto 屬性，當(dāng)我們訪問一個對象屬性時，如果這個對象不存在就回去proto 指向的對象里面找，一層一層找下去，這就是javascript原型鏈的概念。

f1.__proto__ ==> Fun.prototype ==> Fun.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null

JS世界中所有的東西都是對象,所有的東西都由Object衍生而來, 所以所有東西原型鏈的終點指向null

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

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

相關(guān)文章

  • [學(xué)習(xí)筆記] 小角度看JS原型鏈

    摘要：雖然在腳本中沒有標(biāo)準(zhǔn)的方式訪問，但在每個對象上都支持一個屬性，用于訪問其構(gòu)造函數(shù)的原型對象。說的是構(gòu)造函數(shù)和原型對象之間的關(guān)系，說的是實例對象和原型對象之間的關(guān)系。 前言 在 segmentfault 上看到這樣一道題目： var F = function(){}; Object.prototype.a = function(){}; Function.prototype.b = fu...

    Cciradih 評論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

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

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

    seasonley 評論0 收藏0

  • 原型與原型鏈學(xué)習(xí)筆記

    摘要：原型相同對象的共有屬性也稱作原型原型鏈中所有的對象都是由它的原型對象繼承而來。說的直白點就是，所有原型鏈的屬性，最終都指向的是對象的而對象的指向的是。 原 型：相同對象的共有屬性也稱作原型 原型鏈：中所有的對象都是由它的原型對象繼承而來。而原型對象自身也是一個對象，它也有自己的原型對象，這樣層層上溯，就形成了一個類似鏈表的結(jié)構(gòu)，這就是原型鏈showImg(https://segm...

    jiekechoo 評論0 收藏0

  • JavaScript學(xué)習(xí)第十天筆記（繼承）

    摘要：繼承原型鏈如果構(gòu)造函數(shù)或?qū)ο蟮脑椭赶驑?gòu)造函數(shù)或?qū)ο螅脑驮僦赶驑?gòu)造函數(shù)或?qū)ο?，以此類推，最終的構(gòu)造函數(shù)或?qū)ο蟮脑椭赶虻脑汀? 繼承 原型鏈 如果構(gòu)造函數(shù)或?qū)ο驛的原型指向構(gòu)造函數(shù)或?qū)ο驜，B的原型再指向構(gòu)造函數(shù)或?qū)ο驝，以此類推，最終的構(gòu)造函數(shù)或?qū)ο蟮脑椭赶騉bject的原型。由此形成了一條鏈狀結(jié)構(gòu)，被稱之為原型鏈。按照上述的描述，在B中定義的屬性或方法，可以在A中使用并不需要...

    baiy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<