JavaScript scope作用域与this关键字

JavaScript也具有OO的特性
服务器君一共花费了114.618 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

作为一个程序员, 你可能早已经习惯于面向对象语言中指代当前对象的引用(或者指针), 如的c++中的this或者 python 中的self,当然具有OO属性( javascript 其实更多的是一种所谓的函数式语言)的 javascript 同样, 它也具有引用当前属性的对象的指针(或者引用), 也就是this关键字。

为了理解this关键字,如果你只想记住一句话,那应该是 this关键字总是指向当前函数的所有者对象(执行空间), 至于这句话如何理解, 可以参见下面的详细说明。

那么什么是 scope 呢?

wikipedia 中的解释是 In computer programming, scope is an enclosing context where values and expressions are associated。 中文即是所谓的 作用域, 它指明的是一个数值或者表达式所关联的上下文(能够被引用的执行空间)。

scope 与this有什么关系呢? 如果从上面的定义来看, this指向的总是当前引用此函数的对象,而当你要判断当前引用的对象时, 这时你就得弄清楚当前函数所在的 scope。 具体可见下面的分析。

this关键字

请看下面的几个例子。

一个 python 的例子:

class Person(object):
"""a person class
    """
def __init__(self, name):
self.name = name    #这里的self指向的是实例化后的对象,如下面中的Magic
def get_name(self):
return self.name
Magic = Person("Magic")
print Magic.name  

一个 javascript 的例子:

window.name = "Magic from window"
var get_name = function(){
	// this的具体指向只能在运行时才能确定,也就是确定运行时调用其的对象
	return this.name;   
};
// 输出Magic from window, get_name调用的对象为window
alert(get_name());  
var obj = {}
obj.name = "Magic from obj";
// 输出Magic from obj, 我们强制地使用了 apply来更改调用的对象,使其指向obj
alert(get_name.apply(obj)); 
var innerobj = {
	"name" : "Magic from innerobj"
};
innerobj.get_name = get_name;   // 使得innerobj的get_name方法指向了global scope的get_name函数
alert(innerobj.get_name()); // 输出Magic from innerobj, 此时this指向的是innerobj  

那么从上面的简单例子来看, this 总是在运行时才能确定其具体的指向, 也才能知道它的调用对象。而这点也正是动态语言一个重要特性。

那么如何确定当前this指向的引用对象呢?通常可以这样判断:

  1. 如果在global的scope(可以参见下面的说明来明确什么是global scope)来调用,则指向的是bowser的顶级对象window 例如: get_name()
  2. 如果, 有类似于这样的引用, innerobj。get_name() 则很显然this指向的是innerobj
  3. 如果我们使用了apply, call来进行强制的引用对象指向, 则也会很显然地指向强制的对象,如 get_name。apply(obj)。

关于apply和call

这2个关键字可以很简单地理解为 进行this引用对象(运行空间)强制转换, 二者的语法如下:

  • fun.call(object, arg1, arg2, ...)
  • fun.apply(object, [arg1, arg2, ...])

二者目的是相同的(动态更改函数的运行空间, 或者称作更改this指向的对象), 只是在提供给函数的参数上的调用方法不同.

示例代码如下:

var test_call_apply = function(name, gender, school){
alert(this.age + name + gender + school);
};
test_call_apply.call({age:24}, "Magic", "male", "ISCAS");
test_call_apply.apply({age:24}, ["Magic", "male", "ISCAS"]);  

scope详述

var global_scope = "I'm global";
var fun = function(){
var fun_scope = "I'm in fun scope";
return innerfun(){
var inner_func_scope = "I'm in the inner fun scope";
return global_scope + fun_scope + inner_func_scope; //此处的引用是重要的,请特别注意
};
};
alert(fun()());  

请注意上面的代码,其中:

  1. global_scope 它是global scope
  2. fun_scope 它是 位于一个函数的scope
  3. inner_func_scope 是一个位于一个函数内的函数的scope

