JavaScript——深入瞭解this

_Fatman發表於2021-01-26

前言

我曾以為func()其實就是window.func()

function func(){
	console.log('this : ' + this);
}

func();//this : [object Window]
window.func();//this : [object Window]

直到

'use strict'
function func(){
	console.log('this : ' + this);
}
func();//this : undefined
window.func();//this : [object Window]

也曾為輸出inside this : [object Window] 而困惑不已

function outside(){
	console.log('outside  this : ' + this);//outside  this : [object Object]
	function inside(){
		console.log('inside  this : ' + this);//inside  this : [object Window]
	}
	inside();
}
let obj = {
	outside : outside
}
obj.outside();

曾感慨Java之美好^[1]，唾棄JavaScript中this的‘靈活’。
...

一直到我嘗試總結出this的規律:
1.建構函式中的this關鍵字在任何模式下都指向new出來的物件;

2.嚴格模式下this關鍵字指向呼叫該函式的物件,如果該函式未被物件呼叫,則 this === 'undefined';

3.非嚴格模式下this關鍵字指向呼叫該函式的物件,如果該函式未被物件呼叫 this === window;

再到後來，拜讀了JavaScript語言精粹，知曉了4種呼叫模式，知曉了箭頭函式的一個我不曾知曉的作用，結合過往，我感覺自己已經摸清了this的規律，亦或者至少摸清了一部分的規律，特撰此文，作為總結；

首先，此文所有程式碼執行環境皆為瀏覽器，所以我不會強調global;
再者，function中this指向被確定於function被呼叫時(拋開箭頭函式和class不論),
類似像下面這種程式碼，我覺得沒有提的必要；

function func(){
	console.log('this : ' + this);
}
func;
setTimeout(func,100); 
//我想表達的意思是 func是被setTimeout呼叫的 同樣我也可以寫一個mySetTimeout
mySetTimeout = function(func,delay){
	setTimeout(func.bind({}),delay); //我們應該把目光放在function呼叫時
}
mySetTimeout(func,100); 
//在不執行程式碼的前提下，如果不看mySetTimeout程式碼，能準確判斷this是什麼嗎?

最後，我不想提with，因為with的使用往往會引起歧義，就如同下面的程式碼，明明呼叫時的程式碼一模一樣，但一個在全域性作用域window中呼叫func，而另一個在obj的作用域中呼叫，輸出的結果天差地別。

function func(){
	console.log('this : ' + this);
}
let obj = {};
with(obj){
	func();//this : [object Window]
}
obj.func = func;
with(obj){
	func();//this : [object Object]
}

接下來的內容我將以下圖中的思路展開：
在這裡插入圖片描述

ES6之前

這裡的主要思路還是沿用的JavaScript語言精粹。

函式呼叫模式

JavaScript中的function不同於Java，Java雖然說萬物皆物件，但是基礎型別和function就不是物件。Java中的function只是物件的行為，但是JavaScript不同，JavaScript雖然同時包含了一些像原型、函式柯里化等程式設計思想，但是在萬物皆物件這一方面，反而比Java更像是物件導向程式設計。JavaScript中的function是支援直接呼叫的。
在非嚴格模式：

function func(){
	console.log('this : ' + this);
}
func();//this : [object Window]

在嚴格模式：

'use strict'
function func(){
	console.log('this : ' + this);
}
func();//this : undefined

方法呼叫模式

方法呼叫模式就是把function當成物件的行為來呼叫，既然是物件的行為，那麼function中的this指向的當然是這個呼叫的物件了。
在非嚴格模式：

let _self = null;
function func(){
	_self = this;
}
let obj = {
	 func : func
}
obj.func();
console.log('_self === obj : ' + (_self === obj));//_self === obj : true

在嚴格模式：

'use strict'
let _self = null;
function func(){
	_self = this;
}
let obj = {
	 func : func
}
obj.func();
console.log('_self === obj : ' + (_self === obj));//_self === obj : true

構造呼叫模式

構造呼叫模式就是把function當做建構函式呼叫，在其左邊加上new關鍵字，為了迎合程式碼規範，這裡的function我將以大寫字母開頭。
在非嚴格模式：

let _self = null;
function Person(){
	_self = this;
}
let person = new Person();
console.log('_self === person : ' + (_self === person));//_self === person : true

在嚴格模式：

'use strict'
let _self = null;
function Person(){
	_self = this;
}
let person = new Person();
console.log('_self === person : ' + (_self === person));//_self === person : true

建構函式這裡我覺得有必要擴充套件一下：
1.建構函式中返回物件(非基礎型別)，會影響上面的結果；

let _self = null;
function Person(){
	_self = this;
	return window;
}
let person = new Person();
console.log('_self === person : ' + (_self === person));//_self === person : false
console.log('window === person : ' + (window === person));//window === person : true

