JS中的this

2023-07-16 2023-12-21 379 words 2 minutes

Contents

箭头函数和普通函数中的this

const obj = {
    name: "Alice",
    ptr:this,
    sayName: function () {
        console.log(this)
    },
    sayNameArrow: () => {
        console.log(this)
    }
};

const sayName = obj.sayName;
const sayNameArrow = obj.sayNameArrow;

obj.sayName();
sayName();
obj.sayNameArrow();
sayNameArrow();

输出为

text

{name: 'Alice', ptr: Window, sayName: ƒ, sayNameArrow: ƒ}
demo1.js:5 Window {window: Window, self: Window, document: document, name: '', location: Location, …}
demo1.js:8 Window {window: Window, self: Window, document: document, name: '', location: Location, …}
demo1.js:8 Window {window: Window, self: Window, document: document, name: '', location: Location, …}

可见：

普通函数的this指向调用它的对象，如果在obj上调用它，既obj.sayName()，那么this就指向obj，如何在全局作用域调用它，既sayName()，那么this就指向全局对象window
箭头函数不提供this，它的this是捕获外部的this，在此处就相当于是捕获了obj.ptr，而obj内的this指向的是obj所在的作用域，也就是全局作用域，所以obj.sayNameArrow()和sayNameArrow()的this都指向全局对象window

如果尝试打印obj.ptr，会发现它在浏览器中就是window，也就是全局对象