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高亮效果的二种实现方法
Sep 14 Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 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编程每天必学之验证码
2016/03/03 PHP
AJAX的使用方法详解
2017/04/29 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
详解python基础之while循环及if判断
2017/08/24 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
2015新学期开学寄语
2015/02/26 职场文书
学生会辞职信
2015/03/02 职场文书
物业公司管理制度
2015/08/05 职场文书
八年级物理教学反思
2016/02/19 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang