一文读懂 Js 中的 this 指向
前言
this
关键字是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。
简单说,this
就是属性或方法“当前”所在的对象。
上面代码中,this
就代表property
属性当前所在的对象。
下面是一个实际的例子。
上面代码中,this.name
表示name
属性所在的那个对象。由于this.name
是在describe
方法中调用,而describe
方法所在的当前对象是person
,因此this
指向person
,this.name
就是person.name
。
由于对象的属性可以赋给另一个对象,所以属性所在的当前对象是可变的,即this
的指向是可变的。
上面代码中,A.describe
属性被赋给B
,于是B.describe
就表示describe
方法所在的当前对象是B
,所以this.name
就指向B.name
。
只要函数被赋给另一个变量,this
的指向就会变。
上面代码中,A.describe
被赋值给变量f
,内部的this
就会指向f
运行时所在的对象(本例是顶层对象,在浏览器中就是 window),因此name
为全局name
的值。
实质
JavaScript 语言之所以有 this
的设计,跟内存里面的数据结构有关系。
上面的代码将一个对象赋值给变量obj
。JavaScript 引擎会先在内存里面,生成一个对象{ foo: 5 }
,然后把这个对象的内存地址赋值给变量obj
。也就是说,变量obj
是一个地址(reference)。后面如果要读取obj.foo
,引擎先从obj
拿到内存地址,然后再从该地址读出原始的对象,返回它的foo
属性。
原始的对象以字典结构保存,每一个属性名都对应一个属性描述对象。举例来说,上面例子的foo
属性,实际上是以下面的形式保存的。
注意,foo
属性的值保存在属性描述对象的value
属性里面。
这样的结构是很清晰的,问题在于属性的值可能是一个函数。
这时,引擎会将函数单独保存在内存中,然后再将函数的地址赋值给foo
属性的value
属性。
由于函数是一个单独的值,所以它可以在不同的环境(上下文)执行。
JavaScript 允许在函数体内部,引用当前环境的其他变量。
上面代码中,函数体里面使用了变量x
。该变量由运行环境提供。
现在问题就来了,由于函数可以在不同的运行环境执行,所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this
就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。
上面代码中,函数体里面的this.x
就是指当前运行环境的x
。this
就是指代当前运行在什么环境。
上面代码中,函数f
在全局环境执行,this.x
指向全局环境的x
;在obj
环境执行,this.x
指向obj.x
。
使用场合
this
主要有以下几个使用场合。
全局环境下
在浏览器全局环境下,
this
始终指向全局对象(window), 无论是否严格模式;
普通函数,非严格模式下,指向
window
。严格模式下,指向undefined
。
参考 前端进阶面试题详细解答
构造函数中
构造函数中的this
,指的是实例对象。
上面代码定义了一个构造函数Obj
。由于this
指向实例对象,所以在构造函数内部定义this.p
,就相当于定义实例对象有一个p
属性。
对象的方法中
如果对象的方法里面包含this
,this
的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变this
的指向。
但是,这条规则很不容易把握。请看下面的代码。
上面代码中,obj.foo
方法执行时,它内部的this
指向obj
。
但是,下面这几种用法,都会改变this
的指向。
上面代码中,obj.foo
就是一个值。这个值真正调用的时候,运行环境已经不是obj
了,而是全局环境,所以this
不再指向obj
。
可以这样理解,JavaScript 引擎内部,obj
和obj.foo
储存在两个内存地址,称为地址一和地址二。
obj.foo()
这样调用时,是从地址一调用地址二,因此地址二的运行环境是地址一,this
指向obj
。
但是,上面三种情况,都是直接取出地址二进行调用,这样的话,运行环境就是全局环境,因此this
指向全局环境。上面三种情况等同于下面的代码:
如果this
所在的方法不在对象的第一层,这时this
只是指向当前一层的对象,而不会继承更上面的层。
上面代码中,a.b.m
方法在a
对象的第二层,该方法内部的this
不是指向a
,而是指向a.b
,因为实际执行的是下面的代码。
数组方法中的 this
数组的map
和foreach
方法,允许提供一个函数作为参数。这个函数内部不应该使用this
。
上面代码中,foreach
方法的回调函数中的this
,其实是指向window
对象,因此取不到o.v
的值。原因跟上一段的多层this
是一样的,就是内层的this
不指向外部,而指向顶层对象。
解决这个问题的一种方法,就是前面提到的,使用中间变量固定this
。
另一种方法是将this
当作foreach
方法的第二个参数,固定它的运行环境。
或者使用 es6 的箭头函数。
原型链中 this
原型链中的方法的 this 仍然指向调用它的对象
以上代码,可以看出, 在 p 中没有属性 f,当执行 p.f()时,会查找 p 的原型链,找到 f 函数并执行,但这与函数内部 this 指向对象 p 没有任何关系,只需记住谁调用指向谁。
DOM 事件处理函数
事件处理函数内部的 this 指向触发这个事件的对象
setTimeout & setInterval
对于延时函数内部的回调函数的 this 指向全局对象 window(当然我们可以通过 bind 方法改变其内部函数的 this 指向)
箭头函数中的 this
由于箭头函数不绑定 this, 它会捕获其所在(即定义的位置)上下文的 this 值, 作为自己的 this 值,
所以
call() / apply() / bind()
方法对于箭头函数来说只是传入参数,对它的 this 毫无影响。考虑到 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略。(可以忽略是否在严格模式下的影响)
以上 this 指向 Person
以上代码 this 指向 window
this
的动态切换,固然为 JavaScript 创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把this
固定下来,避免出现意想不到的情况。JavaScript 提供了call
、apply
、bind
这三个方法,来切换/固定this
的指向。以下是绑定 this 的方法。
Function.prototype.call()
使用
函数实例的call
方法,可以指定函数内部this
的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。
上面代码中,全局环境运行函数f
时,this
指向全局环境(浏览器为window
对象);call
方法可以改变this
的指向,指定this
指向对象obj
,然后在对象obj
的作用域中运行函数f
。
call
方法的参数,应该是一个对象。如果参数为空、null
和undefined
,则默认传入全局对象。
上面代码中,a
函数中的this
关键字,如果指向全局对象,返回结果为123
。如果使用call
方法将this
关键字指向obj
对象,返回结果为456
。可以看到,如果call
方法没有参数,或者参数为null
或undefined
,则等同于指向全局对象。
注意:如果是严格模式或者 vue(vue 默认严格模式)中,传入 null 则指向 null,传入 window 则指向 window
如果call
方法的参数是一个原始值,那么这个原始值会自动转成对应的包装对象,然后传入call
方法。
上面代码中,call
的参数为5
,不是对象,会被自动转成包装对象(Number
的实例),绑定f
内部的this
。
参数
call
方法还可以接受多个参数。
call
的第一个参数就是this
所要指向的那个对象,后面的参数则是函数调用时所需的参数。
上面代码中,call
方法指定函数add
内部的this
绑定当前环境(对象),并且参数为1
和2
,因此函数add
运行后得到3
。
call
方法的一个应用是调用对象的原生方法。
上面代码中,通过 obj 对象继承Object
的hasOwnProperty
方法判断 obj 对象自身是没有 toString
这个方法的,hasOwnProperty
是obj
对象继承的方法,如果这个方法一旦被覆盖(这里的覆盖并不是覆盖了 Object 原型上的方法,而是在 obj 创建了与原型一样的方法,执行的时候优先调用自身的方法),就不会得到正确结果。call
方法可以解决这个问题,它将hasOwnProperty
方法的原始定义放到obj
对象上执行,这样无论obj
上有没有同名方法,都不会影响结果。
手动实现
实现思路:
改变 this 指向:可以将目标函数作为这个对象的属性
利用 arguments 类数组对象实现参数不定长
不能增加对象的属性,所以在结尾需要 delete
以下是手动实现方式:
以上代码:
当 myCall 没有传参的时候,做兼容,指向 window。
myCall 函数中 this 指向调用者,也就是执行 myCall 的函数,这里称之为 a 函数。
将 a 函数的引用赋值给 obj.fn,等同于 a 函数执行的时候,内部的 this 指向 obj。这里就实现了 this 的绑定。
将 a 参数使用 arguments 通过 slice 取出,当然,a 函数的参数是从第二位开始,因此是 slice(1)
执行 obj.fn 等同于执行 a 函数,返回结果也等同于 a 函数的返回结果,如果 a 函数有返回值,则 result 有值,反之则没有。
以下是执行结果:
myCall
改变了a
函数内的指向,指向obj
,x
相当于obj
是a
的实例,即obj
调用 a,a.myCall(obj, 1)
等价于obj.a(1)
因此打印 1+2+1=4
。
Function.prototype.apply()
apply
方法的作用与call
方法类似,也是改变this
指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数,使用格式如下。
apply
方法的第一个参数也是this
所要指向的那个对象,如果设为null
或undefined
,则等同于指定全局对象。第二个参数则是一个数组,该数组的所有成员依次作为参数,传入原函数。原函数的参数,在call
方法中必须一个个添加,但是在apply
方法中,必须以数组形式添加。
上面代码中,f
函数本来接受两个参数,使用apply
方法以后,就变成可以接受一个数组作为参数。
利用这一点,可以做一些有趣的应用。
将数组的空元素变为undefined
通过apply
方法,利用Array
构造函数将数组的空元素变成undefined
。
空元素与undefined
的差别在于,数组的forEach
方法会跳过空元素,但是不会跳过undefined
。因此,遍历内部元素的时候,会得到不同的结果。
当然,es6 可以使用扩展运算符实现。
转换类似数组的对象
另外,利用数组对象的slice
方法,可以将一个类似数组的对象(比如arguments
对象)转为真正的数组。
上面代码的apply
方法的参数都是对象,但是返回结果都是数组,这就起到了将对象转成数组的目的。从上面代码可以看到,这个方法起作用的前提是,被处理的对象必须有length
属性,以及相对应的数字键。
手动实现
其实 call 和 applay 之间的差别就是后面的传参
和 call 的区别就在于,以下代码传一个数组
Function.prototype.bind()
bind()
方法用于将函数体内的this
绑定到某个对象,然后返回一个新函数。
上面代码中,我们将d.getTime()
方法赋给变量print
,然后调用print()
就报错了。这是因为getTime()
方法内部的this
,绑定Date
对象的实例,赋给变量print
以后,内部的this
已经不指向Date
对象的实例了。
bind()
方法可以解决这个问题。
上面代码中,bind()
方法将getTime()
方法内部的this
绑定到d
对象,这时就可以安全地将这个方法赋值给其他变量了。
bind
方法的参数就是所要绑定this
的对象,下面是一个更清晰的例子。
上面代码中,counter.inc()
方法被赋值给变量func
。这时必须用bind()
方法将inc()
内部的this
,绑定到counter
,否则就会出错。
bind()
还可以接受更多的参数,将这些参数绑定原函数的参数。
上面代码中,bind()
方法除了绑定this
对象,还将add()
函数的第一个参数x
绑定成5
,然后返回一个新函数newAdd()
,这个函数只要再接受一个参数y
就能运行了。
注意:如果
bind()
方法的第一个参数是null
或undefined
,等于将this
绑定到全局对象,函数运行时this
指向顶层对象(浏览器为window
)。
bind()
方法有一些使用注意点。
每一次返回一个新函数
bind()
方法每运行一次,就返回一个新函数,这会产生一些问题。比如,监听事件的时候,不能写成下面这样。
上面代码中,click
事件绑定bind()
方法生成的一个匿名函数。这样会导致无法取消绑定,所以下面的代码是无效的。
正确的方法是写成下面这样:
结合回调函数使用
回调函数是 JavaScript 最常用的模式之一,但是一个常见的错误是,将包含this
的方法直接当作回调函数。解决方法就是使用bind()
方法,将counter.inc()
绑定counter
。
上面代码中,callIt()
方法会调用回调函数。这时如果直接把counter.inc
传入,调用时counter.inc()
内部的this
就会指向全局对象。使用bind()
方法将counter.inc
绑定counter
以后,就不会有这个问题,this
总是指向counter
。
还有一种情况比较隐蔽,就是某些数组方法可以接受一个函数当作参数。这些函数内部的this
指向,很可能也会出错。
上面代码中,obj.print
内部this.times
的this
是指向obj
的,这个没有问题。但是,forEach()
方法的回调函数内部的this.name
却是指向全局对象,导致没有办法取到值
解决这个问题,也是通过bind()
方法绑定this
。
结合call()
方法使用
利用bind()
方法,可以改写一些 JavaScript 原生方法的使用形式,以数组的slice()
方法为例。
上面的代码中,数组的slice
方法从[1, 2, 3]
里面,按照指定的开始位置和结束位置,切分出另一个数组。这样做的本质是在[1, 2, 3]
上面调用Array.prototype.slice()
方法,因此可以用call
方法表达这个过程,得到同样的结果。
call()
方法实质上是调用Function.prototype.call()
方法,因此上面的表达式可以用bind()
方法改写。
上面代码的含义就是:
call
方法是Function
原型上的方法,而slice
也是方法。因此,通过bind
改变call
的指向,指向slice
,slice
就相当于Function
的实例,call
是slice
实例下的一个方法,也就是将slice
变成call
方法所在的对象。当call
执行的时候,其实就等同于slice
调用了call
方法Array.prototype.slice.call
。
类似的写法还可以用于其他数组方法。
如果再进一步,将Function.prototype.call
方法绑定到Function.prototype.bind
对象,就意味着bind
的调用形式也可以被改写。
上面代码的含义就是:
通过
bind
改变call
的指向,指向bind
。也就是bind
成为了call
的实例,相当于bind
调用call
。因此,返回Function.prototype.bind.call
函数。
bind(f,o)
的含义是:调用Function.prototype.bind.call
函数,第一个参数是改变bind
指向,指向f
。第二个参数是bind
的参数。也就是f
调用了bind
函数,结果返回一个指向o
的f
函数。然后再加括号执行
bind(f,o)()
,就等于执行了指向o
的f
函数。最后打印结果的this
指向o
,因此打印出123
。
手动实现
同 call 和 applay 不同的是,bind 返回一个函数
评论