全面解析JavaScript中this指向

夏日不想說話發表於2020-04-05
JavaScript

this指向

參考文章：

JavaScript中this指向分為以下幾種情況：

  • 普通函式或作為物件屬性
  • 事件繫結
  • 建構函式
  • 箭頭函式
  • call/apply/bind指定

下面我們來進行一一介紹

普通函式或作為物件屬性

this取決於方法執行前面是否有“點”，有“點”的話，“點”前面是誰this就是誰，如果沒有點的話，this指向window

const fn = function () {
  console.log(this);
};

const obj = { name: 'OBJ', fn };

fn();

obj.fn();

const fn1 = obj.fn;
fn1();
複製程式碼
answer 
1. window
2. {name: 'OBJ', fn: function() {console.log(this)}} // obj
3. window
複製程式碼

可以看到函式作為物件的屬性被呼叫的時候，其this指向呼叫該函式的物件，否則其this指向window

事件繫結

在進行事件繫結的時候，事件繫結函式中的this是繫結事件的元素：

// 假設頁面中有id為button的button元素
// var x = 100;
window.x = 100;
const fn = function () {
  console.log(this.x);
};
const obj = { x: 200, fn };
const $button = document.getElementById('button');
$button.x = 300;

obj.fn();
const fn1 = obj.fn;
fn1();

$button.addEventListener('click', fn);
$button.addEventListener('mouseenter', obj.fn);

$button.addEventListener('mouseleave', function () {obj.fn();});
複製程式碼
answer 
1. 200
2. 100
3. 點選button時：300
4. 滑鼠移入button時：300
5. 滑鼠移出時：200
複製程式碼

但是需要注意的是，這裡我們是在使用者點選時，瀏覽器幫我們將點選事件的this指向繫結該事件的DOM元素。如果通過程式碼來觸發對應的事件的話，我們可以通過call/apply/bind來指定其this

$button.click.call() // this為window,列印結果為100
複製程式碼

建構函式(new Fn)

建構函式(new Fn)執行，函式中的this是當前類的例項，這是new關鍵字幫我們做到的:

var x = 100;
const Fn = function () {
  this.x = 200;
  console.log(this.x);
};

const fn = new Fn();
複製程式碼
answer 
1. 200
複製程式碼

箭頭函式

箭頭函式中沒有自身的this，所用到的this都是其最近父級上下文中的this

const fn = function () {
  console.log(this);
  setTimeout(() => {
    console.log(this);
  }, 1000);
  setTimeout(function () {
    console.log(this);
  });
};

const obj = { x: 100, fn };

obj.fn();
複製程式碼
answer 
1. {x:100, fn: function() {...}} // obj
2. window
3. {x:100, fn: function() {...}} // obj
複製程式碼

call/apply/bind改變this指向

為call/apply/bind傳入的第一個引數即為函式的this：

var x = 100;
const obj = { x: 200, y: 200 };
const fn = function () {
  console.log(this.x);
};

fn();
fn.call(obj);
fn.apply(obj);

const fixedThisFn = fn.bind(obj);
fixedThisFn();
複製程式碼
answer 
1. 100
2. 200
3. 200
4. 200
複製程式碼
  • call在執行時，第一個引數為this指向，之後的引數為fn執行時的引數
  • apply在執行時，第一個引數為this指向，之後的引數為fn執行時的引數組成的陣列，陣列的每一項會和fn的每一個引數進行對應
  • bind在執行時，第一個引數為預先傳入this指向，之後的引數為實際呼叫fn前預先傳入的引數，返回值為一個函式fixedThisFn，fixedThisFn內部會呼叫fn並指定其this指向

為了更深入的理解call/apply/bind是如何改變函式中this指向的，下面我們分別模擬實現這三個函式

call/apply/bind原始碼實現

根據前面的介紹，我們知道：當函式作為物件屬性被呼叫時，this指向呼叫該函式的物件

const obj = { x: 100, fn () {console.log(this);} };
obj.fn(); // {x: 100, fn: function() {...}} => obj
複製程式碼

利用JavaScript這個特性，我們可以將執行的函式作為call/apply的第一個引數context的屬性，然後通過context來呼叫該屬性對應的函式，函式的this便指向了context

call的原始碼模擬如下：

