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 相关文章推荐
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
javascript函数特点实例分析
May 14 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
JS中如何优雅的使用async await详解
Oct 05 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
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
php生成图片缩略图的方法
2015/04/07 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
js数组去重的方法总结
2019/01/18 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python获取文件扩展名的方法
2015/07/06 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Django中信号signals的简单使用方法
2019/07/04 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
黄继光的英雄事迹材料
2014/02/13 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
研讨会致辞
2015/07/31 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL