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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
一个简单的js树形菜单
Dec 09 Javascript
javascript文本模板用法实例
Jul 31 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
JS数据类型STRING使用实例解析
Dec 18 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
Android interview questions
2016/12/25 面试题
战友聚会邀请函
2014/01/18 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
房地产项目建议书
2014/03/12 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
2015年实习单位评语
2015/03/25 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记