Function.prototype.myOwnCall = function (context, ...args) {
  const uniqueKey = new Date().getTime();
  // this為呼叫call方法的函式
  context[uniqueKey] = this;
  // 作為物件的方法被物件呼叫，this指向該物件context
  const result = context[uniqueKey](...args);
  delete context[uniqueKey];
  return result;
};
複製程式碼

到這裡，有的小夥伴可能已經發現了，如果call/apply傳入的context不是物件呢？

首先我們看下mdn對call方法的第一個引數的描述：

語法：function.call(thisArg, arg1, arg2, ...)

  • thisArg
    可選的。在function函式執行時使用的this值。請注意，this可能不是該方法看到的實際值：如果這個函式處於非嚴格模式下，則指定null或undefined時會自動替換為指向全域性物件，原始值會被包裝

接下來，我們對myOwnCall方法的第一個引數做如下處理：

function translateToObject (context) {
  // 可以通過 == 進行判斷 context == null
  // null == undefined  => 2個等號是成立的
  // null,undefined => window
  if (typeof context === 'undefined' || context === null) {
    context = window;
  } else if (typeof context === 'number') { // 原始值轉換為包裝物件
    context = new Number(context);
  } else if (typeof context === 'string') {
    context = new String(context);
  } else if (typeof context === 'boolean') {
    context = new Boolean(context);
  }
  return context;
}
複製程式碼

在myOwnCall方法中呼叫該函式：

Function.prototype.myOwnCall = function (context, ...args) {
  context = translateToObject(context);
  const uniqueKey = new Date().getTime();
  // this為呼叫call方法的函式
  context[uniqueKey] = this;
  // 作為物件的方法被物件呼叫，this指向該物件context
  const result = context[uniqueKey](...args);
  delete context[uniqueKey];
  return result;
};
複製程式碼

apply的實現與call基本相同，只不過第二個引數是一個陣列：

Function.prototype.myOwnBind = function (context, paramsArray) {
  context = translateToObject(context);
  const uniqueKey = new Date().getTime();
  // this為呼叫call方法的函式
  context[uniqueKey] = this;
  // 作為物件的方法被物件呼叫，this指向該物件context
  const result = context[uniqueKey](...paramsArray);
  delete context[uniqueKey];
  return result;
};
複製程式碼

相比於call/apply，bind函式並沒有立即執行函式，而是預先傳入函式執行時的this和引數，並且返回一個函式，在返回的函式中執行呼叫bind函式並將預先傳入的this和引數傳入

bind的原始碼模擬：

Function.prototype.myOwnBind = function (context, ...outerArgs) {
  const fn = this;
  return function (...innerArgs) {
    return fn.call(context, ...outerArgs, ...innerArgs);
  };
};
複製程式碼

精簡版如下：

Function.prototype.myOwnBind = (context, ...outerArgs) => (...innerArgs) => this.call(context, ...outerArgs, ...innerArgs);
複製程式碼

這裡並沒有實現通過new操作符來執行fn.bind(context)的操作，如果想知道其詳細的實現過程，可以看我的這篇文章: JS進階-手寫bind

在深入理解call/apply/bind的實現原理後，我們嘗試完成下面的測試：

function fn1 () {console.log(1);}
function fn2 () {console.log(2);}
fn1.call(fn2);

fn1.call.call(fn2);

Function.prototype.call(fn1);
Function.prototype.call.call(fn1);
複製程式碼
answer 
1. 1
2. 2
3. 什麼都不輸出
4. 1
複製程式碼

這裡我們根據call的原始碼來進行推導一下Function.prototype.call.call(fn1)，其它的執行過程類似：

// 1. 首先會將Function.prototype.call作為一個物件來執行它原型上的call方法
// 所以call方法內部：
//    this => Function.prototype.call
//    context => fn1
// 通過物件的屬性來執行方法改變this指向
//    fn1[uniqueKey] = this(Function.prototype.call)
//    fn1[uniqueKey]() // 執行 Function.prototype.call方法，但是this是context
// 2. 在this為fn1的情況下執行Function.prototype.call方法
// 所以call方法內部：
//    this => fn1
//    context => window
// 通過物件的屬性來改變this指向
//    window[uniqueKey] = fn1
//    window[uniqueKey]() // 執行fn1()，但是this是window
複製程式碼

這裡就是有筆者關於JavaScript中this指向的相關內容的理解，希望能對閱讀的小夥伴有所幫助

相關文章