es5中的this,es6中箭頭函數中的this

一.判斷this的綁定對象

1.對於構造函數,new一個新對象,this綁定到新建立的對象上

function Fun(){
    this.user ='fff';
}
var fun1 = new Fun();
console.log(fun1.user);//'fff'

2.由call或者apply調用,this綁定到指定的對象上

function Fun(){
    console.log(this.user);
}
var obj1 ={
    user:'obj1',
    fun:Fun
}
var obj2 ={
    user:'obj2',
    fun:Fun
}
obj1.fun.call(obj2);//obj2

3.函數是否在某個上下文環境中調用,若是是的話,this指向的是那個上下文環境

(1).若是一個函數中有this,並被上一級對象所調用,那麼他指向上級對象
    function Fun(){
        console.log(this.user);
    }
    var obj1 ={
        user:'obj1',
        fun:Fun
    }
    obj1.fun();//obj1
(2).若是函數中有多個對象,this仍是指向他的上一級對象
    function Fun(){
        console.log(this.user);
    }
    var obj1 ={
        user:'obj1',
        foo:{fun:Fun}
    }
    obj1.foo.fun();//undefined

4.若是以上都不是的話就使用的是默認綁定,在嚴格模式下,綁定到undefined,在非嚴格模式下,綁定到全局對象

5.當new一個對象時遇到return總結:若是return的是一個函數或者是對象,this指向的就是return出的函數或者對象;反之,this指向的是調用他的實例

eg1.
function Fun(user){
    this.user =user;
    return {};//或者是function(){}
}
var a = new Fun();
console.log(a);//{}
//這個時候的this是指向return出的空對象的

eg2.
function Fun(user){
    this.user =user;
    return 1;//或者是undefined
}
var a = new Fun();
console.log(a);//Fun {user: undefined}
//this指向新建立的對象

二.es6箭頭函數中的this

1.箭頭函數中this

(1)箭頭函數中的this指向詞法做用域,即外層調用者

不使用箭頭函數:
eg:
var a = {
  name: function() {
    console.log(this);
  }
}
a.name();//此時的this是指向對象a


使用箭頭函數:
var a = {
  name: () => {
    console.log(this);
  }
}
a.name();//此時的this指向全局window

(2).箭頭函數中call或者apply並不能修改this的指向

eg:
var a = {
  name: () => {
    console.log(this);
  }
}
a.name.call({ b: '11' });//此時this仍是指向window

(3).多層嵌套,箭頭函數中的this指向最最外層做用域
eg1:

var a = {
  b: {
    c: {
      d: () => {
        console.log(this);//此時的this是指向window的
      }
    }
  }
}

eg2:

(4).與異步函數的例子
eg1:

window.name = "window";
var a = () => {
  console.log('1', this.name, this); //輸出window,this指向window
  this.name = "yyy";
  console.log('2', this.name, this); //輸出yyy,this仍是指向window
  setTimeout(() => {
        console.log(this.name, this); //輸出yyy,說明this是指向window
  }, 1000)
}
a();
詳細說明:
a是一個普通函數, 當執行到 console.log('1', this.name, this);時, 在function中並無定義name屬性, 因而根據詞法做用域向他的上一級去找是否有name屬性, 在window中找到, 輸出window.name的值;接着把全局屬性name的值改成 'yyy';最後, 在一秒鐘後執行異步函數setTimeout輸出yyy, 此時因爲箭頭函數的做用, 異步函數中的this仍是指向window

eg2:

var b = {
  c: function() {
setTimeout(() => {
  console.log(this);//此時的this指向函數c
}, 1000);
  }
}
b.c();

輸出結果:

總結:箭頭函數中的this是在函數定義的時候就已經肯定,並非指向調用函數時的上下文

箭頭函數中, this指向的固定化，並非由於箭頭函數內部有綁定this的機制，實際緣由是箭頭函數根本沒有本身的this，致使內部的this就是外層代碼塊的this。正是由於它沒有this，因此也就不能用做構造函數。