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 IE和FF兼容性问题汇总
Feb 09 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
RequireJS用法简单示例
Aug 20 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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代码实现表单数据验证类
2015/07/28 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python Socket传输文件示例
2017/01/16 Python
Python变量类型知识点总结
2019/02/18 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python 字符串池化的前提
2020/07/03 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
教师推荐信范文
2013/11/24 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
同乡会致辞
2015/07/30 职场文书
办公室卫生管理制度
2015/08/04 职场文书
股东协议书范本2016
2016/03/21 职场文书