JavaScript之this释疑

最近进修JavaScript，看了“You Don't Know JS”这本书，觉得是本JavaScript内功上乘心法，有1定JavaScript基础朋友1定要看看(不推荐入门小朋友看，怕走火入魔)。作者知识渊博，理解透彻，行文流畅，案例经典，绝对的大神级人物。

本文将对书中关于JavaScript中this的讲述做1个小结，也会加入1些自己的理解。算是抛砖，以期引玉。

JavaScript里面this究竟是甚么？

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

JavaScript是甚么？1门编程语言；编程语言干吗的？编写代码；为啥编写代码？履行代码，命令计算机处理事情。好了，写好的JavaScript代码是用来履行的，并且JavaScript Engine会指定1个履行环境(Execution Environment)。履行环境很复杂，简单来讲，可以理解为1个履行数据容器(JavaScript里面可以叫作对象)。JavaScript的代码(1系列的语句)会在两个地方履行，全局区域，和函数(Function)内部。

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

为了描写清楚this和履行环境的关系，简单来讲，可以表述以下:

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

继续追问下去。this指向的对象又是甚么？函数调用的时候，this指向的对象是函数履行的上下文，1个目标对象，是运行时由JavaScript Engine动态绑定的。

函数里面this的4种场景

函数里面this的绑定情况有4种，下面将逐1介绍。原书作者强调某些场景下4种情况可能会有某两个或3个都适用，需要排列功效的强度大小，这1点，我不太赞同，我觉得还是都可以归并到某1种场景的。

new关键字

JavaScript里面new关键字后接1个Function调用，会新创建1个对象，履行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的1个小例子:

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

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

	sayHi.call(p);

作为对象的属性调用

这里有两层意思，Function是对象的1个属性，通过对象来访问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代表甚么

说实话，我只是猜想。全局区域的语句也需要1个履行环境，该履行环境也有1个this标志符，指向Global对象。阅读器里面就是window。这1点“You Don't Know JS”原书中没有提及。

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

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

参考链接

You Don't Know JS

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