亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

js中的constructor 和prototype深入分析

系統 1690 0

在javascript的使用過程中,constructor 和prototype這兩個概念是相當重要的,深入的理解這兩個概念對理解js的一些核心概念非常的重要。

我們在定義函數的時候,函數定義的時候函數本身就會默認有一個prototype的屬性,而我們如果用new 運算符來生成一個對象的時候就沒有prototype屬性。我們來看一個例子,來說明這個

function a(c){
this .b = c;
this .d = function (){
alert( this .b);
}
}
var obj = new a('test');
alert( typeof obj.prototype); // undefine
alert( typeof a.prototype); // object

上面的例子可以看出函數的prototype 屬性又指向了一個對象,這個對象就是prototype對象,請看下圖

js中的constructor 和prototype深入分析

a.prototype 包含了2個屬性,一個是constructor ,另外一個是__proto__

這個constructor 就是我們的構造函數a,這個也很容易理解。

那么__proto__ 是什么呢?

這個就涉及到了原型鏈的概念:

  每個對象都會在其內部初始化一個屬性,就是__proto__,當我們訪問一個對象的屬性 時,如果這個對象內部不存在這個屬性,那么他就會去__proto__里找這個屬性,這個__proto__又會有自己的__proto__,于是就這樣 一直找下去。

請看mozzlia 對它對它的描述

When an object is created, its? __proto__ ?property is set to constructing function's? prototype ?property. For example? var fred = new Employee(); ?will cause? fred.__proto__ = Employee.prototype; .

This is used at runtime to look up properties which are not declared in the object directly. E.g. when? fred.doSomething() ?is executed and? fred ?does not contain a doSomething ,? fred.__proto__ ?is checked, which points to? Employee.prototype , which contains a? doSomething , i.e.? fred.__proto__.doSomething() ?is invoked.

Note that? __proto__ ?is a property of the instances, whereas? prototype ?is a property of their constructor functions.

不管你信不信,我們來看圖

js中的constructor 和prototype深入分析 在后面如果加上 alert(obj.__proto__ === a.prototype) //true

同理,在這里我們來分析出new 運算符做了那些事情

  1. var obj={}; 也就是說,初始化一個對象obj。
  2. obj.__proto__=a.prototype;
  3. a.call(obj);也就是說構造obj,也可以稱之為初始化obj。

我們將這個例子改造一些,變得復雜一點。

function a(c){
this .b = c;
this .d = function (){
alert( this .b);
}
}
a.prototype.test = function (){
alert(11111);
}
var obj = function (){}
obj.prototype = new a('test');
obj.prototype.test1 = function (){
alert(22222);
}
var t = new obj('test');
t.test(); // alert('test');

我們來分析下這個過程

由 var t =? new ?obj('test'); 我們可以得到 t.__proto__ = obj.prototype,但是上面指定obj.prototype =new a('test'); 可以這樣來看下

obj.prototype = p, p = new a('test'); p.__proto__ = a.prototype;

那么obj.prototype.__proto__ = a.prototype,由 t.__proto__ = obj.prototype 可以得出 t.__proto__.__proto__ = a.prototype,

所以對象t先去找本身是的prototype 是否有test函數,發現沒有,結果再往上級找,即 t.__proto__ ,亦即obj.prototype 尋找test函數 ,但是obj.prototype 也沒有這個函數,然后再往上找。即

t.__proto__.__proto__ 找,由于t.__proto__.__proto__ = a.prototype 在 a.prototype 中找到了這個方法,輸出了alert('test')

從這里可以分析得出一個結論, js中原形鏈的本質在于 __proto__

再看看一個列子

function a(c){
this .b = c;
this .d = function (){
alert( this .b);
}
}
var obj = new a('test');
alert(obj.constructor); // function a(){}
alert(a.prototype.constructor); // function a(){}

根據上面講到的__proto__ 我們來分析下,首先obj是沒有constructor 這個屬性的,但是 obj.__proto__ = a.prototype;就從

a.prototype中尋找,而 a.prototype.constructor 是就a,所有兩者的結果是一一樣的.

js中的constructor 和prototype深入分析


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦?。?!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 深夜在线免费 | 久草在线中文 | 色偷偷青青草原在线视频 | 国产精品9999久久久久仙踪林 | 99热成人精品国产免男男 | 中国国产一级毛片 | 国产精品久久久久久久免费大片 | 四虎影视入口 | xxxxxx日本人免费 | 久久久精品2018免费观看 | 欧美日韩综合高清一区二区 | 国产精品剧情原创麻豆国产 | 伊人精品 | 久久高清一区二区三区 | 久久精品国产99国产精品澳门 | 国产成人性毛片 | 亚洲人成依人成综合网 | 欧美操操操| 亚洲性图第一页 | 国产精品福利午夜h视频 | 欧美天天综合 | 99久久99热久久 | 日韩精品一区二区三区乱码 | 色综合天天综合网国产国产人 | 97超视频在线观看 | 一级毛片人与动免费观看 | 亚洲精品欧美精品国产精品 | 岛国毛片一级一级特级毛片 | 99国产精品高清一区二区二区 | 日本在线观看中文字幕 | 亚洲综合色网站 | 国产成人教育视频在线观看 | 国产精品美女久久久久久 | 国产精品夜夜春夜夜爽久久 | 欧美一级a俄罗斯毛片 | 国产成人短视频 | 久久大香香蕉国产免费网站 | 欧美成人午夜在线全部免费 | 欧美日韩国产58香蕉在线视频 | 色综合久久久久久久久久久 | 婷婷色香五月激情综合2020 |