javascripts的this

前言

javascript 的 this 指向主要是依賴上下文對象決定，箭頭函數例外。

預設綁定

在全局作用域下調用函數，函數的this預設指向window。

註意1：嚴格模式下，預設指向undefined

function test() {
  console.log(this.a);
}

var a = 1;
test(); // 1

// 嚴格模式
function test() {
  'use strict';
  console.log(this.a);
}

var a = 1;
test(); // TypeEror 報錯

註意2：全局作用域下 var聲明的變數會預設綁定到window，而let、const聲明的變數不會

let a = 1;
var b = 1;

window.a // undefined
window.b // 1

隱式綁定

當函數引用有上下文對象時，this隱式綁定到這個上下文對象中。

function test() {
  console.log(this.a);
}

var obj = {
  a: 1,
  test: test
}

var a = 2;

obj.test(); // 1

隱式丟失

function test() {
  console.log(this.a);
}

var obj = {
  a: 1,
  test: test
}

var a = 2;

// 隱式丟失，this 應用預設綁定規則
var bar = obj.test; 
bar() // 2

顯式綁定

call、apply、bind等顯式改變this指向。

註意：非嚴格模式下，call、apply、bind等傳入null、undefined會預設轉為window

function test() {
  console.log(this.a);
}

var obj = {
  a: 1
}

var a = 2;

test(); // 2
test.call(obj); // 1
test.apply(obj); // 1

var bTest = test.bind(obj);
bTest(); // 1

註意2：多次使用bind，this只會指向第一次bind的this

function test() {
  console.log(this.a);
}

var obj1 = { a: 1 }
var obj2 = { a: 2 }
var obj3 = { a: 3 }

var bind1 = test.bind(obj1);
bind1(); // 1

var bind2 = bind1.bind(obj2);
bind2(); // 1

var bind3 = bind2.bind(obj3);
bind3(); // 1

內置函數改變this指向

function test() {
  console.log(this.a);
}

var obj = {
  a: 1
}

var arr = [1, 2, 3];
arr.forEach(test, obj); // 列印 3 個 1

new 綁定

使用new操作符會產生如下步驟：

1. 創建一個新的空對象。
2. 將新對象與構造函數的prototype相連。
3. 新對象綁定帶構造函數的this。
4. 如果構造函數有返回值，且返回值是對象，則返回構造函數的返回值，否則返回新建的對象。

function create() {
  let obj = new Object();
  
  let constructor = [].shift.call(arguments);
  
  // obj.__proto__ = constructor.prototype;
  Object.setPrototypeOf(obj, constructor.prototype);
  
  // 改變 this
  let res = constructor.apply(obj, arguments);
  
  const isObj = Object.prototype.toString.call(res) === '[object Object]';
  return isObj ? result : obj;
}

箭頭函數

箭頭函數比較特殊，它有以下幾個特點：

1. 沒有自身的this，在定義時預設綁定父級作用域的this，即採用詞法作用域綁定this.

2. 沒有原型 prototype，無法使用 new 操作符，即不能作為構造函數.

3. 無法使用call、apply、bind等顯式改變其this.

   const test = () => console.log(this);
   let obj = {};
   
   test(); // window
   test.call(obj); // window
   
   const foo = test.bind(obj);
   foo(); // window