JavaScript之this释疑

Posted 2020-09-21 zhchoutai

近期进修javascript，看了“You Don‘t Know JS”这本书，认为是本JavaScript内功上乘心法，有一定JavaScript基础朋友一定要看看(不推荐入门小朋友看。怕走火入魔)。

作者知识渊博，理解透彻。行文流畅，案例经典，绝对的大神级人物。

本文将对书中关于JavaScript中this的讲述做一个小结，也会增加一些自己的理解。

算是抛砖。以期引玉。

JavaScript里面this究竟是什么？

this是一个标志符，指向某一个对象或者undefined。

JavaScript是什么？一门编程语言；编程语言干嘛的？编写代码。为啥编写代码？运行代码，命令计算机处理事情。好了，写好的JavaScript代码是用来运行的，而且JavaScript Engine会指定一个运行环境(Execution Environment)。运行环境非常复杂，简单来说。能够理解为一个运行数据容器(JavaScript里面能够叫作对象)。JavaScript的代码(一系列的语句)会在两个地方运行，全局区域，以及函数(Function)内部。

this就是运行环境里面的一个属性(Property)，指向运行所针对的某一个对象。

为了描写叙述清楚this和运行环境的关系，简单来说。能够表述例如以下:

Executor_Environment = {
		invoke_stack:[statck1, statck2, ...],
		params: [param1, param2, ...],
		scope_chain:[scop1, scope2, ...],
		this: execute_ object,
		...
	}

继续追问下去。

this指向的对象又是什么？函数调用的时候，this指向的对象是函数执行的上下文，一个目标对象。是执行时由JavaScript Engine动态绑定的。

函数里面this的4种场景

函数里面this的绑定情况有4种。以下将逐一介绍。

原书作者强调某些场景下四种情况可能会有某两个或者三个都适用，须要排列效用的强度大小，这一点。我不太赞同，我认为还是都能够归并到某一种场景的。

newkeyword

JavaScript里面newkeyword后接一个Function调用，会新创建一个对象，运行Function的时候，JavaScript Engine会把新创建的对象赋值给this，即此时this指向新创建的对象。以下给出两个样例:

new样例1:

function Func1(){
		this.a = 3;
	}

	var a1 = new Func1();
	console.log(a1.a); // 3

new样例2:

function Func2(){
		this.a = 3;
		return {};
	}

	var a2 = new Func2();
	console.log(a2.a); // undefined

后面的样例是想说，假设Function里面有return语句。那么new语句新创建的对象会被丢弃!

call和apply

call和apply的作用就是强行指定Function里面this所应该指向的对象。

call的一个小样例:

function sayHi(){
		console.log("Hi,"+ this.name);
	}

	var p = {name:"Kevin", age: 26};

	sayHi.call(p);

作为对象的属性调用

这里有两层意思。Function是对象的一个属性，通过对象来訪问Function并马上调用。这样的情况下，Function里面的this指向该对象。

样例:

function sayHi(){
		console.log("Hi,"+ this.name);
	}

	var p = {name:"Kevin", age: 26, hi: sayHi};

	p.hi();

直接调用Function

通过Function的名字，直接调用Function。通常JavaScript Engine会把Global绑定给this。浏览器里面Global是window。只是据说"use strict"情况下，this指向undefined(严格来说undefined在JavaScript里面不是对象)。

Function直接调用的小样例:

function sayHi(){
		console.log("Hi,"+ this.name);
		console.log(this);
	}

	var name = "Just Joke";

	sayHi(); // output：Hi, Just Joke
	// followed global object, which contain name, sayHi。

全局区域里面的this代表什么

说实话。我仅仅是推測。全局区域的语句也须要一个运行环境，该运行环境也有一个this标志符，指向Global对象。浏览器里面就是window。这一点“You Don‘t Know JS”原书中没有提及。

全局区域输入下面代码试试:

var name = "James";
	console.log("I am "+ this.name); // I am James

參考链接

You Don‘t Know JS