本文實(shí)例講述了JavaScript中的this基本問(wèn)題.分享給大家供大家參考,具體如下:
目前成都創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、盂縣網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
在函數(shù)中 this 到底取何值,是在函數(shù)真正被調(diào)用執(zhí)行的時(shí)候確定下來(lái)的,函數(shù)定義的時(shí)候確定不了。
執(zhí)行上下文環(huán)境 :
**定義**:執(zhí)行函數(shù)的時(shí)候,會(huì)產(chǎn)生一個(gè)上下文的對(duì)象,里面保存變量,函數(shù)聲明和this。
**作用**:用來(lái)保存本次運(yùn)行時(shí)所需要的數(shù)據(jù)
當(dāng)你在代碼中使用了 this,這個(gè) this 的值就直接從執(zhí)行的上下文中獲取了,而不會(huì)從作用域鏈中搜尋。
關(guān)于 this 的取值,大體上可以分為以下幾種情況:
情況一:全局 & 調(diào)用普通函數(shù)
在全局環(huán)境中,this 永遠(yuǎn)指向 window。
console.log(this === window); //true
普通函數(shù)在調(diào)用時(shí)候(注意不是構(gòu)造函數(shù),前面不加 new),其中的 this 也是指向 window。
但是如果在嚴(yán)格模式下調(diào)用的話會(huì)報(bào)錯(cuò):
var x = 1; function first(){ console.log(this); // undefined console.log(this.x); // Uncaught TypeError: Cannot read property 'x' of undefined } first();
情況二:構(gòu)造函數(shù)
所謂的構(gòu)造函數(shù)就是由一個(gè)函數(shù) new 出來(lái)的對(duì)象,一般構(gòu)造函數(shù)的函數(shù)名首字母大寫,例如像 Object,F(xiàn)unction,Array 這些都屬于構(gòu)造函數(shù)。
function First(){ this.x = 1; console.log(this); //First {x:1} } var first = new First(); console.log(first.x); //1
上述代碼,如果函數(shù)作為構(gòu)造函數(shù)使用,那么其中的 this 就代表它即將 new 出來(lái)的對(duì)象。
但是如果直接調(diào)用 First函數(shù),而不是 new First(),那就變成情況1,這時(shí)候 First() 就變成普通函數(shù)。
function First(){ this.x =1; console.log(this); //Window } var first = First(); console.log(first.x); //undefined
情況三:對(duì)象方法
如果函數(shù)作為對(duì)象的方法時(shí),方法中的 this 指向該對(duì)象。
var obj = { x: 1, first: function () { console.log(this); //Object console.log(this.x); //1 } }; obj.first();
注意:若是在對(duì)象方法中定義函數(shù),那么情況就不同了。
var obj = { x: 1, first: function () { function second(){ console.log(this); //Window console.log(this.x); //undefined } second(); } } obj.first();
可以這么理解:函數(shù) second雖然是在 obj.first 內(nèi)部定義的,但它仍然屬于一個(gè)普通函數(shù),this 仍指向 window。
在這里,如果想要調(diào)用上層作用域中的變量 obj.x,可以使用 self 緩存外部 this 變量。
var obj = { x:1, first: function () { var self = this; function second(){ console.log(self); //{x: 1} console.log(self.x); //1 } second(); } } obj.first();
如果 first 函數(shù)不作為對(duì)象方法被調(diào)用:
var obj = { x: 1, first: function () { console.log(this); //Window console.log(this.x); //undefined } }; var fn = obj.first; fn();
obj.first 被賦值給一個(gè)全局變量,并沒有作為 obj 的一個(gè)屬性被調(diào)用,那么此時(shí) this 的值是 window。
情況四:構(gòu)造函數(shù) prototype 屬性
function First(){ this.x = 1; } First.prototype.getX = function () { console.log(this); //First {x: 1, getX: function} console.log(this.x); //1 } var first= new First(); first.getX();
在 First.prototype.getX 函數(shù)中,this 指向的first 對(duì)象。不僅僅如此,即便是在整個(gè)原型鏈中,this 代表的也是當(dāng)前對(duì)象的值。
情況五:函數(shù)用 call
var obj = { x:1 } function first(){ console.log(this); //{x: 1} console.log(this.x); //1 } first.call(obj);
當(dāng)一個(gè)函數(shù)被 call調(diào)用時(shí),this 的值就取傳入的對(duì)象的值。
來(lái)源:知乎
鏈接:https://zhuanlan.zhihu.com/p/25294187?utm_source=com.youdao.note&utm_medium=social
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具:http://tools.jb51.net/code/WebCodeRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
本文題目:JavaScript中的this基本問(wèn)題實(shí)例小結(jié)
路徑分享:http://jinyejixie.com/article32/pgchpc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)