JS中函数的this大解析【笔记】

世界第一好人

于 2023-02-19 11:56:43 发布

阅读量122

点赞数

分类专栏：前端面经整理文章标签： javascript

本文链接：https://blog.csdn.net/qq_42533666/article/details/129109087

版权

前端面经整理专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章通过示例解释了JavaScript中this的指向规则，特别是箭头函数的不同之处。在不同函数调用方式下，this的值会有所变化，而箭头函数不具有自己的this，它会捕获其所在（即定义时）的作用域的this值。

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

体验下面的练习，就能理解 this 指向和箭头函数里面的 this 指向。

var name = "window"
var obj1 = {
    name: '1',
    fn1: function(){
        console.log(this.name)
        },
    fn2:() => console.log(this.name),
    fn3:function() {
        return function() {
        console.log(this.name)
            }
        },
    fn4:function() {
        return() => console.log(this.name)
            }
        }
    var obj2 = {
    name: '2'
}
obj1.fn1() //1
obj.fn1.call(obj2) //this指向obj2 2
obj1.fn2() //找父作用域里面的name 就是 window
obj1.fn2.call(obj2) //不支持显示绑定 还是 window
obj1.fn3()() //返回的函数是独立调用 所以this指向 window
obj1.fn3().call(obj2) //返回的函数显示绑定给了obj2 所以this指向obj2 2
obj.fn3.call(obj2)() //改变了父级作用域的this指向即指向obj2 但是内部函数还
是独立调用 即 window
obj1.fn4()() //this取决于父作用域fn4 即obj1 1
obj1.fn4().call(obj2) //返回箭头函数 不存在显示绑定 所以 1
obj1.fn4.call(obj2)() // 将箭头函数的父级作用域指向给了obj2 所以输出 2

深刻理解一下箭头函数的this：

// ES6
const obj = {
    getArrow() {
        return () => {
            console.log(this === obj);//箭头函数没有自己的this
        };
    }
}
//上述代码转化为es5
var obj = {
    getArrow: function getArrow() {
        var _this = this;
        return function () {
            console.log(_this === obj);
        };
    }
}