一、this的介绍
this的值表示当前执行的环境对象,而与声明环境无关,所以this代表的对象要等函数运行。类似定义函数时的参数列表,只有在函数调用时才传入真正的对象。
this关键字虽然会根据环境变化,但它始终代表的是调用当前函数的对象。
二、this的绑定
- 默认绑定
默认绑定的字面意思就是,不满足其他的绑定方式,而执行的绑定规则。默认绑定会把this绑定到全局对象
- 隐式绑定(上下文绑定)
函数被调用的位置有上下文,或者是该函数的引用地址是被某个对象的属性引用,并通过对象的属性直接运行该函数。如果出现上述的情况,就会触发this的隐式绑定,this就会被绑定成当前对象
- 显示绑定
javascript,在Function的porpertype上提供了3个方法来强行修改this,分别是 call、apply、bind,大家经常用的莫过于call和apply了,这两个函数的第一个参数,都是需要执行函数绑定的this,对于apply只有连个参数,第二个参数是一个数组,这个数组是要传入执行函数的参数,而call可以跟很多参数,从第二个参数起都会被传入到要执行函数的参数中
- new绑定
使用new操作符调用 构造函数时会执行4步
-
- 创建一个全新的对象
- 对全新的对象的__proto__属性地址进行修改成构造函数的原型(prototype)的引用地址
- 构造函数的this被绑定为这个全新的对象
- 如果构造函数有返回值并且这个返回值是一个对象,则返回该对象,否则返回当前新对象
三、this的调用分类
根据函数的调用方式的不同,this 会指向不同的对象:
- 以函数的形式(包括普通函数、定时器函数、立即执行函数)调用时,this 的指向永远都是 window。比如fun();相当于window.fun();
- 以方法的形式调用时,this 指向调用方法的那个对象
- 以构造函数的形式调用时,this 指向实例对象
- 以事件绑定函数的形式调用时,this 指向绑定事件的对象
- 使用 call 和 apply 调用时,this 指向指定的那个对象
四、箭头函数的this指向问题
指向箭头函数定义时所处的对象,而不是箭头函数使用时所在的对象,默认使用父级的this,如果父作用域还是箭头函数,则继续向上找。
五、vue中涉及到的this指向问题
- data()中的this指向vue实例
- methods中的普通函数中this指向vue实例;箭头函数this指向其宿主对象的this;回调函数如果是普通函数指向window。
- 生命周期中的this指向vue实例
待完善。。。