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 相关文章推荐
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
手机号码,密码正则验证
Sep 04 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
详解ES6 系列之异步处理实战
Oct 26 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
Vue中Object.assign清空数据报错的解决方案
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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php中的三元运算符使用说明
2011/07/03 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
用jscript实现新建word文档
2007/06/15 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
理解Python中的With语句
2016/03/18 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python中bisect的使用方法
2019/12/31 Python
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
团员个人的自我评价
2013/12/02 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
歌剧魅影观后感
2015/06/05 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle