箭头函数中的this指向问题

最新推荐文章于 2023-03-15 10:36:34 发布

棉马咪

最新推荐文章于 2023-03-15 10:36:34 发布

阅读量633

点赞数

分类专栏： web前端文章标签： js javascript css

本文链接：https://blog.csdn.net/mianmami/article/details/121463411

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的`this`关键字在普通函数和箭头函数中的不同行为。在普通函数中，`this`指向调用它的对象，而在箭头函数中，`this`继承自父级作用域，不能通过`apply`、`call`或`bind`改变。通过示例展示了在对象方法和构造函数中使用这两种函数类型时的`this`指向，揭示了JavaScript中`this`行为的微妙之处。

摘要由CSDN通过智能技术生成

普通函数中的this, 谁调用就指向谁
箭头函数中的this，是父级作用域的this，而不是调用者
箭头函数中的this永远指向父级作用域的this，无法通过apply/call/bind来修改

例子1：
因为没有将箭头函数放置于一个新的函数中，所以箭头函数属于全局作用域
只有定义一个新的函数，才会开启一个新的作用域

let obj = {
    name: 'Mike',
    say: function(){
        console.log(this);
    },
    h1: ()=>{
        console.log(this);
    }
}
obj.say();
obj.h1();

输出结果：
在这里插入图片描述
例子2

function Person(){
    this.name = 'Mike';
    this.say=function(){
        console.log(this);
    }
    this.hi=()=>{
        console.log(this);
    }
}
let obj = new Person();
obj.say();
obj.hi();

输出结果：
在这里插入图片描述
例子3

function Person(){
    this.name = 'Mike';
    this.hi=()=>{
        console.log(this.name);
    }
}
let obj = new Person();
obj.hi();
obj.hi.call({name: "Amy"});