首页 > 代码库 > JavaScript之this释疑

JavaScript之this释疑

最近进修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种,下面将逐一介绍。原书作者强调某些场景下四种情况可能会有某两个或者三个都适用,需要排列效用的强度大小,这一点,我不太赞同,我觉得还是都可以归并到某一种场景的。

new关键字

JavaScript里面new关键字后接一个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

JavaScript之this释疑