一文读懂 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 返回一个函数










评论