this的指向(包括vue中涉及到的this)

307 阅读3分钟

一、this的介绍

this的值表示当前执行的环境对象,而与声明环境无关,所以this代表的对象要等函数运行。类似定义函数时的参数列表,只有在函数调用时才传入真正的对象。

this关键字虽然会根据环境变化,但它始终代表的是调用当前函数的对象。

二、this的绑定

  1. 默认绑定

默认绑定的字面意思就是,不满足其他的绑定方式,而执行的绑定规则。默认绑定会把this绑定到全局对象

  1. 隐式绑定(上下文绑定)

函数被调用的位置有上下文,或者是该函数的引用地址是被某个对象的属性引用,并通过对象的属性直接运行该函数。如果出现上述的情况,就会触发this的隐式绑定,this就会被绑定成当前对象

  1. 显示绑定

javascript,在Function的porpertype上提供了3个方法来强行修改this,分别是 call、apply、bind,大家经常用的莫过于call和apply了,这两个函数的第一个参数,都是需要执行函数绑定的this,对于apply只有连个参数,第二个参数是一个数组,这个数组是要传入执行函数的参数,而call可以跟很多参数,从第二个参数起都会被传入到要执行函数的参数中

  1. new绑定

使用new操作符调用 构造函数时会执行4步

    • 创建一个全新的对象
    • 对全新的对象的__proto__属性地址进行修改成构造函数的原型(prototype)的引用地址
    • 构造函数的this被绑定为这个全新的对象
    • 如果构造函数有返回值并且这个返回值是一个对象,则返回该对象,否则返回当前新对象

三、this的调用分类

根据函数的调用方式的不同,this 会指向不同的对象:

  1. 以函数的形式(包括普通函数、定时器函数、立即执行函数)调用时,this 的指向永远都是 window。比如fun();相当于window.fun();
  1. 以方法的形式调用时,this 指向调用方法的那个对象
  1. 以构造函数的形式调用时,this 指向实例对象
  1. 以事件绑定函数的形式调用时,this 指向绑定事件的对象
  1. 使用 call 和 apply 调用时,this 指向指定的那个对象

四、箭头函数的this指向问题

指向箭头函数定义时所处的对象,而不是箭头函数使用时所在的对象,默认使用父级的this,如果父作用域还是箭头函数,则继续向上找。

五、vue中涉及到的this指向问题

  1. data()中的this指向vue实例
  2. methods中的普通函数中this指向vue实例;箭头函数this指向其宿主对象的this;回调函数如果是普通函数指向window。
  3. 生命周期中的this指向vue实例

待完善。。。