js_vue中this的指向分类和详解

js中this指向

普通函数在全局或其他函数内被调用,this指向调用者(非严格模式)

function foo() {
  console.log(this)
}
foo() //等于window.foo(),调用者是window所以this指向window

// 在浏览器中，全局对象是window, 在NODE中是global
function test() {
  console.log(this) // Window 或者 global
  (function(){
     console.log(this) // Window 或者 global
  })
}
test() 

函数作为对象的参数被调用,函数this指向对象

const obj = {
  foo: foo
}
obj.foo()//调用者是obj所以this指向obj

setTimeout和setInterval指向window

setTimeout和setInterval是延迟执行,内部代码执行环境和所在函数环境是分离的

new指向实例

使用new 构造函数()模式,this会指向生成的实例

let a=new Foo();

箭头函数

箭头函数内部没有this所以bind,call,apply不能用于箭头函数,箭头函数内部this等于包裹箭头函数的第一个普通函数的this指向.

function a() {
  return () => {
    return () => {
      console.log(this)
    }
  }
}
console.log(a()()())

根据箭头函数this定义,this指向的是方法a,方法a是window调用的,所以箭头函数内部的this是window

bind,apply,call

bind,call,apply是将函数本身的this指向第一个参数,如果第一个参数为空,就是window

fn.bind(第一个参数也就是this的指向)
fn.call(第一个参数也就是this的指向,parma2,param3...)
fn.apply(第一个参数也就是this的指向,[parma2,parma3..])

混合优先级

实际开发中可能会遇到上述多个情况嵌套,这时this指向就根据优先级来确定
new>bind,apply,call>调用者
注意箭头函数的 this 一旦被绑定，就不会再被任何方式所改变。

vue中this指向

Vue——methods的this

methods普通函数this指向vue实例
methods箭头函数this等于父级函数this指向,不一定会按照我们想要的指向vue实例
methods使用map,forEach函数中this不一定指向vue实例,除非在第二个参数指定this

methods:{
   didi(){
      diData.forEach(function(){console.log(this,‘这里的this通过第二个参数指定,如不指定this不一定指向vue实例’},this)
  }
}

methods使用setTimeout,setInterval时,内部函数的this指向window

methods:{
   didi(){
      setTimeout(function(){console.log(this)//window},10)
  }
}