Javascript作用域原理 与 深入理解Javascript之this关键字

http://www.laruence.com/2009/05/28/863.htm

http://www.laruence.com/2009/09/08/1076.html

 

http://www.phpied.com/3-ways-to-define-a-javascript-class/

 

Javascript作用域原理

问题的提出

首先看一个例子:

1. var name = 'laruence';
2. function echo() {
3.      alert(name);
4.      var name = 'eve';
5.      alert(name);
6.      alert(age);
7. }
8.  
9. echo();

运行结果是什么呢?

上面的问题, 我相信会有很多人会认为是:

1. laruence
2. eve
3. [脚本出错]

因为会以为在echo中, 第一次alert的时候, 会取到全局变量name的值, 而第二次值被局部变量name覆盖, 所以第二次alert是’eve’. 而age属性没有定义, 所以脚本会出错.

但其实, 运行结果应该是:

1. undefined
2. eve
3. [脚本出错]

为什么呢?

JavaScript的作用域链

首先让让我们来看看Javasript(简称JS, 不完全代表JScript)的作用域的原理: JS权威指南中有一句很精辟的描述:　”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”　

为了接下来的知识, 你能顺利理解, 我再提醒一下, 在JS中:”一切皆是对象, 函数也是”.

在JS中，作用域的概念和其他语言差不多， 在每次调用一个函数的时候 ，就会进入一个函数内的作用域，当从函数返回以后，就返回调用前的作用域.

JS的语法风格和C/C++类似, 但作用域的实现却和C/C++不同，并非用“堆栈”方式，而是使用列表，具体过程如下(ECMA262中所述):
任何执行上下文时刻的作用域, 都是由作用域链(scope chain, 后面介绍)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.

看个例子:

1.      var func = function(lps, rps){
2.           var name = 'laruence';
3.           ........
4.      }
5.      func();

在执行func的定义语句的时候, 会创建一个这个函数对象的[[scope]]属性(内部属性,只有JS引擎可以访问, 但FireFox的几个引擎(SpiderMonkey和Rhino)提供了私有属性__parent__来访问它), 并将这个[[scope]]属性, 链接到定义它的作用域链上(后面会详细介绍), 此时因为func定义在全局环境, 所以此时的[[scope]]只是指向全局活动对象window active object.

在调用func的时候, 会创建一个活动对象(假设为aObj, 由JS引擎预编译时刻创建, 后面会介绍)，并创建arguments属性, 然后会给这个对象添加俩个命名属性aObj.lps, aObj.rps; 对于每一个在这个函数中申明的局部变量和函数定义, 都作为该活动对象的同名命名属性.

然后将调用参数赋值给形参数，对于缺少的调用参数，赋值为undefined。

然后将这个活动对象做为scope chain的最前端, 并将func的[[scope]]属性所指向的,定义func时候的顶级活动对象, 加入到scope chain.

有了上面的作用域链, 在发生标识符解析的时候, 就会逆向查询当前scope chain列表的每一个活动对象的属性，如果找到同名的就返回。找不到，那就是这个标识符没有被定义。

注意到, 因为函数对象的[[scope]]属性是在定义一个函数的时候决定的, 而非调用的时候, 所以如下面的例子:

1.      var name = 'laruence';
2.      function echo() {
3.           alert(name);
4.      }
5.  
6.      function env() {
7.           var name = 'eve';
8.           echo();
9.      }
10.  
11.      env();

运行结果是:

1. laruence

结合上面的知识, 我们来看看下面这个例子:

1. function factory() {
2.      var name = 'laruence';
3.      var intro = function(){
4.           alert('I am ' + name);
5.      }
6.      return intro;
7. }
8.  
9. function app(para){
10.      var name = para;
11.      var func = factory();
12.      func();
13. }
14.  
15. app('eve');

当调用app的时候, scope chain是由: {window活动对象(全局)}->{app的活动对象} 组成.

在刚进入app函数体时, app的活动对象有一个arguments属性, 俩个值为undefined的属性: name和func. 和一个值为’eve’的属性para;

此时的scope chain如下:

1. [[scope chain]] = [
2. {
3.      para : 'eve',
4.      name : undefined,
5.      func : undefined,
6.      arguments : []
7. }, {
8.      window call object
9. }
10. ]

当调用进入factory的函数体的时候, 此时的factory的scope chain为:

