JavaScript 上下文环境和作用域,以及 call、apply 和 bind【转载+翻译+整理】
——看到这篇文章,翻译国外的,虽说写得有点矫情,但总体来看,还是相当不错的~
本文内容
- 我在哪儿?你又是谁 ?
- this?
- 用 apply 和 call 掌控上下文环境
- bind 之美
本文将说明上下文环境(Context)和作用域(Scope),首先,掌控上下文环境的两种方法,其次,深入一种高效的方案,它能有效解决我所碰到的 90% 的问题。
作用域是 JavaScript 基础之一,在构建复杂程序时,可能是最令我头痛的东西。记不清,有多少次在函数之间传递控制后忘记 this 究竟是哪个对象,甚至,我经常以各种不同的混乱方式来“曲线救国”,试图伪装成正常的代码,以我自己的理解方式来找到所需要访问的变量。
我在哪儿?你又是谁 ?
JavaScript 代码的每一个字节都是运行在上下文环境中,你可以把这些上下文环境想象为代码的邻居,它们可以给每一行代码指明:从何处来,朋友和邻居又是谁。没错,这是很重要的信息,因为 JavaScript“社会”有相当严格的规则,规定谁可以跟谁“交往”。上下文环境是门卫把守的社区,而非其内开放的小门。
通常,我们可以把这些社会边界称为作用域,并且有充分理由为每位邻居的宪章里立法(国有国法,家有家法;再小的作用域也有法),而这个宪章就是我们所说的作用域链(Scope Chain)。在特定的邻里关系内,代码只能访问它作用域链内的变量。与超出它邻里的变量比起来,代码更喜欢跟本地(local 局部)的打交道。
具体地说,执行一个函数会创建一个不同的运行上下文环境,它将局部作用域添加到它所定义的作用域链内。JavaScript 通过作用域链,由局部向全局攀升,在特定的上下文中解析标识符,表明本级变量会优先于作用域链内上一级拥有相同名字的变量。因此,当我的好友们谈论”Mike West”(本文原作者)时,他们说的是我,而非 Bluegrass Singer 或是 Duke Professor,尽管后两者著名多。
现在,看些例子来探索上面所说的含义。
代码段 1:
var ima_celebrity = "Everyone can see me! I'm famous!",
the_president = "I'm the decider!";
function pleasantville() {
var the_mayor = "I rule Pleasantville with an iron fist!",
ima_celebrity = "All my neighbors know who I am!";
function lonely_house() {
var agoraphobic = "I fear the day star!",
a_cat = "Meow.";
}
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
- 我们的全明星 ima_celebrity 家喻户晓(所有人都认识她)。她在政治上很活跃,因其知名度和社会地位,敢于叫嚣总统 the_president。她会为每个粉丝签名,回答他们的回答问题,但从不会跟粉丝们私下联系。ima_celebrity 相当清楚粉丝们的存在,并有他们自己某种程度上的个人生活,但也可以肯定,ima_celebrity 并不知道粉丝们在干嘛,甚至连粉丝的名字都不知道。
- 而在欢乐市 pleasantville 内,市长 the_mayor 是众所周知的。他经常在他的城镇内散步,跟选民们聊天、握手并亲吻小孩。因为 pleasantville 还算比较大且重要的邻居,市长在他办公室内放置一台红色电话,一条可以直通总统 7×24 热线。the_mayor 还可以看到市郊外山上的孤屋 lonely_house,但从不在意里面住着的究竟是谁。
- 而孤屋 lonely_house 是一个自我的世界。广场恐惧症者时常在里面喃喃自语,玩纸牌,他还养了一只小猫 a_cat。lonely_house 偶尔会给市长 the_mayor 打电话咨询一些本地的噪音管制,甚至在本地新闻看到 ima_celebrity 后,会写些粉丝言语给她(当然,这是 pleasantville 内的 ima_celebrity)。
this?
每一个运行的上下文环境,除了建立一个作用域链外,还提供一个 this 关键字。它的一般用法是,this 作为一个独特的功能,为邻里们提供一个可访问到它的途径。但总依赖于这个行为并不可靠:取决于我们如何进入一个特定邻居的具体情况,this 表示的完全可能是其他东西。事实上,我们如何进去邻居家本身,通常恰恰就是 this 所指。有四种情形特别值得注意:
调用对象的方法
在经典的面向对象编程中,我们需要识别和引用当前对象。this 极好地扮演了这个角色,为我们的对象提供了自我查找的能力,并指向它们本身的属性。
代码段 2:
var deep_thought = {
the_answer: 42,
ask_question: function () {
return this.the_answer;
}
};
var the_meaning = deep_thought.ask_question(); // 42
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
该例子,建立了一个名为 deep_thought 对象,其属性 the_answer 为 42,并创建了一个名为 ask_question 方法。当执行 deep_thought.ask_question() 时,JavaScript 为函数调用建立一个上下文环境,通过”.“运算符把 this 指向被引用的对象(当前对象),本例中是 deep_thought 对象。之后,这个方法就可以通过 this 找到它自身的属性,返回 this.the_answer的值。
构造函数
类似地,当定义一个函数,通过构造器,使用 new 关键字创建对象时,this 可用来引用刚创建的对象。让我们写一个能反映该情形的例子:
代码段 3:
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
return this.the_answer;
}
} var deep_thought = new BigComputer(42);
var the_meaning = deep_thought.ask_question(); // 42
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
首先,定义声明并创建一个函数 BigComputer 对象,而不是直接创建 deep_thought 对象。通过 new 关键字实例化 deep_thought 为一个实例变量,当 new BigComputer() 被执行,后台创建了一个全新的对象,它的 this 关键字被设置,并指向新对象的引用。这个函数可以在 this 上设置属性和方法。
尽管如此,此处 deep_thought.the_question() 执行结果跟前面的一样。那这里发生了什么?为何 this 在 ask_question 内与 BigComputer 内会有所不同?简单地说,此处,我们是通过 new 进入 BigComputer 的,所以 this 表示的是“新(new)的对象”。另一方面,我们通过 deep_thought 进入 ask_question,所以当我们执行该方法时,this 表示的是 “deep_thought 所引用的对象”。this 并不像其他的变量一样从作用域链中读取,而是在上下文环境中重置。
因此,比较代码段 3 和代码段 2,说明 this 会在上下文环境中被重置。代码段 2 中的 deep_thought 已经是对象了,而代码段 3 中的 deep_thought 是 new 出来的新的实例对象,你当然可以 new 很多个。
函数调用
假设,没有任何相关对象的奇幻东西,我们只是调用一个普通的函数,这种情形下 this 表示的又是什么?
代码段 4:
function test_this() {
return this;
}
var i_wonder_what_this_is = test_this();
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
这种情况下,我们并不通过 new 来创建实例对象,从而提供上下文,更没有以某种形式偷偷地提供上下文。此时, this 默认尽可能引用最全局的东西:对网页来说,这就是 window 对象。
事件处理函数
比调用一般函数的更复杂的状况是事件处理函数。假设,我们用函数去处理一个 onclick 事件。当事件触发,我们的函数运行时,this 表示的是什么呢?不凑巧,这个问题不会有简单的答案。
如果我们写的是内联(inline)事件处理函数,那么,this 引用的是全局 window 对象。
代码段 5:
function click_handler() {
alert(this); // window 对象
}
<button id='thebutton' onclick='click_handler()'>
Click me!</button>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
可如果我们是通过添加事件处理函数,那么,this 引用的是生成该事件的 DOM 元素。此处只是为了简单起见,实际中会使用真正的 addEvent 添加事件处理的函数。
代码段 6:
function click_handler() {
alert(this); // 按钮的 DOM 节点,当前 DOM
}
function addhandler() {
document.getElementById('thebutton').onclick = click_handler;
}
window.onload = addhandler;
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
<button id='thebutton'>
Click me!</button>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
最后,再看一个更复杂情况。我们需要询问 deep_thought 一个问题,不像代码段 5 那样直接运行 click_handler,而是通过点击按钮,会发生什么?如下所示:
代码段 6:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
alert(this.the_answer);
}
}
function addhandler() {
var deep_thought = new BigComputer(42);
var the_button = document.getElementById('thebutton');
the_button.onclick = deep_thought.ask_question;
}
window.onload = addhandler;
</script>
</head>
<body>
<button id='thebutton'>
Click me!</button>
</body>
</html>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
很完美吗?想象一下,当我们点击按钮后,deep_thought.ask_question 被执行,我们得到了“42”。但是,为什么浏览器却给我们一个 undefined? 错在哪里呢?
显然,this 指向的不是 BigComputer。我们给 ask_question 传递一个引用,它作为一个事件处理函数来执行,与作为对象方法来运行的上下文环境并不一样。简言之,ask_question 中的 this 指向了产生事件的 DOM 元素,而不是 BigComputer 对象。DOM 元素并不存在一个 the_answer 属性,所以我们得到的是 undefined。这跟我们的本意相差甚远。setTimeout 也有类似的行为,它在延迟函数执行的同时跑到了一个全局的上下文中去了。
这个问题会在程序的所有角落时不时突然冒出,如果不细致地追踪程序的话,还是一个非常难以排错的问题,尤其在你的对象有跟 DOM 元素或者 window 对象同名属性的时候。
用 apply 和 call 掌控上下文环境
在点击按钮的时候,我们真正需要的是能够咨询 deep_thought 一个问题。更进一步说,在应答事件和setTimeout的调用时,能够在自身的本原上下文中调用对象的方法。JavaScript方法中的 apply 和 call 方法。在我们执行函数调用时,可以“曲线”帮我们达到这样的目的,允许我们覆盖 this 的默认值。先来看看 call:
代码段 7:
var first_object = {
num: 42
}
var second_object = {
num: 24
}
function multiply(mult) {
return this.num * mult;
}
multiply.call(first_object, 5); // 42 * 5
multiply.call(second_object, 5); // 24 * 5
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
本例中,先定义了两个对象,first_object 和 second_object,它们分别有自己的 num 属性。然后,定义一个 multiply 函数,它只接受一个参数,并返回该参数与 this 所指对象的 num 属性的乘积。如果我们调用函数自身 multiply (5),返回的答案极大可能是 undefined,因为,除非有明确的指定,全局 window 对象并没有 num 属性。我们需要一些途径来告诉 multiply 里面的 this 关键字应该引用什么。而 multiply 的 call 方法正是我们所需要的。
call 的第一个参数表明 multiply 内 this 所指的对象,其余参数表示 multiply 自己的参数,如同函数的自身调用一样。所以,当执行 multiply.call(first_object, 5) 时,multiply 被调用,5 传入,而 this 为 first_object 的引用。multiply.call(second_object, 5) 同理,5 传入,而 this 变为 second_object 的引用。
apply 跟 call 一样,但可以让你把参数包裹进一个数组再传递给调用函数,在程序性生成函数调用时尤为有用。本例若使用 apply :
multiply.apply(first_object, [5]); // 42 * 5
multiply.apply(second_object, [5]); // 24 * 5
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
apply 和 call 非常有用,但对于事件处理函数所改变的上下文问题,也只是问题的一半而已。在搭建处理函数时,我们想当然地认为,只需简单地通过使用 call 来改变 this 的含义即可。
代码段 8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
alert(this.the_answer);
}
}
function addhandler() {
var deep_thought = new BigComputer(42);
var the_button = document.getElementById('thebutton');
the_button.onclick = deep_thought.ask_question.call(deep_thought);
}
window.onload = addhandler;
</script>
</head>
<body>
<button id='thebutton'>
Click me!</button>
</body>
</html>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
但还是有问题,理由很简单:call 立即执行了函数。
其实,可以用一个匿名函数封装,
the_button.onclick = function () {
deep_thought.ask_question.call(deep_thought);
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
这样,任何问题都没有,但比起下面的 bind 来,显得不够优雅。
我们给 onclcik 一个函数执行后的结果,而非函数的引用,因此,需要利用另一个 JavaScript 特色,以解决这个问题。
bind 之美
我并不是 Prototype JavaScript framework 的忠实粉丝,但对它的总体代码质量印象深刻。具体而言,JavaScript 为 Function 对象增加一个简洁的补充,对我管理函数调用执行后的上下文产生了极大的正面影响:bind 跟 call 执行相同的常见任务——改变函数执行的上下文,不同之处在于,bind 返回的是函数引用可以备用,而不是 call 立即执行而产生的最终结果。
如果需要简化一下 bind 函数以抓住概念的重点,可以先把它应用到前面讨论的代码段 7 的例子中,看它如何工作。这是一个相当优雅的解决方案。
代码段 9:
var first_object = {
num: 42
};
var second_object = {
num: 24
};
function multiply(mult) {
return this.num * mult;
}
Function.prototype.bind = function (obj) {
var method = this;
var temp = function () {
return method.apply(obj, arguments);
};
return temp;
}
var first_multiply = multiply.bind(first_object);
first_multiply(5); // 返回 42 * 5
var second_multiply = multiply.bind(second_object);
second_multiply(5); // 返回 24 * 5
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
首先,我们定义了 first_object、second_object 和 multiply。然后,为 Function.prototype 定义一个 bind 方法,这样,程序里的函数都会有(继承)一个 bind 方法可用。
当执行 multiply.bind(first_object) 时,JavaScript 为 bind 方法创建一个运行的上下文环境,把 this 设置为 multiply 函数的引用,并把第一个参数 obj 设置为 first_object 的引用。目前为止,一切顺利。
这个解决方案的真正天才之处在于 method 的创建,设置为 this 的引用所指(即 multiply 函数自身)。当下一行的匿名函数被创建,method 通过它的作用域链访问,obj 亦然(不要在此使用 this,因为新创建的函数执行后,this 会被新的、局部的上下文覆盖)。这个 this 的别名让 apply 执行 multiply 函数成为可能,而传递obj则确保上下文的正确。用计算机科学的话说,temp 是一个闭包(closure),它可以保证,需要在 first_object 的上下文中执行 multiply,bind 调用的最终返回可以用在任何的上下文中。
这才是前面说到的事件处理函数和 setTimeout 情形所真正需要的。
下面代码完全解决了这些问题,绑定 deep_thought.ask_question 方法到 deep_thought 的上下文中,因此能在任何事件触发时都能正确运行:
代码段 10:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
alert(this.the_answer);
}
}
Function.prototype.bind = function (obj) {
var method = this;
var temp = function () {
return method.apply(obj, arguments);
};
return temp;
}
function addhandler() {
var deep_thought = new BigComputer(42);
var the_button = document.getElementById('thebutton');
the_button.onclick = deep_thought.ask_question.bind(deep_thought);
}
window.onload = addhandler;
</script>
</head>
<body>
<button id='thebutton'>
Click me!</button>
</body>
</html>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
JavaScript 上下文环境和作用域,以及 call、apply 和 bind【转载+翻译+整理】的更多相关文章
- 深入理解javascript原型和闭包(18)——补充:上下文环境和作用域的关系
本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事.本文就用一个小例子来说明一下,作用域和上下文环境绝对不是一回事儿. 再说明之前,咱们先用简单的语言来概括一下这两个的区别. 0 ...
- 深入理解javascript原型和闭包(17)——补充:上下文环境和作用域的关系
摘自:http://www.cnblogs.com/wangfupeng1988/p/4000798.html:作者:王福朋: 本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事 ...
- JavaScript 执行环境、作用域、内存管理及垃圾回收机制
前言 JavaScript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存. [原理]找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时间间隔( ...
- 【学习笔记】深入理解js原型和闭包(18)——补充:上下文环境和作用域的关系
本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事.本文就用一个小例子来说明一下,作用域和上下文环境绝对不是一回事儿. 再说明之前,咱们先用简单的语言来概括一下这两个的区别. 0 ...
- JavaScript的动态特性(通过eval,call,apply和bind来体现)
JavaScript的动态特性(通过eval,call,apply和bind来体现) JavaScript是一种基于面向对象的.函数式的.动态的编程语言.现在发展到已经可以用在浏览器和服务器端了. 这 ...
- 深度剖析Javascript执行环境、作用域链
一.执行环境 执行环境(也叫做执行上下文,Execution Context)是Javascript中最为重要的一个概念.执行环境定义了变量或函数有权访问其他数据,决定了它们各自的行为.每个执行环境都 ...
- 【原】javascript执行环境及作用域
最近在重读<javascript高级程序设计3>,觉得应该写一些博客记录一下学习的一些知识,不然都忘光啦.今天要总结的是js执行环境和作用域. 首先来说一下执行环境 一.执行环境 书上概念 ...
- JavaScript执行环境和作用域(链)的那些事
执行环境 什么是执行环境 提起作用域,我们不得不说说什么是执行环境.执行环境定义了变量或函数有权访问的其他数据,并决定其各自的行为.每一个执行环境都有一个对应的变量对象,这个对象的作用就是保存在环境中 ...
- JavaScript 执行环境以及作用域链
执行环境(execution context,为简单起见,有时也称为"环境")是 JavaScript 中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了它们 ...
随机推荐
- Java集合框架顶层接口collectiion接口
如何使用迭代器 通常情况下,你会希望遍历一个集合中的元素.例如,显示集合中的每个元素. 一般遍历数组都是采用for循环或者增强for,这两个方法也可以用在集合框架,但是还有一种方法是采用迭代器遍历集合 ...
- Java泛型中的标记符含义:
Java泛型中的标记符含义: E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) K - Key(键) V - Value(值) N - Number( ...
- Android 之窗口小部件高级篇--App Widget 之 RemoteViews
Android 之窗口小部件高级篇--App Widget 之 RemoteViews 在之前的一篇博文(Android 之窗口小部件详解--App Widget)中,已经介绍了App Widget的 ...
- lastlog
[root@li739-39 ~]# lastlogUsername Port From Latestroot pts/1 183.15.253.245 Thu Oct 29 05:57:29 +00 ...
- SugarCRM 插件介绍
[转自 陈沙克日志:http://hi.baidu.com/chenshake/item/5d76203fe6a598fede22219d]经常有朋友问关于sugar的插件,我这里就整理一下,不过其实 ...
- android studio# jdk8# class file for java.lang.invoke.MethodType not found
https://github.com/evant/gradle-retrolambda/issues/23 class file for java.lang.invoke.MethodType not ...
- .NET:枚举的默认值
.NET中的值类型默认都会设置为0,枚举也是如此,因此当你定义自己的枚举值类型且显式的指定了枚举值时,别忘记使用0,如果由于某种原因不能使用0,如使用了Flag标记,则别忘记在使用了枚举类型的构造方法 ...
- java.security.InvalidKeyException: Illegal key size aes解密失败
使用微信时定期提示:java.security.InvalidKeyException: Illegal key size和 com.qq.weixin.mp.aes.AesException: ae ...
- PHP获取指定函数定义在哪个文件中及行号
当调试开源的代码时,希望查看某个函数的定义,那么就需要定位其位置.特别是有的项目中,函数会有多个地方都有定义,那么如果我想知道当前调用的这个函数是在哪里定义的,可以用下面这个方法. function ...
- Chocolatey 简介(软件自动化管理工具)
一.Chocolatey 管理Windows软件的明智方法 1.建立在技术的无人值守安装和PowerShell.建立在技术的无人值守安装和PowerShell. 2.轻松管理Windows软件的所有方 ...