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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
原生小程序封装跑马灯效果
Oct 21 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
实现树状结构的两种方法
2006/10/09 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
教你安装python Django(图文)
2013/11/04 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python简单商城购物车实例代码
2018/03/15 Python
Sanic框架路由用法实例分析
2018/07/16 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Python坐标线性插值应用实现
2019/11/13 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
建筑个人求职信范文
2014/01/25 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
我的梦想演讲稿
2014/04/30 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技