关注前端开发
关注用户体验

JS—-this指向(二)

箭头函数中this对象就是定义时所在的作用域,也就是说箭头函数本身没有this,内部的this就是外层代码块作用域中的this。

1、独立函数

var a = 0
var test = ()=> {
    var a = 1
    console.log(this.a)
}

test()  //0

该箭头函数在全局环境中定义,即this指向window

2、对象的方法

var a = 0
var obj = {
    a: 1,
    foo: ()=> {
        console.log(this.a)
    }
}

obj.foo()  //0

即:
var a = 0
var obj = new Object
obj.a = 1
obj.foo = ()=> {
    console.log(this.a)
}
obj.foo()

如上所示,foo在全局中定义,所以this指向window,那么如何使this指向obj?

根据上一篇介绍,当函数作为对象的方法调用时this指向该对象,可以这样改写:

var a = 0
function foo(){
    var func = () => {
        console.log(this.a)
    }
    return func
}
var obj = {
    a : 1,
    foo:foo
}
obj.foo()()  //1

func在foo调用时定义,此时的foo所在作用域为obj,因此this指向obj

3、构造函数,因箭头函数没有this,固不能用作构造函数,否则会报错

var foo = ()=> {
    console.log(this)
}
var boo = new foo()  //foo is not a constructor

4、bind/call

var a = 0

var func = ()=> {
    console.log(this.a)
}

var obj = {
    a: 1
}

func.call(obj)  //0

如上:func定义在全局,因此打印0,同对象方法,我们可以通过如下改写,打印出1

var a = 0

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

var obj = {
    a: 1
}

func.call(obj)() //1
赞(420)
未经允许不得转载:大前端 » JS—-this指向(二)
分享到: 更多 (0)

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #2

    招聘:web前端,
    薪 资:12k–30k人民币,具体根据实际工作能力,专业面试评级确定。
    工作地点:泰国
    福利:正规工作签证、包食宿、团建聚餐、节假日活动,带薪回国休假报销来回机票
    其他岗位:安卓、IOS、java开发,软件测试
    联系方式:QQ:2084458993、
    微信:TH0631280401
    泰国电话:+66 0631280401

    青青5天前回复
  2. #1

    从七月中旬开始做混合app,到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了,这期间遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,现在正准备开发一款旅游类的混合app,原型图已经出。现在准备开工了。同时,希望有一起做混合app的,有兴趣加qq群260548659一起讨论交流学习,爬坑,共同进步。

    show1周前 (02-20)回复

themebetter 国内更好的WordPress主题服务商

立即前往