原文:Understanding the “this” keyword in JavaScript
许多人被JavaScript中的this
关键字给搅扰住了,我想杂沓的泉源来自人们天经地义地以为JavaScript中的this
应当像Java中的this
或Python中的self
一样事情。只管JavaScript的this
有时有相似的结果,但它跟Java或其他语言中的this
是完整差别的。只管有点难邃晓,但它的道理并不神奇。事实上,this
遵照一些简朴的小划定规矩,这篇文章就对这些划定规矩作出了诠释。
但起首,我想给出一些专业术语和一些JavaScript运转时环境的相干信息,希望能协助你构建一个心智模子来更好的邃晓this
。
实行高低文
每一行JavaScript代码都运转在一个“实行高低文”中。JavaScript运转时环境用一个栈维持着这些高低文,栈顶的一个就是当前正在运转的实行高低文。
有三类可实行代码:全局代码(global code),函数代码(function code),eval代码(eval code)。也许的说,全局代码是应用顺序最顶层的代码,不被包含在任何要领中,函数代码是在函数(function)体中的代码,eval代码是被eval
诠释的全局代码。
this
对象每次掌握进入一个新的实行高低文时会被从新肯定指向,直到掌握切换到一个差别的高低文。this
的值取决于两件事:被实行的代码的范例(global,function,eval)和挪用代码的对象。
全局对象
统统的JavaScript运转时都有一个唯一的全局对象。他的属性包含内置的对象如Math
和String
,以及其他由主环境变量定义的属性。
在浏览器中,全局对象是window
对象。在Node.js中,它就叫作“global object”。(我假定你将在浏览器中运转代码,但是,我所说的统统也一样适用于Node.js。)
肯定this
的值
第一条划定规矩很简朴:this
指向全局对象在统统全局代码中。由于统统的顺序都是由实行全局代码最先的,而且this
在给定的实行高低文中会被修改,所以,默许的this
指全局对象。
当掌握进入一个新的实行高低文时发作了什么呢?只要三种this
的值发作转变的状况:要领挪用,new一个函数对象,函数被call
和apply
挪用。我将一一诠释。
要领挪用
当我们经由过程点(例obj.foo()
)或许方括号(例obj["foo"]
)把一个要领作为一个对象的属性来挪用时,this
将指向要领体的父对象:
var counter = {
val: 0,
increment: function () {
this.val += 1;
}
};
counter.increment();
console.log(counter.val); // 1
counter['increment']();
console.log(counter.val); // 2
这是第二条划定规矩:函数被看成父对象的属性来挪用时,在函数代码中的this
指向函数的父对象。
注重,假如我们直接挪用雷同的要领,即,不作为父对象的属性,this
将不会指向counter
对象:
var inc = counter.increment;
inc();
console.log(counter.val); // 2
console.log(val); // NaN
当inc
被挪用时,这里的this
不会转变,所以它照样指向全局对象。
当inc
实行
this.val += 1;
它等效于实行:
window.val += 1;
window.val
是undefined,且undefined
加1
获得NaN
。
new 运算符
任何JavaScript函数都可以经由过程new
运算符当做组织函数运用。new
运算符建立一个新对象而且设置函数中的this
指向挪用函数的新对象。举个栗子:
function F (v) {
this.val = v;
}
var f = new F("Woohoo!");
console.log(f.val); // Woohoo!
console.log(val); // ReferenceError
这就是我们的第三条划定规矩:在用new
运算符挪用的函数代码中的this
指向新建立的对象。
注重F
没有任何特别。假如不经由过程new
挪用,this
将指向全局对象:
var f = F("Oops!");
console.log(f.val); // undefined
console.log(val); // Oops!
在这个例子中,F("Oops!")
是一个一般挪用,this
没有指向新的对象,由于没有用new
建立新的对象,this
继承指向全局对象。
Call & Apply
统统JavaScript函数都有两个要领,call
和apply
,让你能够挪用函数而且清晰的设置this
指向的对象。apply
函数有两个参数:一个是this
指向的对象,一个(可选)传进函数的参数的数组:
var add = function (x, y) {
this.val = x + y;
},
obj = {
val: 0
};
add.apply(obj, [2, 8]);
console.log(obj.val); // 10
call
要领和apply
要领是完整一样的,只不过要逐一的通报参数,而不是用一个数组:
add.call(obj, 2, 8);
console.log(obj.val); // 10
这是第四条划定规矩:当运用call
或apply
挪用函数时,函数代码中的this
被设置为call
或apply
中的第一个参数。
总结
- 默许的,
this
指向全局对象 - 当一个函数被作为一个父对象的属性挪用时,函数中的
this
指向父对象 - 当一个函数被
new
运算符挪用时,函数中的this
指向新建立的对象 - 当运用
call
或apply
挪用函数时,函数代码中的this
被设置为call
或apply
中的第一个参数。假如第一个参数是null
或不是个对象,this
指向全局对象。
假如你邃晓并接受了上面的4条划定规矩,你就可以邃晓this
指的是什么了。
补充:eval
突破上面统统划定规矩
Remember when I said that code evaluated inside eval
is its own type of executable code? Well, that’s true, and it means that the rules for determining what this
refers to inside of eval code are a little more complex.
As a first pass, you might think that this
directly inside eval refers to the same object as it does in eval
’s caller’s context. For example:
var obj = {
val: 0,
func: function() {
eval("console.log(this.val)");
}
};
obj.func(); // 0
That works likely as you expect it to. However, there are many cases with eval
where this
will probably not work as you expect:
eval.call({val: 0}, "console.log(this.val)"); // depends on browser
The output of the above code depends on your browser. If your JavaScript runtime implements ECMAScript 5, this
will refer to the global object and the above should print undefined
, because it’s an “indirect” call of eval
. That’s what the latest versions of Chrome and Firefox do. Safari 5.1 actually throws an error (“The ‘this’ value passed to eval must be the global object from which eval originated”), which is kosher according to ECMAScript 3.
If you want know how this
works with eval
, you should read Juriy Zaytsev’s excellent, “Global eval. What are the options?” You’ll learn more about eval
, execution contexts, and direct vs. indirect calls than you probably ever wanted to know.
In general, you should just avoid using eval
, in which case the simple rules about this
given previously will always hold true.