文档章节

JavaScript中的this如何使用

小微
 小微
发布于 2012/09/21 10:21
字数 670
阅读 191
收藏 6

每次见到JavaScript里的this时我都习惯性地把它和java里的this联系起来。java里的this是用来区别同名的类属性与形参的,继承中也有用,但是JavaScript里的this却不太相同。下面整理一下。

要明白this所指的内容,一定要牢记这句话“this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 window”(这是知乎里的涛吴的回答,我个人感觉很经典!)还有一句英文解释,也可以捎带记住“when a function of an object was called, the object will be passed into the execution context as this value”(这是知乎里杨志的回答),这句话阐明了this所指内容的一个变换过程。另外,js中还用call和apply来调用函数,所以考虑到这种情况,还应该记住下面这两句话(知乎里草依山的回答):

  1. 如果是call,apply,with,指定的this是谁,就是谁 
  2. 普通的函数调用,函数被谁调用,this就是谁

我们在使用this时尤其记得有的时候this会指向window,而不是我们所以为的this当前所处的函数里,因为this调用变量的时候一定分清它究竟调用的是哪个对象中的变量。

var foo = {
   whoami : "duh i am foo",
   bar : function(){
       var shit = this;
       return function(){
            console.log(shit.whoami);
            console.log(this);
       };
   }
};

baz = foo.bar();

//此时 baz 是一个脱离 foo.bar 而存在的函数,但是:
//baz() 会输出 duh i am foo 和 DOMWindow 。

另外,在阮一峰的博客中,也对this的用法分成了四种情况,似乎不如知乎上的回答更精炼,但是举得例子都挺好的。

  1. 情况一:纯粹的函数调用
    • 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。
  2. 情况二:作为对象方法的调用
    • 函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
  3. 情况三 作为构造函数调用
    • 所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。
  4. 情况四 apply调用
    • apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

参考资料:

1. JavaScript 中 this 是如何工作的?(知乎)

2. Javascript的this用法(阮一峰)

© 著作权归作者所有

下一篇: web网页标准
小微
粉丝 117
博文 78
码字总数 81696
作品 0
海淀
程序员
私信 提问
JavaScript 是如何工作的:JavaScript 的共享传递和按值传递

摘要: 原始数据类型和引用数据类型的副本作为参数传递给函数。 原文:JavaScript 是如何工作的:JavaScript 的共享传递和按值传递 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 ...

Fundebug
04/18
0
0
java 私塾课堂笔记——Javascript

java 私塾课堂笔记——Javascript 1:什么是Javascript JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 2:Java和Javascript的区别 (1)、基于对象和...

luodis
2011/04/27
499
0
React Native iOS混合开发实战教程

在做RN开发的时候通常离不了JS 和Native之间的通信,比如:初始化RN时Native向JS传递数据,JS调用Native的相册选择图片,JS调用Native的模块进行一些复杂的计算,Native将一些数据(GPS信息,...

JiaPengHui
2018/09/15
0
0
如何有效避免JS冲突

如何有效避免JS冲突,当你使用js写很多特效,或者使用网上流传的js插件时,都会引起或这或哪的页面不兼容的问题,当然也包括一些js冲突,很多人会做js调试用谷歌浏览器自带的开发者工具。但现...

恶魔岛
2015/10/16
153
2
JavaScript 是如何工作的:JavaScript 的内存模型

摘要: 从内存角度理解 let 和 const 的意义。 原文:JavaScript 是如何工作的:JavaScript 的内存模型 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及...

Fundebug
04/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【0911】linux软件包安装和卸载

【0911】linux软件包安装和卸载 一、安装软件包的三种方法 1、rpm工具:与win中的exe安装包类似,红帽子公司包管理系统 2、yum工具:属于一种用python开发的工具,支持自动的安装依赖的包 3、...

飞翔的竹蜻蜓
26分钟前
3
0
【外行学IT】手机网页自适应之rem和viewport

在写手机网页时,对于像素的问题会非常困惑,初学者很多时候会因为那么一个小点的问题解决不了,或者无法理解透彻就放弃了学习。 我在学习写手机网页时也困惑了许久,出现过下面的问题: 图片...

前端老手
37分钟前
5
0
三、Java设计模式之单一职责原则

定义:不要存在多于一个导致类变更的原因。 一个类、接口、方法只负责一项职责 优点:降低类的复杂度、提高类的可读性,提高系统的可维护性、降低变更引起的风险

东风破2019
44分钟前
4
0
搭建高可用MongoDB集群(分片)

搭建高可用MongoDB集群(分片) KaliArch关注1人评论28269人阅读2017-12-04 21:57:41 MongoDB基础请参考:https://blog.51cto.com/kaliarch/2044423 MongoDB(replica set)请参考:https:/...

linjin200
今天
6
0
Pandas DataFrame创建方法大全

Pandas是Python的数据分析利器,DataFrame是Pandas进行数据分析的基本结构,可以把DataFrame视为一个二维数据表,每一行都表示一个数据记录。本文将介绍创建Pandas DataFrame的6种方法。 创建...

汇智网教程
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部