1. [[scope chain]] = [
2. {
3.      name : undefined,
4.      intor : undefined
5. }, {
6.      window call object
7. }
8. ]

注意到, 此时的作用域链中, 并不包含app的活动对象.

在定义intro函数的时候, intro函数的[[scope]]为:

1. [[scope chain]] = [
2. {
3.      name : 'laruence',
4.      intor : undefined
5. }, {
6.      window call object
7. }
8. ]

从factory函数返回以后,在app体内调用intor的时候, 发生了标识符解析, 而此时的sope chain是:

1. [[scope chain]] = [
2. {
3.      intro call object
4. }, {
5.      name : 'laruence',
6.      intor : undefined
7. }, {
8.      window call object
9. }
10. ]

因为scope chain中,并不包含factory活动对象. 所以, name标识符解析的结果应该是factory活动对象中的name属性, 也就是’laruence’.

所以运行结果是:

1. I am laruence

现在, 大家对”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”这句话, 应该有了个全面的认识了吧?

 

Javascript的预编译

我们都知道,JS是一种脚本语言, JS的执行过程, 是一种翻译执行的过程.
那么JS的执行中, 有没有类似编译的过程呢?

首先, 我们来看一个例子:

1.      <script>
2.      alert(typeof eve); //function
3.           function eve() {
4.                alert('I am Laruence');
5.           };
6.      </script>

诶? 在alert的时候, eve不是应该还是未定义的么? 怎么eve的类型还是function呢?

恩, 对, 在JS中, 是有预编译的过程的, JS在执行每一段JS代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式).
如上文所说, 在调用函数执行之前, 会首先创建一个活动对象, 然后搜寻这个函数中的局部变量定义,和函数定义, 将变量名和函数名都做为这个活动对象的同名属性, 对于局部变量定义,变量的值会在真正执行的时候才计算, 此时只是简单的赋为undefined.

而对于函数的定义,是一个要注意的地方:

1. <script>
2.      alert(typeof eve); //结果:function
3.      alert(typeof walle); //结果:undefined
4.      function eve() { //函数定义式
5.           alert('I am Laruence');
6.      };
7.      var walle = function() { //函数表达式
8.      }
9.      alert(typeof walle); //结果:function
10. </script>

这就是函数定义式和函数表达式的不同, 对于函数定义式, 会将函数定义提前. 而函数表达式, 会在执行过程中才计算.

说到这里, 顺便说一个问题 :

1.      var name = 'laruence';
2.      age = 26;

我们都知道不使用var关键字定义的变量, 相当于是全局变量, 联系到我们刚才的知识:

在对age做标识符解析的时候, 因为是写操作, 所以当找到到全局的window活动对象的时候都没有找到这个标识符的时候, 会在window活动对象的基础上, 返回一个值为undefined的age属性.

也就是说, age会被定义在顶级作用域中.

现在, 也许你注意到了我刚才说的: JS在执行每一段JS代码..
对, 让我们看看下面的例子:

1. <script>
2.      alert(typeof eve); //结果:undefined
3. </script>
4. <script>
5.      function eve() {
6.           alert('I am Laruence');
7.      }
8. </script>

明白了么? 也就是JS的预编译是以段为处理单元的…

 

揭开谜底

现在让我们回到我们的第一个问题:

当echo函数被调用的时候, echo的活动对象已经被预编译过程创建, 此时echo的活动对象为:

1. [callObj] = {
2. name : undefined
3. }

当第一次alert的时候, 发生了标识符解析, 在echo的活动对象中找到了name属性, 所以这个name属性, 完全的遮挡了全局活动对象中的name属性.

现在你明白了吧?

 

深入理解Javascript之this关键字

 

Javascript是一种很灵活的语言, 而This关键字又是灵活中的灵活, 但是因为它的灵活, 也注定了它的难用.

以前我用this的时候, 都会觉得不踏实, 老是担心它不知道怎么地就会指到另外的什么地方.

其实, 这都是因为, 我们对它的不了解.

刚好最近再给百度学院做《Javascript高级-作用域/原型链》的ppt, 而swit1983网友也刚好提这个问题, 索性就把这部分内容独立总结出来, 与大家分享.

首先, 我先抛出一个定论:”在Javascript中,This关键字永远都指向函数(方法)的所有者”.

函数

首先,让我们看看”函数”:

1. function introduce() {
2.      alert("Hello, I am Laruence\r\n");
3. }

对于,这个函数, this关键字指向谁呢?

