JS中this的指向
【成都小課堂】
1.背景介紹
2.知識(shí)剖析
3.常見(jiàn)問(wèn)題
4.解決方案
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
8.更多討論
1.背景介紹
this是Javascript語(yǔ)言的一個(gè)關(guān)鍵字等太。它代表函數(shù)運(yùn)行時(shí)遮精，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象顷锰。
this是動(dòng)態(tài)綁定的岖是，它可以是全局對(duì)象炕横、當(dāng)前對(duì)象或者任意對(duì)象(這取決于函數(shù)的調(diào)用方式)蘑斧。這就導(dǎo)致了this具備了多重含義油够，可以使得javascript更靈活的使用。但是腮敌，帶來(lái)了靈活性的同時(shí)也會(huì)給我們初學(xué)者帶來(lái)不少困惑阱当。
2.知識(shí)剖析
全局環(huán)境中的this
function test() {
console.log(this);
}
test();
總結(jié)：在全局作用域中它的this執(zhí)行當(dāng)前的全局對(duì)象（瀏覽器端是Window俏扩，node中是global）
嚴(yán)格模式‘use strict’下的this
'use strict';
function test() {
console.log(this);
};
test();
// undefined
原因：this并不會(huì)指向全局，而是undefined弊添，這樣的做法是為了消除js中一些不嚴(yán)謹(jǐn)?shù)男袨椤?/p>
在javascritp中动猬，不一定只有對(duì)象方法的上下文中才有this， 全局函數(shù)調(diào)用和其他的幾種不同的上下文中也有this指代表箭。 它可以是全局對(duì)象赁咙、當(dāng)前對(duì)象或者任意對(duì)象，這完全取決于函數(shù)的調(diào)用方式免钻。JavaScript中函數(shù)的調(diào)用有以下幾種方式：作為對(duì)象方法調(diào)用彼水，作為函數(shù)調(diào)用，作為構(gòu)造函數(shù)調(diào)用极舔，和使用apply或call調(diào)用凤覆。
1.作為對(duì)象方法調(diào)用:this被自然綁定到該對(duì)象,也就是說(shuō)this就指這個(gè)上級(jí)對(duì)象
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
}
};
point.moveTo(1, 1)//this綁定到當(dāng)前對(duì)象，即point對(duì)象
2.作為函數(shù)調(diào)用:this被綁定到全局對(duì)象
function makeNoSense(x) {
this.x = x;
}
makeNoSense(5);
x;// x已經(jīng)成為一個(gè)值為5的全局變量
3.作為構(gòu)造函數(shù)調(diào)用:this綁定到新創(chuàng)建的對(duì)象上拆魏，也就是說(shuō)this就指這個(gè)新對(duì)象
function Point(x, y){
this.x = x;
this.y = y;
}
注：構(gòu)造函數(shù)不使用new調(diào)用盯桦，則和普通函數(shù)一樣。一般地渤刃，構(gòu)造函數(shù)首字母大寫(xiě)
4.使用apply或call調(diào)用：在JavaScript中函數(shù)也是對(duì)象拥峦，對(duì)象則有方法，apply和call就是函數(shù)對(duì)象的方法卖子。
function Point(x, y){
this.x = x;
this.y = y;
this.moveTo = function(x, y){
this.x = x;
this.y = y;
}
}
var p1 = new Point(0, 0);
var p2 = {x: 0, y: 0};
p1.moveTo(1, 1);
p1.moveTo.apply(p2, [10, 10]);
3略号、常見(jiàn)問(wèn)題
問(wèn)題一
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
setTimeout(this.foo, 1000);
}
}
obj.foo2();
現(xiàn)象：兩次打印的this不一樣
問(wèn)題二
'use strict';
function foo() {
console.log(this);
}
setTimeout(foo, 1);
// window
現(xiàn)象：加了嚴(yán)格模式，foo調(diào)用也沒(méi)有指定this洋闽，應(yīng)該是出來(lái)undefined玄柠，但是這里仍然出現(xiàn)了全局對(duì)象
4、解決方案
問(wèn)題一起因是因?yàn)?setTimeout() 將 this.foo 作為了自身的參數(shù)诫舅，這時(shí)候 this.foo 是作為一個(gè)fun參數(shù)去獲取全局的變量了羽利。
可以這么這么解決：利用閉包的特性來(lái)處理
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
var _this = this;
setTimeout(function() {
console.log(this); ?// Window
console.log(_this); ?// Object {name: "qiutc"}
}, 1000);
}
}
obj.foo2();
可以看到直接用this仍然是Window；因?yàn)閒oo2中的this是指向obj刊懈，我們可以先用一個(gè)變量_this來(lái)儲(chǔ)存这弧，然后在回調(diào)函數(shù)中使用_this，就可以指向當(dāng)前的這個(gè)對(duì)象了
問(wèn)題二
setTimeout方法在調(diào)用傳入函數(shù)的時(shí)候俏讹，如果這個(gè)函數(shù)沒(méi)有指定了的this当宴，那么它會(huì)做一個(gè)隱式的操作—-自動(dòng)地注入全局上下文，等同于調(diào)用foo.apply(window)而非foo()泽疆；
5、編碼實(shí)戰(zhàn)
對(duì)于內(nèi)部函數(shù)玲献，即聲明在另外一個(gè)函數(shù)體內(nèi)的函數(shù)殉疼，這種綁定到全局對(duì)象的方式會(huì)產(chǎn)生另外一個(gè)問(wèn)題梯浪。我們?nèi)匀灰郧懊嫣岬降膒oint對(duì)象為例，這次我們希望在moveTo方法內(nèi)定義兩個(gè)函數(shù)瓢娜，分別將x挂洛，y坐標(biāo)進(jìn)行平移。結(jié)果可能出乎大家意料眠砾，不僅point對(duì)象沒(méi)有移動(dòng)虏劲，反而多出兩個(gè)全局變量x，y
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
//內(nèi)部函數(shù)
var moveX = function(x) {
this.x = x;//this綁定到了哪里褒颈？
};
//內(nèi)部函數(shù)
var moveY = function(y) {
this.y = y;//this綁定到了哪里柒巫？
};
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>0
point.y; //==>0
x; //==>1
y; //==>1
這屬于JavaScript的設(shè)計(jì)缺陷，正確的設(shè)計(jì)方式是內(nèi)部函數(shù)的this應(yīng)該綁定到其外層函數(shù)對(duì)應(yīng)的對(duì)象上谷丸，為了規(guī)避這一設(shè)計(jì)缺陷堡掏，聰明的JavaScript程序員想出了變量替代的方法，約定俗成刨疼，該變量一般被命名為that泉唁。
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var that = this;
//內(nèi)部函數(shù)
var moveX = function(x) {
that.x = x;
};
//內(nèi)部函數(shù)
var moveY = function(y) {
that.y = y;
}
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1
6.擴(kuò)展思考
問(wèn)題：如何理解this？
當(dāng)一個(gè)函數(shù)被調(diào)用時(shí)揩慕，擁有它的object會(huì)作為this傳入亭畜。在全局下，就是window or global迎卤，其他時(shí)候就是相應(yīng)的object贱案。 也可以看到，call和apply就是利用這一點(diǎn)實(shí)現(xiàn)更改this值的
7.參考文獻(xiàn)
參考四：如何理解JavaScript中的this關(guān)鍵字止吐？
8宝踪、更多討論
this含義為何如此豐富？
理解this的指向有何意義碍扔？
小課堂視頻：
------------------------------------------------------------------------------------------------------------------------
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師瘩燥，現(xiàn)在開(kāi)始，找個(gè)師兄不同，帶你入門(mén)厉膀，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷枚眨”服鹅。
這里是技能樹(shù).IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線百新，學(xué)習(xí)透明化企软，成長(zhǎng)可見(jiàn)化，師兄1對(duì)1免費(fèi)指導(dǎo)饭望≌躺冢快來(lái)與我一起學(xué)習(xí)吧 形庭！
