this指向,你了解吗?

我心飞翔 分类:javascript

ES5中this指向问题?

  • ES5中的this指向的是函数在运行过程中生成的内部对象
  • 他指向的是运行时调用它的环境

(以下对于this的探讨基于非严格模式下,严格模式下的在无调用的情况下,this指向为undefined)

var name = "Jhon"
var obj = {
  name: 'lyy',
  fn: function(){
    console.log(this.name)
  }
}
var fn = obj.fn
fn() // Jhon
obj.fn() // lyy
 

fn()在执行的时候,没有对象调用它,那么他的运行环境对象就是全局对象window;

obj.fn() 在运行的时候,fn的调用对象为obj,所以this指向为obj对象,结果为上;

var name = "Jhon"
var obj = {
  name: 'lyy',
  fn: function(){
    return function(){
      console.log(this.name)
    }
  }
}
obj.fn()() // Jhon
 

obj.fn() 返回的是匿名函数,匿名函数的this指向全局对象Window

ES6中的this指向

  • 箭头函数没有自己的this
  • 箭头函数内部的this指向的是其上级也就是外层函数在定义时的this
  • 箭头函数没有arguments参数
  • 不可以使用new,否则会报错
  • 不可以使用yield,也不可以使用Generator函数

Es6中的箭头函数,他的this指向的是函数在定义时候的外层对象;

var name = "Jhon"
var obj = {
  name: 'lyy',
  fn:()=>{
    console.log(this.name)
  }
}
obj.fn() // 'Jhon
 

es6 中箭头函数的this在定义时候就确定好了, fn属于obj的方法,他的外层属于指向的是window,所以输出为Jhon

var name = "Jhon"
var obj = {
  name: 'lyy',
  fn:function(){
    console.log(this.name) // lyy 这里调用的对象为obj,为Es5函数,所以指向的是运行时
    return ()=>{
      console.log(this.name) //lyy  箭头函数指向的是定义时,他的外层对象为obj,所以为lyy
    }
  }
}
obj.fn()() 
 

总结

Es5中this指向的是运行时的对象, 谁调用它,它就指向谁;

Es6箭头函数中this指向的是定义时外层函数的对象;

作者:掘金-this指向,你了解吗?

回复

我来回复
  • 暂无回复内容