如我之前的文章所述(Javascript作用域), 定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象.

这也就是为什么, 我把函数用引号引起来. 因为定义在全局的函数, 其实也就是window对象的一个方法.

所以,我们即可用通过函数名直接调用, 也可用通过window.方法名来调用, 这个时候, 方法中的this关键字指向它的所有者:window对象.

如果, 我们查看window的introduce属性, 就会得到:

1. var name = "I am Laruence";
2. function introduce() {
3.      alert(this.name);
4. }
5. alert(window.introduce);
6. /**
7. * output:
8. * function introduce() {
9. * alert(this.name);
10. * }
11. */

看了上面的代码, 也许你就会想到既然, 全局函数是window对象的方法, 全局变量是window对象的属性(Javasript作用域中已有述及), 那么,在全局函数中就可用通过this关键字来访问全局变量吧?

答案是肯定的, 如果调用introduce函数, 你就会认识我是Laruence.

事件处理函数

也许, 对于this关键字的迷惑, 绝大部分原因是来自把函数(方法)用在事件处理的时候.

1. <input id="name" type="text" name="name" value="Laruence" />

比如, 我们现在需要在点击”name”输入框的时候, 显示出name输入框的value. 那么, 可用写下如下代码:

1. function showValue() {
2.      alert(this.value);
3. }
4. document.getElementById('name').onclick = showValue;

上面的代码, 运行正常, 但是why? 不是说函数的this指针永远指向函数所有者么? 不是说全局变量的所有者是window对象么?

呵呵, 如果你能想到这个问题, 那说明你在认真的看我的文章, 否则,,我建议你从头看起, 否则看完了,你还是迷糊~

恩, 对, 对于上面的代码, showValue是定义在了全局对象, 那么看来问题只能发生在onclick事件绑定的时候了.

我们知道, 在Js中一切都是对象, 函数和方法也都是对象的属性, 只不过函数有可执行的内部属性. 所以, 对于上面的代码, 在对onclick绑定处理器的时候, 其实是对id为name的输入框Dom对象的onclick属性赋值.

也就是说, 我们把函数showValue Copy 给了name输入框对象的onclick属性. 如果我们查看此时的onclick:

1. function showValue() {
2.      alert(this.value);
3. }
4. document.getElementById('name').onclick = showValue;
5. alert(document.getElementById('name').onclick);
6. /**
7. * output
8. * function showValue() {
9. * alert(this.value);
10. * }
11. */

所以, 当事件触发的时候, 就会去调用name输入框的onclick方法, 这个时候,this关键字自然就指向的是name输入框了.

但是, 迷惑的事情就来了, 比如下面这种写法:

1. function showValue() {
2.      alert(this.value);
3. }
4. <input id="name" type="text" name="name" value="Laruence" onclick="showValue()"/>

就无法正常运行, 这又是为什么呢?

恩, 因为这个时候, 并不是赋值, 而是引用.

如果我们注意俩种onclick的写法, 你会发现, 对于之前的方法, 我们使用的是:

1. dom.onclick = showvalue; //没有调用符

而对于刚才的方法:

1. onclick = "showvalue()" //有调用符

这个也能侧面的反映出俩者的区别:对于前者,是赋值, 而对于后者是引用. 如果我们这个时候查看输入框的onclick属性,我们得到:

1. alert(dom.onclick);
2. /**
3. * output:
4. * function onclick() {
5. * showValue();
6. * }
7. */

看到区别了么? 也就懂得为什么了吧?

讲到这里, 有一个很有趣的例子 ,大家可以在IE下试试:

1. <img src="xxx" onerror="alert(1);} function hi() { alert(2); " />

改变this的指向

那, 既然我们已经知道为什么了, 那怎么才能让this指向我们想要指的地方呢?

对于上面的事件处理函数来说, 我们可以有如下几种写法:

1. dom.onclick = showValue();
2. dom.onclick = function() { alert(this.value) ;}
3. <input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.
4. dom.addEventListener(dom, showValue, false); //ff only

而对于不是事件处理函数的场合, 我们可以使用apply, 或者call, 来改变this关键字的指向.

比如:

1. var laruence = {
2.      name : 'laruence',
3.      age : 26,
4.      position : 'Senior PHP Engineer',
5.      company : 'Baidu.inc'
6. };
7.  
8. function introduce() {
9.      alert(this.name);
10. }
11.  
12. introduce.call(laruence);