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字符串函数扩展代码
Sep 13 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
Array of country list in PHP with Zend Framework
2011/10/17 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
javascript如何实现create方法
2019/11/04 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
超简单使用Python换脸实例
2019/03/27 Python
numpy 声明空数组详解
2019/12/05 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
iPython pylab模式启动方式
2020/04/24 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
党员年终民主评议的自我评价
2013/11/05 职场文书
副厂长岗位职责
2014/02/02 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
法人代表证明书范本
2015/06/18 职场文书
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android