2.省略new關鍵字，同樣會影響上面的結果；

let _self = null;
function Person(){
	_self = this;
}
let person = Person();
console.log('_self === person : ' + (_self === person));//_self === person : false
console.log('window === person : ' + (window === person));//window === person : false
console.log('typeof person : ' + typeof person);//typeof person : undefined

在Person呼叫時省略new關鍵字還可能會汙染全域性作用域：

function Person(){
	this.personName = 'person';
}
let person = Person();
console.log('person.personName : '+person.personName);//Cannot read property 'personName' of undefined
console.log('window.personName : '+window.personName);//window.personName : person

蠢辦法解決呼叫建構函式不用new關鍵字的:

function Person(){
	if(this === window){
        throw Error('You must use the new keyword.');
    }
	this.personName = 'person';
}
let person = Person();//You must use the new keyword.

改進版

function Person(){
	let context;
    (function(){
        context = this;
    }())
    if(this === context){
        throw Error('You must use the new keyword.');
    }
	this.personName = 'person';
}
let person = Person();//You must use the new keyword.

特指呼叫模式

bind雖然是es6的，但是我也放到這個模式一起講了，因為我覺得把bind和apply、call一起講可能會更容易理解一些。

apply

apply的第一個引數是繫結的物件，第二個引數是array。call和apply的不同之處在於call的第二個引數對於function中arguments的第一位，第三個引數對於function中的arguments的第二位，以此類推；而apply的第二個引數對應function中的arguments。由於這裡主要是講this，所以第二個引數的例子就不提了，後面的call也一樣。
在非嚴格模式：

function func(){
	console.log('this : ' + this);
}
func.apply({});//this : [object Object]
func.apply(window);//this : [object Window]
func.apply(null);//this : [object Window]
func.apply();//this : [object Window]

在嚴格模式：

'use strict'
function func(){
	console.log('this : ' + this);
}
func.apply({});//this : [object Object]
func.apply(window);//this : [object Window]
func.apply(null);//this : null
func.apply();//this : undefined

實現apply

滿足條件

1.把第一個引數繫結到呼叫myApply的function執行時的this；
2.第二個引數應與呼叫myApply的function的arguments內容一致；
3.嚴格模式和非嚴格模式第一個引數為null或undefined時情況要與apply函式一致；

程式碼

Function.prototype.myApply = function(){
	var context,arr;
	//誰呼叫的myApply this就指向誰
	if(typeof this !== 'function'){
		throw Error('typeof this !== "function"');
	}
	context = arguments[0];
	arr = arguments[1] ? arguments[1] : [];
	if(typeof context === 'undefined' || context === null){
		//滿足條件3
		context = (function(){
			return this;
		}());
	}
	if(typeof context === 'undefined'){
		this(...arr);
	}else{
		context.f = this;
		context.f(...arr);
	}
}

call

call如果只傳入第一個引數，結果和只傳入第一個引數的apply是一致的。
在非嚴格模式：

function func(){
	console.log('this : ' + this);
}
func.call({});//this : [object Object]
func.call(window);//this : [object Window]
func.call(null);//this : [object Window]
func.call();//this : [object Window]

在嚴格模式：

'use strict'
function func(){
	console.log('this : ' + this);
}
func.call({});//this : [object Object]
func.call(window);//this : [object Window]
func.call(null);//this : null
func.call();//this : undefined

實現call

滿足條件

1.把第一個引數繫結到呼叫myCall的function執行時的this；
2.除第一個引數外其餘引數組成的陣列應與呼叫myCall的function的arguments內容一致；
3.嚴格模式和非嚴格模式第一個引數為null或undefined時情況要與call函式一致；

程式碼

Function.prototype.myCall = function(){
	var context,arr;
	//誰呼叫的myCall this就指向誰
	if(typeof this !== 'function'){
		throw Error('typeof this !== "function"');
	}
	context = arguments[0];
	//差異點 call與apply的傳值方式所致
	arr = [...arguments].slice(1);//手動轉型
	if(typeof context === 'undefined' || context === null){
		//滿足條件3
		context = (function(){
			return this;
		}());
	}
	if(typeof context === 'undefined'){
		this(...arr);
	}else{
		context.f = this;
		context.f(...arr);
	}
}

bind

bind和call很相似，主要的不同點在於func.call(window)立馬就呼叫了,而func.bind(window)會返回一個繫結了window的function，但是這個function還沒有執行。可以這樣理解func.bind(window)()的效果與func.call(window)一致。
在非嚴格模式：

function func(){
	console.log('this : ' + this);
}

func.bind({})();//this : [object Object]
func.bind(null)();//this : [object Window]
func.bind()();//this : [object Window]
let obj = {
	func : func.bind(window)
}
obj.func();//this : [object Window]
//建構函式
let _self = null;
function Person(){
	_self = this;
}
let P = Person.bind(window);
let person = new P();
console.log('_self === person : ' + (_self === person));//_self === person : true
console.log('window === person : ' + (window === person));//window === person : false

