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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
JS中call和apply函数用法实例分析
Jun 20 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
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
简单讲解Python中的闭包
2015/08/11 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
XML文档面试题
2015/08/05 面试题
婚礼主持结束词
2014/03/13 职场文书
洗发水广告词
2014/03/13 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
教师个人师德总结
2015/02/06 职场文书
妈妈别哭观后感
2015/06/08 职场文书
运动会1000米加油稿
2015/07/21 职场文书
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python