詳解js中的this指向

this指向問題是個老生常談的問題了，現在我給大家一個例子

var obj={
  bar:'Cynthia' ,
   foo:function(){
    console.log(this.bar,"wahahah")
    }
}

var foo=obj.foo;
foo(); // 0 "wahahah" 
obj.foo(); //  Cynthia wahahah

雖然obj.foo和foo指向同一個函數,但是執行結果卻不一樣。

造成這種差異的原因,就在於函數體內部使用了this關鍵字。很多教材里面會告訴你，this指向的是其運行時所在的環境。但是光看這句話是不是有點懵

下面我把this的指向都列給大家

瀏覽器

非嚴格模式下

function add(x,y){
    console.log(this); // window
    return x+y;
}
add(1,40);

在非嚴格模式下的時候，this的運行環境所在的環境是windows，所以返回的是window

嚴格模式下

function add(x,y){
    'use strict'
    console.log(this); // undefined
    return x+y;
}
add(1,40);

JavaScript高級程序設計中有這樣一句話：在嚴格模式下，未指定環境對象而調用函數，則this值不會轉為window。除非明確把函數添加到某個對象或者調用appy()或call(),否則this值將是undefined

看是否綁定了new

如果綁定了new的話，並且構造函數沒有返回function或object，那么this指向這個新對象

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sayHi=function(){
    console.log(this.age)
}
}
let person=new Person("那抓",6);
person.sayHi();// 6

構造函數返回值是function或者object，返回的是構造函數返回的對象

function Super(age){
    this.age=age;
    let obj={a:'2'};
    return obj;
}
let instance=new Super(30);
console.log(instance);// {a:2}
console.log(instance.age);// undefined

箭頭函數

箭頭函數沒有自己的this，繼承外層上下文綁定的this

let obj={
    age:20,
    info:function(){
    return ()=>{
        console.log(this,this.age); // this繼承的是外層上下文綁定的this
        }
    }
}
let person={age:30};
let info=obj.info();
info(); // 指向的是obj
let info2=obj.info.call(person);
info2();

node環境中

node環境中無論是否在嚴格模式下，在全局執行環境中（在任何函數體外部）this都指向空對象{}