this 指向

关注

发布于: 2021 年 03 月 30 日

ES5 中 this 指向问题？

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

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

var name = "Jhon"var obj = {  name: 'lyy',  fn: function(){    console.log(this.name)  }}var fn = obj.fnfn() // Jhonobj.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 指向的是定义时外层函数的对象；

发布于: 2021 年 03 月 30 日阅读数: 8

y

关注

还未添加个人签名 2019.08.05 加入

还未添加个人简介

发布

暂无评论

创作场景

this 指向

ES5 中 this 指向问题？

ES6 中的 this 指向

总结

y

评论