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


Posted in Javascript onJune 24, 2014

全局作用域下

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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
JavaScript 撑出页面文字换行
Jun 15 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 #Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 #Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 #Javascript
js实现div闪烁原理及实现代码
Jun 24 #Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 #Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 #Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 #Javascript
You might like
3
2006/10/09 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
微信小程序提交form操作示例
2018/12/30 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
django序列化serializers过程解析
2019/12/14 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
python中的错误如何查看
2020/07/08 Python
Python如何定义接口和抽象类
2020/07/28 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
中国旅游网站:途牛旅游网
2019/09/29 全球购物
银行门卫岗位职责
2013/12/29 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
黄河绝恋观后感
2015/06/08 职场文书
详解SQL的窗口函数
2022/04/21 Oracle