javascript中的作用域 (apply、call、.bind)
2012-03-01 10:50
141 查看
转载者:本文有助于理解JavaScript中作用域机制,this在不同情况下的具体所指,以及在事件绑定中和setTimeout中的作用域困惑以及解决技巧。
-----------------------------------------------------------------------------------------------------------------------------------------------
英文原文:
http://www.digital-web.com/articles/scope_in_javascript/
作用域(scope)是JavaScript语言的基石之一,在构建复杂程序时也可能是最令我头痛的东西。记不清多少次在函数之间传递控制后忘记 this关键字引用的究竟是哪个对象,甚至,我经常以各种不同的混乱方式来曲线救国,试图伪装成正常的代码,以我自己的理解方式来找到所需要访问的变量。
这篇文章将正面解决这个问题:简述上下文(context)和作用域的定义,分析可以让我们掌控上下文的两种方法,最后深入一种高效的方案,它能有效解决我所碰到的90%的问题。
我在哪儿?你又是谁
JavaScript 程序的每一个字节都是在这个或那个运行上下文(execution context)中执行的。你可以把这些上下文想象为代码的邻居,它们可以给每一行代码指明:从何处来,朋友和邻居又是谁。没错,这是很重要的信息,因为 JavaScript社会有相当严格的规则,规定谁可以跟谁交往。运行上下文则是有大门把守的社区而非其内开放的小门。
我们通常可以把这些社会边界称为作用域,并且有充足的重要性在每一位邻居的宪章里立法,而这个宪章就是我们要说的上下文的作用域链(scope chain)。在特定的邻里关系内,代码只能访问它的作用域链内的变量。与超出它邻里的变量比起来,代码更喜欢跟本地(local,即局部)的打交道。
具体地说,执行一个函数会创建一个不同的运行上下文,它会将局部作用域增加到它所定义的作用域链内。JavaScript通过作用域链的局部向全局攀升方式,在特定的上下文中解析标识符。这表示,本级变量会优先于作用域链内上一级拥有相同名字的变量。显而易见,当我的好友们一起谈论”Mike West”(本文原作者)时,他们说的就是我,而非
bluegrass singer 或是
Duke professor , 尽管(按理说)后两者著名多了。
让我们看些例子来探索这些含义:
这个例子建立了一个名为deep_thought的对象,设置其属性 the_answer为42,并创建了一个名为ask_question 的方法(method)。当deep_thought.ask_question()执行时, JavaScript为函数的呼叫建立了一个运行上下文,通过”.“运算符把this指向被引用的对象,在此是deep_thought这个对象。之后这个方法就可以通过this在镜子中找到它自身的属性,返回保存在 this.the_answer中的值:42。
构造函数
类似地,当定义一个作为构造器的使用new关键字的函数时,this可以用来引用刚创建的对象。让我们重写一个能反映这个情形的例子:
在这样的场合,我们并不通过new来提供上下文,也不会以某种对象形式在背后偷偷提供上下文。在此, this默认下尽可能引用最全局的东西:对于网页来说,这就是 window对象。
事件处理函数
比普通函数的呼叫更复杂的状况,先假设我们使用函数去处理的是一个onclick事件。当事件触发我们的函数运行,此处的this表示的是什么呢?不凑巧,这个问题不会有简单的答案。
如果我们写的是行内(inline)事件处理函数,this引用的是全局window对象:
复杂情况
让我们来短暂地运行一下这个最后的例子。我们需要询问deep_thought一个问题,如果不是直接运行click_handler而是通过点击按钮的话,那会发生什么事情?解决此问题的代码貌似十分直接,我们可能会这样做:
在这个例子中,我们首先定义了两个对象,first_object和second_object,它们分别有自己的num属性。然后定义了一个 multiply函数,它只接受一个参数,并返回该参数与this所指对象的num属性的乘积。如果我们呼叫函数自身,返回的答案极大可能是 undefined,因为全局window对象并没有一个num属性除非有明确的指定。我们需要一些途径来告诉multiply里面的this关键字应该引用什么。而multiply的call方法正是我们所需要的。
call的第一个参数定义了在业已执行的函数内this的所指对象。其余的参数则传入业已执行的函数内,如同函数的自身呼叫一般。所以,当执行 multiply.call(first_object, 5)时,multiply被呼叫,5传入作为第一个参数,而this关键字被设置为first_object的引用。同样,当执行 multiply.call(second_object, 5)时,5传入作为第一个参数,而this关键字被设置为second_object的引用。
apply以call一样的方式工作,但可以让你把参数包裹进一个数组再传递给呼叫函数,在程序性生成函数呼叫时尤为有用。使用apply重现上一段代码,其实区别并不大:
代码之所以有问题的理由很简单:call立即执行了函数(译注:其实可以用一个匿名函数封装,例如the_button.onclick = function(){deep_thought.ask_question.call(deep_thought);},但比起即将讨论的bind来,依然不够优雅)。我们给onclcik处理函数一个函数执行后的结果而非函数的引用。所以我们需要利用另一个JavaScript特色,以解决这个问题。
.bind()之美
我并不是 Prototype JavaScript framework
的忠实粉丝,但我对它的总体代码质量印象深刻。具体而言,它为Function对象增加一个简洁的补充,对我管理函数呼叫执行后的上下文产生了极大的正面影响:bind跟call一样执行相同的常见任务,改变函数执行的上下文。不同之处在于bind返回的是函数引用可以备用,而不是call的立即执行而产生的最终结果。
如果需要简化一下bind函数以抓住概念的重点,我们可以先把它插进前面讨论的乘积例子中去,看它究竟是如何工作的。这是一个相当优雅的解决方案:
漂亮。
-----------------------------------------------------------------------------------------------------------------------------------------------
英文原文:
http://www.digital-web.com/articles/scope_in_javascript/
作用域(scope)是JavaScript语言的基石之一,在构建复杂程序时也可能是最令我头痛的东西。记不清多少次在函数之间传递控制后忘记 this关键字引用的究竟是哪个对象,甚至,我经常以各种不同的混乱方式来曲线救国,试图伪装成正常的代码,以我自己的理解方式来找到所需要访问的变量。
这篇文章将正面解决这个问题:简述上下文(context)和作用域的定义,分析可以让我们掌控上下文的两种方法,最后深入一种高效的方案,它能有效解决我所碰到的90%的问题。
我在哪儿?你又是谁
JavaScript 程序的每一个字节都是在这个或那个运行上下文(execution context)中执行的。你可以把这些上下文想象为代码的邻居,它们可以给每一行代码指明:从何处来,朋友和邻居又是谁。没错,这是很重要的信息,因为 JavaScript社会有相当严格的规则,规定谁可以跟谁交往。运行上下文则是有大门把守的社区而非其内开放的小门。
我们通常可以把这些社会边界称为作用域,并且有充足的重要性在每一位邻居的宪章里立法,而这个宪章就是我们要说的上下文的作用域链(scope chain)。在特定的邻里关系内,代码只能访问它的作用域链内的变量。与超出它邻里的变量比起来,代码更喜欢跟本地(local,即局部)的打交道。
具体地说,执行一个函数会创建一个不同的运行上下文,它会将局部作用域增加到它所定义的作用域链内。JavaScript通过作用域链的局部向全局攀升方式,在特定的上下文中解析标识符。这表示,本级变量会优先于作用域链内上一级拥有相同名字的变量。显而易见,当我的好友们一起谈论”Mike West”(本文原作者)时,他们说的就是我,而非
bluegrass singer 或是
Duke professor , 尽管(按理说)后两者著名多了。
让我们看些例子来探索这些含义:
<mce:script type="text/javascript"><!-- var deep_thought = { the_answer: 42, ask_question: function () { return this.the_answer; } }; var the_meaning = deep_thought.ask_question(); // --></mce:script>
这个例子建立了一个名为deep_thought的对象,设置其属性 the_answer为42,并创建了一个名为ask_question 的方法(method)。当deep_thought.ask_question()执行时, JavaScript为函数的呼叫建立了一个运行上下文,通过”.“运算符把this指向被引用的对象,在此是deep_thought这个对象。之后这个方法就可以通过this在镜子中找到它自身的属性,返回保存在 this.the_answer中的值:42。
构造函数
类似地,当定义一个作为构造器的使用new关键字的函数时,this可以用来引用刚创建的对象。让我们重写一个能反映这个情形的例子:
<mce:script type="text/javascript"><!-- function test_this() { return this; } var i_wonder_what_this_is = test_this(); // --></mce:script>
在这样的场合,我们并不通过new来提供上下文,也不会以某种对象形式在背后偷偷提供上下文。在此, this默认下尽可能引用最全局的东西:对于网页来说,这就是 window对象。
事件处理函数
比普通函数的呼叫更复杂的状况,先假设我们使用函数去处理的是一个onclick事件。当事件触发我们的函数运行,此处的this表示的是什么呢?不凑巧,这个问题不会有简单的答案。
如果我们写的是行内(inline)事件处理函数,this引用的是全局window对象:
<mce:script type="text/javascript"><!-- function click_handler() { alert(this); // 弹出按钮的DOM节点 } function addhandler() { document.getElementById('thebutton').onclick = click_handler; } window.onload = addhandler; // --></mce:script> ... <button id='thebutton'>Click me!</button>
复杂情况
让我们来短暂地运行一下这个最后的例子。我们需要询问deep_thought一个问题,如果不是直接运行click_handler而是通过点击按钮的话,那会发生什么事情?解决此问题的代码貌似十分直接,我们可能会这样做:
<mce:script type="text/javascript"><!-- 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 // --></mce:script>
在这个例子中,我们首先定义了两个对象,first_object和second_object,它们分别有自己的num属性。然后定义了一个 multiply函数,它只接受一个参数,并返回该参数与this所指对象的num属性的乘积。如果我们呼叫函数自身,返回的答案极大可能是 undefined,因为全局window对象并没有一个num属性除非有明确的指定。我们需要一些途径来告诉multiply里面的this关键字应该引用什么。而multiply的call方法正是我们所需要的。
call的第一个参数定义了在业已执行的函数内this的所指对象。其余的参数则传入业已执行的函数内,如同函数的自身呼叫一般。所以,当执行 multiply.call(first_object, 5)时,multiply被呼叫,5传入作为第一个参数,而this关键字被设置为first_object的引用。同样,当执行 multiply.call(second_object, 5)时,5传入作为第一个参数,而this关键字被设置为second_object的引用。
apply以call一样的方式工作,但可以让你把参数包裹进一个数组再传递给呼叫函数,在程序性生成函数呼叫时尤为有用。使用apply重现上一段代码,其实区别并不大:
function addhandler() { var deep_thought = new BigComputer(42), the_button = document.getElementById('thebutton'); the_button.onclick = deep_thought.ask_question.call(deep_thought); }
代码之所以有问题的理由很简单:call立即执行了函数(译注:其实可以用一个匿名函数封装,例如the_button.onclick = function(){deep_thought.ask_question.call(deep_thought);},但比起即将讨论的bind来,依然不够优雅)。我们给onclcik处理函数一个函数执行后的结果而非函数的引用。所以我们需要利用另一个JavaScript特色,以解决这个问题。
.bind()之美
我并不是 Prototype JavaScript framework
的忠实粉丝,但我对它的总体代码质量印象深刻。具体而言,它为Function对象增加一个简洁的补充,对我管理函数呼叫执行后的上下文产生了极大的正面影响:bind跟call一样执行相同的常见任务,改变函数执行的上下文。不同之处在于bind返回的是函数引用可以备用,而不是call的立即执行而产生的最终结果。
如果需要简化一下bind函数以抓住概念的重点,我们可以先把它插进前面讨论的乘积例子中去,看它究竟是如何工作的。这是一个相当优雅的解决方案:
function addhandler() { var deep_thought = new BigComputer(42), the_button = document.getElementById('thebutton'); the_button.onclick = deep_thought.ask_question.bind(deep_thought); }
漂亮。
相关文章推荐
- JavaScript 上下文环境和作用域,以及 call、apply 和 bind【转载+翻译+整理】
- javascript中的作用域 (apply、call、.bind)
- JavaScript中的作用域 (apply、call、.bind)
- JavaScript:call,apply,bind的用法
- 深入浅出Javascript中apply、call和bind以及它们的妙用
- JavaScript中call,apply,bind方法的总结。
- 深入浅出妙用 Javascript 中 apply、call、bind
- JavaScript必知必会(十) call apply bind的用法说明
- javascript中apply、call和bind的区别
- Javascript中的Bind 、Call和Apply
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- javascript中函数的call,apply及bind方法
- javascript学习之this、apply、call、bind
- 深入理解JavaScript中的call、apply、bind方法的区别
- Javascript中apply、call、bind
- JavaScript之call,apply,bind方法的区别和共同点
- Javascript中apply、call、bind的区别
- JavaScript 之arguments、caller 和 callee、call、apply、bind介绍
- JavaScript的动态特性(通过eval,call,apply和bind来体现)
- javascript中apply、call和bind的区别