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 sudoku 数独智力游戏生成代码
Mar 27 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
如何在 Vue 表单中处理图片
Jan 26 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
PHP 配置后台登录以及模板引入
2017/01/24 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
js实现简单页面全屏
2019/09/17 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
python实现多人聊天室
2020/03/31 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
医生个人年度总结
2015/02/28 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书