JavaScript this關(guān)鍵字有一下幾種使用情況:
1.全局執(zhí)行
2.在函數(shù)中執(zhí)行
3.作為對(duì)象的方法調(diào)用
4.作為一個(gè)構(gòu)造函數(shù)調(diào)用
5.箭頭函數(shù)
6.apply涤久、call和bind
<p>#全局執(zhí)行#</p>
在瀏覽器中輸出Window對(duì)象
console.log(this);
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}
在node中輸出global
console.log(this);
// global
<p>#在函數(shù)中執(zhí)行#</p>
在普通函數(shù)中執(zhí)行,this指向Window
function foo () {
console.log(this)
}
foo();
// Window
在“嚴(yán)格模式”中 ('use strict'),this并不會(huì)指向Window,而是undefined,目的是消除javascropt中一些不嚴(yán)謹(jǐn)?shù)男袨?/p>
(function(){
'use strict';
console.log(this);
})();
<p>#作為對(duì)象的方法調(diào)用#</p>
一個(gè)函數(shù)作為一個(gè)對(duì)象的方法調(diào)用時(shí),this指向該對(duì)象
var obj = {
name: 'zane',
foo: function () {
console.log(this);
}
}
obj.foo();
// Object {name: "zane"}
但是如果把一個(gè)變量的方法重新賦值給一個(gè)變量砸脊,然后直接調(diào)用這個(gè)變量,this指向Window纬霞,因?yàn)榇藭r(shí)和obj已經(jīng)沒有關(guān)系了凌埂,和調(diào)用一個(gè)普通的函數(shù)一樣
var obj = {
name: 'zane',
foo: function () {
console.log(this);
}
}
var foo2 = obj.foo;
foo2();
// Window
<p>#作為構(gòu)造調(diào)用#</p>
通過new調(diào)用構(gòu)造函數(shù)時(shí),this指向構(gòu)造函數(shù)實(shí)例化出來的對(duì)象诗芜,當(dāng)通過普通方式調(diào)用構(gòu)造函數(shù)時(shí)(不通過new關(guān)鍵字)this指向Window瞳抓,和調(diào)用普通函數(shù)相同
function Person(name) {
this.name = name;
console.log(this);
}
Person.prototype.say = function () {
console.log('Person can say.');
}
var p1 = new Person('someone1');
// Person {name: "someone1"}
var p2 = Person();
// Window
<p>#箭頭函數(shù)#</p>
箭頭函數(shù)與普通函數(shù)的區(qū)別就是this的指向不能更改秒紧,this的指向在函數(shù)定義時(shí)已經(jīng)確定,其他的與普通函數(shù)相同
<p>#apply挨下、call、bind#</p>
他們可以更改函數(shù)中的 this 指向
<small>apply:它會(huì)立即執(zhí)行函數(shù)脐湾,第一個(gè)參數(shù)是指定執(zhí)行函數(shù)中 this 的上下文臭笆,第二個(gè)參數(shù)是一個(gè)數(shù)組,是傳給執(zhí)行函數(shù)的參數(shù)(與 call 的區(qū)別)</small>
<small>call:它會(huì)立即執(zhí)行函數(shù)秤掌,第一個(gè)參數(shù)是指定執(zhí)行函數(shù)中 this 的上下文愁铺,后面的參數(shù)是執(zhí)行函數(shù)需要傳入的參數(shù);</small>
<small>*bind:它不會(huì)執(zhí)行函數(shù)闻鉴,而是返回一個(gè)新的函數(shù)茵乱,這個(gè)新的函數(shù)被指定了 this 的上下文,后面的參數(shù)是執(zhí)行函數(shù)需要傳入的參數(shù)孟岛;</small>
var obj3 = {
name: 'someone3'
}
function foo3 (name) {
this.name = name;
console.log(this)
}
foo3.call(obj3, 'someone4'); // Object {name: "someone4"}
foo3.apply(obj3, ['someone4']); // Object {name: "someone4"}
var foo4 = foo3.bind(obj3);
var p4 = new foo4('someone4'); // foo3 {name: "someone4"}