箭头函数的this-JavaScript中的this

在 JAVA或者PHP等面向对象的语言中，this 都是指向当前对象的。而在 JavaScript 中 this 会随着执行环境的改变而改变。

var person = {
  name:'张三',
  age:22,
  sayHi:function(){
    console.log(this)
    console.log(`你好，我是${this.name},今年${this.age}岁`)
  }
}

对象方法中的this箭头函数的this，指向的是调用方法的对象

此时 console this,打印的是 person 对象

person.sayHi();

如果我们把对象方法赋值给一个变量来调用呢

var sayHi = person.sayHi;
sayHi();

此时会输入 Window 你好，我是,今年undefined岁.

因为当我们 person.sayHi 赋值给 sayHi, 调用 sayHi() 是在全局下创业项目，此时 this 指向全局对象，所以找不到name和age

单独使用

console.log(this)  // Window

函数中使用

function f1(){
    "use strict";
    console.log(this)   // undefined
}
f1();

function f1(){
    console.log(this)   // Window
}
f1();

call

var man = {
  name:'李四',
  age:45,
}
person.sayHi.call(man);  // 你好，我是李四,今年45岁

输出 this 变成了 man 对象。

箭头函数中的this

箭头函数没有自己的this，箭头函数的this就是上下文中定义的this.

var name = 'JavaScript';
var book =  () => {
        console.log(this);
        console.log(this.name)
    }
book()

输出 JavaScript。

对于 book 函数箭头函数的this，它本身没有this值，而是使用外层的this。最外层的是 Window 对象。

注册会员查看全部内容……

限时特惠本站每日持续更新海量各大内部创业教程，年会员只要98元，全站资源免费下载
点击查看详情
站长微信：9200327

admin永久会员

收藏 海报 链接