首先罪裹，明確幾個基本概念
- 嚴(yán)格模式和非嚴(yán)格模式，即是否添加'use strict'; this的行為結(jié)果不同，本文只討論嚴(yán)格模式
let f=function(){
console.log(this);
}
f();
#嚴(yán)格模式下this為undefined文黎，非嚴(yán)格模式為global對象
- 全局this在瀏覽器中指向window對象，在node中指向空對象殿较，可以用如下代碼測試
'use strict';
console.log(this);
- this一般存在于函數(shù)內(nèi)部
- this為函數(shù)調(diào)用時所在對象的引用
let f=function () {
console.log(this);
};
let o={
name:'frank',
f:f
};
o.f();
#result
{ name: 'frank', f: [Function: f] }
- this指向的對象可以通過apply或call變更
let f=function (a,b) {
console.log(this);
};
let o={
name:'frank'
};
f.apply(o,[1,2]);
f.call(o,1,2);
#result
{ name: 'frank' }
{ name: 'frank' }
- Function.prototype.bind接收一個對象耸峭，并返回一個調(diào)用函數(shù)的拷貝，新函數(shù)的this指向該對象淋纲，在React中處理事件回調(diào)需要將bind綁定為組件對象劳闹，這樣才可以調(diào)用this.setState方法
let f=function (a,b) {
console.log(this);
};
let o={
name:'frank'
};
let f1=f.bind(o);
f1();
#result
{ name: 'frank' }
- ES6箭頭函數(shù)會自動傳遞this，而不改變this原來指向的對象洽瞬，將4中的函數(shù)改為箭頭函數(shù)本涕，在React中也可以用箭頭函數(shù)來避免使用bind
let f=()=>{
console.log(this);
};
let o={
name:'frank',
f:f
};
o.f();
#result，在node中運行伙窃，this默認(rèn)指向{}
{}
#多層傳遞
let f=()=>{
console.log(this);
return ()=>{
console.log(this);
};
};
let o={
name:'frank',
f:f
};
o.f()();
#result
{}
{}
#改變默認(rèn)this指向?qū)ο笃杏保⑾蛳聜鬟f
let f=function(){
console.log(this);
return ()=>{
console.log(this);
};
};
let o={
name:'frank',
f:f
};
o.f()();
#result
{ name: 'frank', f: [Function: f] }
{ name: 'frank', f: [Function: f] }