在嚴格模式：

'use strict'
function func(){
	console.log('this : ' + this);
}

func.bind({})();//this : [object Object]
func.bind(null)();//this : null
func.bind()();//this : undefined
let obj = {
	func : func.bind(window)
}
obj.func();//this : [object Window]
//建構函式
let _self = null;
function Person(){
	_self = this;
}
let P = Person.bind(window);
let person = new P();
console.log('_self === person : ' + (_self === person));//_self === person : true
console.log('window === person : ' + (window === person));//window === person : false

從上面的例子，我們不單單可以發現bind在嚴格模式和非嚴格模式下的不同，還可以得出構造呼叫模式的優先順序最高，bind其次，方法呼叫模式和函式呼叫模式最低。

實現bind

滿足條件

1.把第一個引數繫結到呼叫myBind的function執行時的this；
2.將除第一個引數外其餘引數與function中引數合併；
3.嚴格模式和非嚴格模式第一個引數為null或undefined時情況要與bind函式一致；

程式碼

Function.prototype.myBind = function(){
	var context,arr,_self;
	//誰呼叫的myBind this就指向誰
	if(typeof this !== 'function'){
		throw Error('typeof this !== "function"');
	}
	context = arguments[0];
	arr = [...arguments].slice(1);//手動轉型
	if(typeof context === 'undefined' || context === null){
		//滿足條件3
		context = (function(){
			return this;
		}());
	}
	_self = this;
	return function(){
		if(typeof context === 'undefined'){//嚴格模式
			_self(arr.concat(...arguments));
		}else{
			context.f = _self;
			context.f(arr.concat(...arguments));
		}
		
	}
}

ES6

據我所知，有一部分人，他們奉行箭頭函式+class來解決一切問題。我對此觀點的正確性不表態，但是這樣做能減少很多判斷this的麻煩。

箭頭函式

箭頭函式沒有this，箭頭函式中的this來自於它處於的作用域鏈中的上一層。我在前言中說過，我曾為輸出inside this : [object Window] 而困惑不已，但是我現在把程式碼略微修改一下，輸出就將符合我的預期(inside繼承了outside的this值)。

function outside(){
	console.log('outside  this : ' + this);//outside  this : [object Object]
	let inside = ()=>{
		console.log('inside  this : ' + this);//inside  this : [object Object]
	}
	inside();
}
let obj = {
	outside : outside
}
obj.outside();

要是把outside也改成箭頭函式，結果又會大不一樣

let outside = ()=>{
	console.log('outside  this : ' + this);//outside  this : [object Window]
	let inside = ()=>{
		console.log('inside  this : ' + this);//inside  this : [object Window]
	}
	inside();
}
let obj = {
	outside : outside
}
obj.outside();

因為箭頭函式的this值是繼承於它身處的作用域上一層的this，outside上一層是全域性作用域，不會再發生更改了，所以這裡就算用方法呼叫模式，也無法改變this的值。
在非嚴格模式：

let func = ()=>{
	console.log('this : ' + this);
}
func();//this : [object Window]
let obj = {
	func : func
}
obj.func();//this : [object Window]
func.apply({});//this : [object Window]
func.call({});//this : [object Window]
func.bind({})();//this : [object Window]
func.apply(null);//this : [object Window]
func.apply();//this : [object Window]

let _self = null;
let Person = ()=>{
	_self = this;
}
let person = new Person();//Person is not a constructor

在嚴格模式：

'use strict'
let func = ()=>{
	console.log('this : ' + this);
}
func();//this : [object Window]
let obj = {
	func : func
}
obj.func();//this : [object Window]
func.apply({});//this : [object Window]
func.call({});//this : [object Window]
func.bind({})();//this : [object Window]
func.apply(null);//this : [object Window]
func.apply();//this : [object Window]

let _self = null;
let Person = ()=>{
	_self = this;
}
let person = new Person();//Person is not a constructor

觀察上述程式碼執行結果可知：
1.嚴格模式和非嚴格模式對箭頭函式中的this無影響；
2.箭頭函式無法當作建構函式使用；
3.箭頭函式中的this只與自身處於的作用域鏈上一層有關；

class

第一次看到class的用法時，我就不禁感慨原型的強大，對於我這種以前使用Java的人來說，class真的是太友好了。
在非嚴格模式：

let constructorThis = null;
let funcThis = null;
let staticFuncThis = null;
class Person{
	constructor(){
		constructorThis = this;
	}
	func(){
		funcThis = this;
	}
	static staticFunc(){
		staticFuncThis = this;
	}
}

let person = new Person();
person.func();
Person.staticFunc();

