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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 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
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP 断点续传实例详解
2017/11/11 PHP
心扬JS分页函数代码
2010/09/10 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
一个基于flask的web应用诞生(1)
2017/04/11 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
暑期教师培训方案
2014/06/07 职场文书
校长创先争优承诺书
2014/08/30 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python