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 版本自动生成文章摘要
Jul 23 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
Javascript函数的参数
Jul 16 Javascript
JavaScript SHA512&SHA256加密算法详解
Aug 11 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
Move.js入门
Feb 08 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 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取进制余数函数代码
2012/01/19 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python 批量修改/替换数据的实例
2018/07/25 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
快速查找Python安装路径方法
2020/02/06 Python
Python进行统计建模
2020/08/10 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
机电一体化专业应届本科生求职信
2013/09/27 职场文书
企业文化建设实施方案
2014/03/22 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
幼儿教师求职信
2014/05/24 职场文书
校园文化标语
2014/06/18 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书