console.log('constructorThis === person : ' + (constructorThis === person));//constructorThis === person : true
console.log('funcThis === person : ' + (funcThis === person));//funcThis === person : true
console.log('staticFuncThis === person : ' + (staticFuncThis === person));//staticFuncThis === person : false
console.log('staticFuncThis : ' + staticFuncThis);//staticFuncThis : class Person...

在嚴格模式：

'use strict'
let constructorThis = null;
let funcThis = null;
let staticFuncThis = null;
class Person{
	constructor(){
		constructorThis = this;
	}
	func(){
		funcThis = this;
	}
	static staticFunc(){
		staticFuncThis = this;
	}
}

let person = new Person();
person.func();
Person.staticFunc();

console.log('constructorThis === person : ' + (constructorThis === person));//constructorThis === person : true
console.log('funcThis === person : ' + (funcThis === person));//funcThis === person : true
console.log('staticFuncThis === person : ' + (staticFuncThis === person));//staticFuncThis === person : false
console.log('staticFuncThis : ' + staticFuncThis);//staticFuncThis : class Person...

觀察上述程式碼執行結果可知：
1.嚴格模式和非嚴格模式對class function中的this無影響；
2.建構函式和普通方法的this就是new出來的值(和方法呼叫模式、構造呼叫模式一致)
3.靜態方法的this就是這個class(還是和方法呼叫模式一致畢竟是用class呼叫的靜態方法)

結尾

由於本人水平有限，如有缺失和錯誤，還望告知。

Java中function只能是方法，被物件或者類呼叫。非靜態方法被物件呼叫時,this是這個呼叫的物件;靜態方法被類呼叫時,則沒有this; ↩︎

深入瞭解JavaScript中的物件
2019-03-01
JavaScript物件
深入瞭解 JavaScript 中的 for 迴圈
2016-12-10
JavaScript
深入瞭解 JavaScript 記憶體洩漏
2023-03-27
JavaScript記憶體
深入瞭解機器學習
2018-09-04
機器學習
深入瞭解原型
2018-10-16
原型
深入瞭解 NSURLSession
2017-03-28
Session
深入瞭解JavaScript執行過程（JS系列之一）
2020-03-06
JavaScriptJS
[譯] 深入瞭解 Flutter
2019-03-02
Flutter
深入瞭解Synchronized原理
2019-05-04
synchronized
深入瞭解babel（一）
2019-02-16
Babel
從問題入手，深入瞭解JavaScript中原型與原型鏈
2021-02-06
JavaScript原型
瞭解JavaScript引擎
2019-10-29
JavaScript
深入瞭解JavaScript中基於原型（prototype）的繼承機制
2021-02-04
JavaScript原型繼承
深入瞭解 Object.defineProperty
2022-05-01
Object
深入瞭解Zookeeper核心原理
2021-04-28
深入瞭解 Builder 模式 - frankel
2021-09-15
UI模式
深入瞭解MySQL的索引
2018-09-06
MySql索引
深入瞭解Object.defineProperty
2018-09-28
Object
深入瞭解Java社群程式
2012-09-10
Java
深入瞭解解析Https - 從瞭解到放棄
2019-02-15
HTTP
Nginx深入瞭解-基礎(一)
2019-01-19
Nginx
Nginx深入瞭解-基礎(三)
2019-01-19
Nginx
前端進階-深入瞭解物件
2018-11-13
前端物件
深入瞭解 gRPC：協議
2017-07-18
RPC協議
轉載 :深入瞭解ORACLE SCN
2008-02-28
Oracle
深入瞭解Oracle資料字典
2009-07-23
Oracle
瞭解 JavaScript 的遞迴
2018-03-28
JavaScript遞迴
深入瞭解 iOS 的初始化
2019-11-18
iOS
深入瞭解Kafka基本原理
2021-09-09
Kafka
OkHttp3深入瞭解之Interceptors
2019-01-01
HTTP
深入瞭解JS型別判斷
2020-10-31
JS型別
深入瞭解Mybatis架構設計
2021-11-02
MyBatis架構
深入瞭解SpringMVC原始碼解析
2021-11-27
SpringMVC原始碼
深入瞭解Azure 機器學習的工作原理
2022-03-17
機器學習
深入瞭解Redis資料結構
2024-01-19
Redis資料結構
深入瞭解視覺語言模型
2023-03-01
視覺模型
深入瞭解React新引擎：ReactFiber
2017-07-03
React
Mybatis深入瞭解（五）----動態SQL
2016-07-16
MyBatisSQL

JavaScript——深入瞭解this

前言

ES6之前

函式呼叫模式

方法呼叫模式

構造呼叫模式

特指呼叫模式

apply

實現apply

滿足條件

程式碼

call

實現call

滿足條件

程式碼

bind

實現bind

滿足條件

程式碼

ES6

箭頭函式

class

結尾

相關文章