this綁定原則

1.默認綁定

默認綁定是函數(shù)針對的獨立調(diào)用的時候，不帶任何修飾的函數(shù)引用進行調(diào)用，非嚴格模式下 this 指向全局對象(瀏覽器下指向 Window，Node.js 環(huán)境是 Global ），嚴格模式下，this 綁定到 undefined ,嚴格模式不允許this指向全局對象。

var name = 'hello'
var obj = {
    name : 'test',
    foo: function() {
        console.log(this.name )
    }
}
var bar = obj.foo
bar()   // hello

在函數(shù)中以函數(shù)作為參數(shù)傳遞，例如setTimeOut和setInterval等，這些函數(shù)中傳遞的函數(shù)中的this指向，在非嚴格模式指向的是全局對象。
注意為箭頭函數(shù)時指向外層對象調(diào)用作用域

var name = 'window';
var person = {
    name: 'person',
    sayHi: sayHi,
    sayHi2:function(){
       setTimeout(()=>{
         console.log(this.name);
       })
    }
}
function sayHi(){
    setTimeout(function(){
        console.log(this.name);
    })
}
person.sayHi();  //window
person.sayHi2();  //person

隱式綁定

判斷 this 隱式綁定的基本標(biāo)準(zhǔn):函數(shù)調(diào)用的時候是否在上下文中調(diào)用，或者說是否某個對象調(diào)用函數(shù)。

var name = 'hello'
var obj = {
    name : 'test',
    foo: function() {
        console.log(this.name )
    }
}
obj.foo()  //hello

當(dāng)有多層對象嵌套調(diào)用某個函數(shù)的時候，如 對象1.對象2.函數(shù),this 指向的是最后一層對象(對象2)。

顯式綁定

call apply
bind bind 方法 會創(chuàng)建一個新函數(shù)。當(dāng)這個新函數(shù)被調(diào)用時，bind() 的第一個參數(shù)將作為它運行時的 this，之后的一序列參數(shù)將會在傳遞的實參前傳入作為它的參數(shù)。

new 綁定

function Person(name){
   this.name = name;
   this.test=function(){
       console.log(this.name)
   }
}
var person= new Person('test');
console.log('Hello,', person.name);  //test
console.log(person.test())  //test

this優(yōu)先級

new綁定 > 顯式綁定 > 隱式綁定 > 默認綁定

箭頭函數(shù)中的this

箭頭函數(shù)中this直接指向的是調(diào)用函數(shù)的上一層運行時
this指向的是當(dāng)前函數(shù)的詞法作用域

箭頭函數(shù)表達式的語法比函數(shù)表達式更短，并且不綁定自己的this，arguments，super或 new.target。這些函數(shù)表達式最適合用于非方法函數(shù)(non-method functions)，并且它們不能用作構(gòu)造函數(shù)。
箭頭函數(shù)中沒有 arguments
沒有構(gòu)造函數(shù)
沒有原型 prototype 是
箭頭函數(shù)中沒有自己的this

var a = 'test'
let obj = {
    a: '程序員成長指北',
    foo: () => {
        console.log(this.a)
    },
    test:function (){
       this.foo()
    } 
}
obj.foo()   //test
obj.test()  //test

call、apply、bind無法改變箭頭函數(shù)this指向

var test=()=>{console.log(this)}
var obj={a:'a'};
test.call(obj)// window

this面試題

var length = 10;
function fn() {
    console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn) {
    fn();  //調(diào)用的時候沒有任何修飾符
    arguments[0]();  //arguments修飾符
  }
};
obj.method(fn, 1); // 10  2

var a=10;   
function test(){  
   a=5;      
   console.log(a);   
   console.log(this.a);    
   var a;      
   console.log(this.a);   
   console.log(a);   
 }

test()  //5  10  10 5  this指向window
new test()  //5,undefined,undefined,5    this指向test

來源