資訊專欄INFORMATION COLUMN
摘要：再看和是一個(gè)對(duì)象的屬性，這個(gè)屬性存在在此對(duì)象的中指向此對(duì)象的構(gòu)造函數(shù)。在中指向構(gòu)造函數(shù)例子此種方式定義的是隱藏的默認(rèn)指向例子為什么是這種定義是把重寫了覆蓋了默認(rèn)的。
this定義
this是對(duì)象
this依賴函數(shù)執(zhí)行的上下文
this存在于函數(shù)中（函數(shù)調(diào)用的時(shí)候被隱式傳入）
直接看例子：
alert(this); //在全局環(huán)境調(diào)用this, this指向window, 輸出[Object window]
function Person(){
alert(this);
}
方式一:
Person(); // 全局環(huán)境用Person函數(shù), this指向window, 輸出[Object window]
方式二:
var obj = new Person(); //把Person當(dāng)做構(gòu)造函數(shù), 實(shí)例化一個(gè)對(duì)象
//此時(shí)this指向了obj, 不再指向window, 輸出[Object object]
function Person(){
alert(this.name); //此時(shí)無(wú)法判斷this的身份
}
Person(); //this在全局環(huán)境中被調(diào)用, this.name == window.name, 輸出了窗口的名字
var obj = new Person(); //this在obj環(huán)境下被調(diào)用, this.name == obj.name, 由于name沒(méi)被賦值, 所以輸出undefined
由此可以看出, 我們?cè)陂喿x代碼或者寫代碼時(shí)，看到某個(gè)函數(shù)中定義的this時(shí), 還無(wú)法去判斷那個(gè)this身份，必須找到它依賴執(zhí)行的環(huán)境(對(duì)象)。
再回頭看看this的定義，大家就清楚自然了。
再看constructor和prototype
constructor是一個(gè)對(duì)象的屬性，這個(gè)屬性存在在此對(duì)象的prototype中, 指向此對(duì)象的構(gòu)造函數(shù)。分析這句話
constructor是一個(gè)對(duì)象屬性。
constructor在prototype中
constructor指向構(gòu)造函數(shù)
例子1：
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.getName = function(){
alert(this.name);
}
Person.prototype.getAge = function(){
alert(this.age);
}
var obj = new Person();
alert(obj.constructor == Person);// true
此種方式定義的prototype, constructor是隱藏的, 默認(rèn)指向Person
例子2：
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype = {
getName: function(){
alert(this.name);
},
getAge: function(){
alert(this.age);
}
}
var obj = new Person();
alert(obj.constructor == Person);// false
為什么是false? 這種定義prototype, 是把prototype重寫了, 覆蓋了默認(rèn)的constructor。
換句話說(shuō), 其實(shí)這種方式就是給屬性重新賦值了, 所以導(dǎo)致默認(rèn)的constructor被覆蓋。
此時(shí)的obj.constructor將指向的是Object。
改寫一下上面的：
Person.prototype = {
constructor: Person, //強(qiáng)制指向Person
getName: function(){
alert(this.name);
},
getAge: function(){
alert(this.age);
}
}
此時(shí)constructor就指向Person了。
prototype是一個(gè)函數(shù)屬性, 此屬性同時(shí)也是一個(gè)對(duì)象, 保存著對(duì)象實(shí)例所共有的屬性和方法。
分析這句話:
1.prototype是函數(shù)屬性, 只要是函數(shù), 就有prototype屬性. 而不管是構(gòu)造函數(shù)還是普通函數(shù).
2.prototype同時(shí)也是對(duì)象.
2.prototype放的是公共的東西, 包括屬性和方法.
例子1.
function Person(name, age){
this.name = name;
this.age = age;
}
//是函數(shù)就有prototype屬性, 這個(gè)屬性也是一個(gè)對(duì)象
Person.prototype = {
getName: function(){ //所有對(duì)象實(shí)例都共享
return this.name;
},
getAge: function(){//所有對(duì)象實(shí)例都共享
return this.age;
}
}
var obj = new Person("tom", 23);
obj.getName(); //"tom"
var obj2 = new Person("jack", 23);
obj2.getName(); //"jack"
obj.getName == obj2.getName; //true, 所有實(shí)例共享
Person.prototype.getName(); //當(dāng)做普通函數(shù)屬性, 根據(jù)this定義, 此時(shí)this指向的是Person.prototype, 所以返回undefined
以上就是this, constructor, prototype的定義和他們之間的關(guān)系. 可能還有些粗糙, 歡迎大家補(bǔ)充.
綜合例子:
var Tinker = function(){
this.elements = [];
};
Tinker.fn = Tinker.prototype = {
constructor: Tinker,
extend: function(obj){
var p;
for(p in obj){
this.constructor.prototype[p] = obj[p];//此處若看明白了, 那么前面的就理解了
}
}
}
Tinker.fn.extend({
get: function(){
var length = arguments.length,
i = 0;
for(; i < length; i++){
this.elements.push(document.getElementById(arguments[i])); //此處若看明白了, 那么前面的就理解了
}
return this;//此處若看明白了, 那么前面的就理解了
},
each: function(fn){
var i = 0,
length = this.elements.length;
for(; i < length; i++){
fn.call(this.elements[i], i, this.elements[i]);
}
return this;//此處若看明白了, 那么前面的就理解了
}
});
這個(gè)例子其實(shí)很簡(jiǎn)單, 就是向一個(gè)對(duì)象原型添加方法.一個(gè)方法是get, 用于查找頁(yè)面id. 一個(gè)是each, 用于對(duì)找到的id元素執(zhí)行一個(gè)方法
//假設(shè)有id = "data", id = "message"
var obj = new Tinker();
obj.get("data", "message").each(function(i, item){
this.style.cssText = "height:20px; background:#ff0000";
})
轉(zhuǎn)自http://www.cnblogs.com/tinkbe...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82049.html
摘要：用對(duì)象字面量形式創(chuàng)建的對(duì)象，直接賦值給函數(shù)的原型對(duì)象，本質(zhì)上完全重寫了其對(duì)象，因此屬性也就變成了新對(duì)象的屬性指向構(gòu)造函數(shù)，不再指向函數(shù)。 【上一篇】：JavaScript對(duì)象內(nèi)部屬性及其特性總結(jié) showImg(https://segmentfault.com/img/bVbjYsc?w=839&h=489); 工廠模式(★★) 先在內(nèi)部顯示地創(chuàng)建一個(gè)臨時(shí)對(duì)象，根據(jù)接收的參數(shù)來(lái)構(gòu)建（賦...
摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱為構(gòu)造函數(shù)繼承，在中是一種關(guān)鍵的實(shí)現(xiàn)的繼承方法，相信你已經(jīng)很好的掌握了。 你應(yīng)該知道，JavaScript是一門基于原型鏈的語(yǔ)言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關(guān)。甚至可以說(shuō)，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。 一、構(gòu)造函數(shù)，原型屬性與實(shí)例對(duì)象 要搞清楚如何在JavaScript中實(shí)現(xiàn)繼承，...
摘要：運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例。新建對(duì)象鏈接對(duì)象設(shè)置指向原來(lái)指向執(zhí)行一次構(gòu)造函數(shù)返回對(duì)象當(dāng)代碼執(zhí)行時(shí)，會(huì)發(fā)生以下事情一個(gè)繼承自的新對(duì)象被創(chuàng)建。使用指定的參數(shù)調(diào)用構(gòu)造函數(shù)，并將綁定到新創(chuàng)建的對(duì)象。 new 運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象的實(shí)例。new 關(guān)鍵字會(huì)進(jìn)行如下的操作： 1.創(chuàng)建一個(gè)空的簡(jiǎn)單JavaScript對(duì)...
摘要：面向?qū)ο笾杏腥筇卣?，封裝，繼承，多態(tài)。這不僅無(wú)法做到數(shù)據(jù)共享，也是極大的資源浪費(fèi)，那么引入對(duì)象實(shí)例對(duì)象的屬性指向其構(gòu)造函數(shù)，這樣看起來(lái)實(shí)例對(duì)象好像繼承了對(duì)象一樣。實(shí)例對(duì)象的原型指向其構(gòu)造函數(shù)的對(duì)象構(gòu)造器的指向。 前言 為什么說(shuō)是再談呢，網(wǎng)上講解這個(gè)的博客的很多，我開(kāi)始學(xué)習(xí)也是看過(guò)，敲過(guò)就沒(méi)了，自以為理解了就結(jié)束了，書到用時(shí)方恨少啊。實(shí)際開(kāi)發(fā)中一用就打磕巴，于是在重新學(xué)習(xí)了之后分享出來(lái)...
摘要：一相當(dāng)于拿實(shí)例對(duì)象的名字來(lái)給原型命名。不專業(yè)點(diǎn)說(shuō)的實(shí)例函數(shù)為匿名函數(shù)，而中，構(gòu)造函數(shù)即原型鏈展示的原型為匿名函數(shù)。關(guān)系圖不通過(guò)創(chuàng)造，不通過(guò)各種情況擾亂的情況下分析為原型屬性，展示構(gòu)造函數(shù)，比如上面舉例的某同學(xué)的媽媽構(gòu)造函數(shù)。 這篇文章只是我個(gè)人的見(jiàn)解，因?yàn)橐彩墙衲陝偖厴I(yè)，所以理解不一定非常的準(zhǔn)確，如果理解有誤希望大家告訴我。 一、class 相當(dāng)于 拿實(shí)例對(duì)象的名字 來(lái)給 原型 命名。...
閱讀 1465·2021-09-10 11:27
閱讀 2414·2019-08-30 15:53
閱讀 1333·2019-08-30 13:10
閱讀 2981·2019-08-30 11:09
閱讀 1092·2019-08-29 17:23
閱讀 672·2019-08-29 17:05
閱讀 2951·2019-08-29 15:10
閱讀 2349·2019-08-29 13:22
