Javascript学习笔记之 函数篇(二) : this 的工作机制

 更新时间:2014年06月24日 09:48:07   投稿:hebedich  
与其他编程语言相比,Javascript 对 this 的使用是一套完全不同的机制。this 在五种情况下的值是各有不同的。

全局作用域下

this;
当在全局作用域中使用 this,它指向全局对象。
这里详细介绍下全局对象:

全局对象(Global object) 是在进入任何执行上下文之前就已经创建了的对象;
这个对象只存在一份,它的属性在程序中任何地方都可以访问,全局对象的生命周期终止于程序退出那一刻。
全局对象初始创建阶段将 Math、String、Date、parseInt 作为自身属性,等属性初始化,同样也可以有额外创建的其它对象作为属性(其可以指向到全局对象自身)。例如,在 DOM 中,全局对象的 window 属性就可以引用全局对象自身。
所以在 console 内输入 window 和 this.window 是一样的。

调用一个函数时

foo();
在这里,this 同样指向全局对象。

调用一个方法时

test.foo();

在这个例子中,this 将会指向 test 对象。

调用一个构造函数时

new foo();

一个函数在被调用时和关键字 new 一起使用,我们称之为构造函数。此时在函数内,this 指向新建的对象。

显式设置时

function foo(a, b, c) {}//

var bar = {};
foo.apply(bar, [1, 2, 3]); // array will expand to the below
foo.call(bar, 1, 2, 3); // results in a = 1, b = 2, c = 3

当使用 Function.prototype 的 apply 和 call 方法时,this 的值为显式设置为该方法的第一个参数。
因此,不同于调用一个函数时的规则,上例中 this 指向了 bar。

这里介绍下 call 和 apply 方法:

 call 方法:

语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。

 apply 方法

语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
在这里我们要注意一点,在对象的字面声明时,this 不能用来指向对象本身。如下:

var obj = {me: this}

这里,this 不会指向 obj,this 的应用只限于以上五种情形。

总结

尽管上述情形在大多时候是有意义的,但是第二种情形(即调用一个函数时)的 this 实际上是很少有用途的,这被认为是 Javascript 设计上的另一个错误。

Foo.method = function() {
  function test() {
    // this is set to the global object
  }
  test();
}

根据我们上面所述,这里的 this 将会指向全局对象,而不是 Foo 函数。
为了在 test 中获得指向 Foo 的途径,我们需要在 method 内部创建一个局部变量指向 Foo。

Foo.method = function() {
  var that = this;
  function test() {
    // Use that instead of this here
  }
  test();
}

that 只是普通的变量名,但是它经常被用来指向外部的 this。
还有一个比较有意思的地方与函数别名相关,即将一个方法赋值给一个变量时。

var test = someObject.methodTest;
test();

上例中,test 将会被当做一个普通函数看待,所以根据第二种情形(即调用一个函数时),其内部的 this 将会指向全局变量,而不是 someObject。
尽管,this 晚绑定初看上去是个不好的决定,但实际上这是原型式继承工作的基础。

function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();

此时,当 method 被调用时,它将指向 Bar 的实例对象。

相关文章

  • 浅谈Javascript中深复制

    浅谈Javascript中深复制

    本文主要给大家介绍了javascript中深复制的实现方式,这里推荐给有需要的小伙伴参考下。
    2014-12-12
  • JavaScript高级程序设计(第3版)学习笔记9 js函数(下)

    JavaScript高级程序设计(第3版)学习笔记9 js函数(下)

    函数是一种对象,拥有一般对象具有的所有特征,除了函数可以有自己的属性和方法外,还可以做为一个引用类型的值去使用,实际上我们前面的例子中已经有过将函数作为一个对象属性的值,又比如函数也可以作为另一个函数的参数或者返回值,异步处理中的回调函数就是一个典型的用法
    2012-10-10
  • JS中Date日期函数中的参数使用介绍

    JS中Date日期函数中的参数使用介绍

    本文为大家详细介绍下JS中Date日期函数中的参数在实际使用中的介绍,感兴趣的朋友不要错过
    2014-01-01
  • Javascript操作dom对象之select全面解析

    Javascript操作dom对象之select全面解析

    下面小编就为大家带来一篇Javascript操作dom对象之select全面解析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解

    JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解

    以前一直会三个函数的使用产生混淆,现在通过对三个函数的原型定义的理解,其实很容易记住三个函数。
    2010-04-04
  • Javascript valueOf 使用方法

    Javascript valueOf 使用方法

    返回指定对象的原始值。
    2008-12-12
  • 老生常谈JavaScript深拷贝与浅拷贝

    老生常谈JavaScript深拷贝与浅拷贝

    这篇文章主要为大家详细介绍了JavaScript的深拷贝与浅拷贝,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • javascript冒泡排序小结

    javascript冒泡排序小结

    冒泡排序由于比较简单和容易理解,往往会成为人们首先想到的排序算法。最基本的想法就是在一次里面比较两个数字,并且确保他们在移动到其他项目之前有一个正确的顺序。在每一关结束,有价值的“排序”到正确的位置,最终只留下其他项目排序。
    2016-04-04
  • JavaScript中的关联数组问题

    JavaScript中的关联数组问题

    这篇文章主要介绍了JavaScript中的关联数组问题的相关资料,需要的朋友可以参考下
    2015-03-03
  • InnerHtml和InnerText的区别分析

    InnerHtml和InnerText的区别分析

    InnerHtml和InnerText的区别分析小结
    2009-03-03

最新评论