來源：Loong Panda

 

一、不同環境下的this的指向：

1、this的指向是在函式執行時確定下來的，而不是建立的時候，誰呼叫就指向誰。
2、ES5中普通函式this指向window，ES6中普通函式this指向為undefined;
3、事件的this指向，為事件源本身
4、定時器的this指向，為window.
5、建構函式內部的this指向new出來的這個物件

注： 嚴格模式下，普通函式和全域性環境的this為undefined

1.1 普通函式和全域性環境下this

consolog.log(this) // window

function test() { console.log(111, this) // window } test()

注： 'use strict' 嚴格模式下

consolog.log(this) // undefined
function test() { console.log(111, this) // undefined } test()
 

1.2物件中的this

 let obj3 = { 
   say() { 
     console.log(6666, this) // obj3 
     return function () { 
       console.log(7777, this) // window 
     } 
   } 
 } 
 obj3.say()()

1.3建構函式內的this

function Person(e) { 
  this.name = e console.log(5555, this) 
} 
let a = new Person('李四1') // Person { name: '李四1'} 
let b = new Person('李四2') // Person { name: '李四2'}
 

1.4定時器下的this

let obj2 = { 
  name: '張三', 
  say: function () { 
    console.log(333, this) // obj2 
    setTimeout(function () { 
      console.log(444, this) // window 
    }, 1000)
  } 
} 
obj2.say()

1.5箭頭函式中的this

let obj3 = { 
  say() { 
    console.log(6666, this) // obj3 
    return () => { 
      console.log(7777, this) // obj3 
    } 
  } 
} 
obj3.say()()
 

二、改變this指向的方法：

1、箭頭函式 -----> 只適合現代瀏覽器；
2、bind() -----> 第一個是引數是指向誰，第二個以後的引數是自定義的引數，需要單獨呼叫才執行，如： bind(obj)()
3、call(xx, arg1, arg2) -----> 第一個是引數是指向誰，第二個以後的引數是自定義的引數
4、apply(xx, [arg1, arg2]) -----> 第一個是引數是指向誰，第二個的引數是自定義的引數，資料型別必須是陣列

例子

function test(arg1, arg2) { 
  console.log(111, `都${this.age}了，${arg1}${arg2}`) 
} 
let obj = { 
  age: 18 
} 

test('該閉眼睛了!', '不然就沒地方埋了') // 都undefined了，該上墳了! 
test.call(obj, '該嫁人了!', '不然以後你兒子坐公交車就只能和老奶奶聊天了') // 都18了，該嫁人了！不然以後你兒子坐公交車就只能和老奶奶聊天了 
test.apply(obj, ['該離婚了!', '不然其他光棍怎麼會有物件呢']) // 都18了，該離婚了!不然其他光棍怎麼會有物件呢
test.bind(obj, '該退休了!', '不然錢沒花完，人先走了')() // 都18了，該嫁人了！不然以後你兒子坐公交車就只能和老奶奶聊天了