JavaScript之this释疑

标签：javascript   this   js   

最近进修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释疑

标签：javascript   this   js   

原文地址：http://blog.csdn.net/kimylrong/article/details/40625171