深入浅出JavaScript之this

JavaScript中的this比较灵活,根据在不同环境下,或者同一个函数在不同方式调用下,this都有可能是不同的。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

下面是我的学习笔记,把它罗列成8种情况。

全局的this(浏览器)

全局作用域的this一般指向全局对象,在浏览器中这对象就是window,在node中这对象就是global。

一般函数的this(浏览器)

一般的函数声明或者函数表达式,直接调用函数的话,this依然指向全局对象,在浏览器中这对象就是window,在node中这对象就是global。

再举一个例子,看完就非常透彻了

为了证明this就是全局对象,对代码做一些改变:

运行结果还是1。再变一下:

但是在严格模式下,一般函数调用的时候this指向undefined,这也是node为什么要用严格模式的一个原因。

作为对象方法的函数的this

this作为对象方法来使用是比较常见的。

下面这个例子,我们创建了一个对象字面量o,o里面有个属性f,它的值是一个函数对象,把函数作为对象属性的值这种方式我们常常叫作对象的方法。作为对象的方法调用的时候,这时候this指向对象o

我们不一定要定义成函数字面量这样子的对象,像下面这种情况,我们只定义了一个对象o,如果直接调用independent()函数的话,this会指向window,但是我们通过赋值的方式,临时创建一个属性f,并指向函数对象的时候,我们仍然拿到了37。

所以并不是看函数是怎么创建的,而是只要将函数作为对象的方法去调用,this就会指向这个对象。

对象原型链上的this

下面这个例子中:我们先创建了一个对象o,里面有一个属性f,函数作为对象属性的值,我们通过Object.create(o)创建了一个对象p,p是一个空对象,它的原型会指向o,然后使用p.a = 1; p.b = 4创建对象p上的属性,那么我们调用原型上的方法时,this.a,this.b依然能取到对象p上的a和b。这里需要注意的是p的原型才是o,我们调用p.f(),调用的是原型链o上的属性f,原型链上的this可以拿到当前的对象p。

get/set方法与this

get/set方法中的this一般会指向get/set方法所在对象里面

构造函数中的this

用new把MyClass作为构造函数调用的话,this会指向空的对象,并且这个对象的原型会指向MyClass.prototype(可以看这篇文章对原型链的总结),但是调用的时候做了this.a = 37的赋值,所以最后this会作为返回值(没写return语句,或者return的是基本类型的话,会将this作为返回值),第二个例子return语句返回了对象,那么就会将a = 38作为返回值

call/apply方法与this

除了不同的调用方式外,函数对象有些方法能修改函数执行的this,比如call/apply。

call和apply基本上没差别,只不过call传参的方式是扁平的,而apply是把一个数组传进去。如下面这个例子

什么时候用call和apply呢?比如我们想调用Object.prototype.toString,但是我们想指定某个this的时候,那我们就可以就用Object.prototype.toString.call(this)这样子的方式来调用些无法直接调用的方法。如下面这个例子:

bind方法与this

bind方法是es5开始提供的,所以ie9+才支持

总结

做项目的时候才发现这些基础概念有多么的重要,如果不把它们逐个落实了,真的是一不小心就会掉进坑里。

原文发布于微信公众号 - java一日一条(mjx_java)

原文发表时间:2016-10-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马说编程

计算机程序的思维逻辑 (2) - 赋值

赋值 上节我们说了数据类型和变量,通过声明变量,每个变量赋予一个数据类型和一个有意义的名字,我们就告诉了计算机我们要操作的数据。 有了数据,我们能做很多操作。但...

2155
来自专栏Petrichor的专栏

python: list 操作

1234
来自专栏破晓之歌

如何创建对象以及jQuery中创建对象的方式(推荐)

在实际使用当中,字面量创建对象虽然很有用,但是它并不能满足我们的所有需求,我们希望能够能够和其他后台语言一样创建一个类,然后声明类的实例就能够多次使用,而不用每...

1372
来自专栏猿人谷

标准库类型

一.标准string类型     string类型支持长度可变的字符串,C++标准库将负责管理与存储字符相关的内存,以及提供各种有用的操作。 1.1 strin...

1948
来自专栏Laoqi's Linux运维专列

文件类型+变量+数值字符串

2096
来自专栏GreenLeaves

JavaScript引用类型之Array数组的toString()和valueof()方法的区别

一、转换方法 1、在JavaScript中几乎所有对象都具有toLocaleString()、toString和valueof()方法,因为,所有的对象都继承自...

2127
来自专栏mathor

1小时入门c++面向对象编程

这篇文章只适用于有 C 或 C++ 基础的人看,没有基础建议先去了解一下基础知识,我会结合之前我上课老师讲的内容,以及我自己的理解,有的放矢的讲,而且绝对不会掺...

841
来自专栏python3

python 内置函数

基本的数据操作基本都是一些数学运算(当然除了加减乘除)、逻辑操作、集合操作、基本IO操作,然后就是对于语言自身的反射操作,还有就是字符串操作。

1232
来自专栏Java帮帮-微信公众号-技术文章全总结

【Java提高三】三大特性-多态

【Java提高】三大特性-多态 面向对象编程有三大特性:封装、继承、多态。 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构...

3859
来自专栏锦小年的博客

python学习笔记7.3-内建模块collections

Python的内建模块collections为我们提供了一系列的优化操作,本质上就是元组、字典、集合、列表的特殊功能版。 1. namedtuple name...

2225

扫码关注云+社区

领取腾讯云代金券