你也可以继续内嵌函数, 那么会生成若干个scope。

于是有个问题出现了,为什么innerfun方法可以引用不在它自身scope的变量?

在回答这个问题之前,需要引入一个概念 scope chain。 所谓的 scope chain 是指 在 javascript 的代码中形成的一个具有优先顺序,相关的作用域的链。

以上面的代码为例,

  1. 对于global的scope而言,它会为自己建立一个global的scope chain(当然此时,这个链只有一个scope)。
  2. 对于fun函数的scope而言,它首先建立一个与global相同的scope chain,然后再加入自己的scope(此时,这个链有2个scope),类似于这样的结构: global==>fun
  3. 对于innerfun而言,除了fun函数所具有的链外,它还会加入自己的scope(当然,此时这个链有3个scope),类似于这样的结构:global==>fun==>innerfun

scope chain具有下面的特征:

  1. 有序
  2. 每当建立一个函数时,会自动生成一个scope并加入自己的scope chain中
  3. 这个chain类似于一种栈,在查找变量时总是先从顶端查起

上图的3个部分对应上面代码中的三个变量的scope,并且在对每个变量求值时,是按照图中的scope chain从上到下依次查找,找到即返回值或者直到穷举了scope chain返回undfined。

其实也很好理解,在计算某个表达式时,它会对自己的scope chain进行从上到下的查找,如果找到了它会立即返回这个值,如果找完了整个chain也没有找到,则返回undefined。

这个查找机制也就决定了,通常位于chain的前端的scope有更高的优先级。

例如 javascript 在计算 global_scope + fun_scope + inner_func_scope; 这个表达式时, 它会查找上面图示中的scope chain,从而确定出最后的结果。

一些说明

如果你弄清楚了上面的论述,应该说你对this关键字和scope已经具有完全的知识基础了,但是我们需要在实际中更好地使用和理解这些概念,这样才能把能力上升到别一个层次,这也即所谓的理论与实践的关系。

请看下面这个例子:

var change_color = function(){
this.style.color = "red";
};
window.onload = function(){
var text = document.getElementById("text");
text.onclick = change_color;    //此时this指向的是text这个对象(dom对象)
};
// 下面这行代码是在body中
//这点需要特别注意, inline script指向的是window,此处会无定义  
<span id="another" onclick="change_color()">My color will be changed2.</span> 

需要特别注意的是:

  1. inline event registration中的this并非指向的是自己的dom节点,而是global scope的window,这点可以从上面的例子中得到证明
  2. 这种inline event registration是不可取的,推荐的是 Unobtrusive JavaScript (处理逻辑和页面结构相分离)

javascript 是一种非常强大的动态语言,它是披着C语言外衣的函数式语言,如果你只当作它是一种类C的命令式语言,那么你的知识层次还过于低,而倘若你能够理解到javascript 的函数式语言本质,你在运用 javascript,理解 jQuery 及其它的库,甚至自己写一些 javascript 都会游刃有余的。

本文地址:http://www.nowamagic.net/librarys/veda/detail/1239,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1239

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《UNIX环境高级编程(第2版)》 史蒂文斯 (作者), 拉戈 (作者), 尤晋元 (译者), 张亚英 (译者), 戚正伟 (译者)

《UNIX环境高级编程(第2版)》是被誉为UNIX编程“圣经”的Advanced Programming in the UNIX Environment一书的更新版。在本书第1版出版后的十几年中,UNIX行业已经有了巨大的变化,特别是影响UNIX编程接口的有关标准变化很大。本书在保持了前一版的风格的基础上,根据最新的标准对内容进行了修订和增补,反映了最新的技术发展。书中除了介绍UNIX文件和目录、标准I/O库、系统数据文件和信息、进程环境、进程控制、进程关系、信号、线程、线程控制、守护进程、各种I/O、进程间通信、网络IPC、伪终端等方面的内容,还在此基础上介绍了多个应用示例,包括如何创建数据库函数库以及如何与网络打印机通信等。

更多计算机宝库...