javascript中call方法中的"this"对象

21 浏览
0 Comments

javascript中call方法中的"this"对象

我创建了这些函数来检查每个函数中的 \"this\" 是什么，并想知道为什么使用 call 函数时，\"this\" 不是 \"test\" 对象？\n

function foo() {
        console.log("调用 foo：", this);
        bar();
    }
function bar() {
    // 为什么 "this" 不是 "test" 对象？
    console.log("调用 bar：", this);
}
function Test() {
}
var test = new Test();
foo.call(test);

0

1 答案

0 Comments

在Javascript中，每次函数调用都会根据函数的调用方式重新设置this的值。如果在foo()中使用foo.call(test)，那么this将会是test。

但是，在foo()内部调用bar()时，this的值会被重置为其默认值。

Javascript中的每个函数调用都会根据函数的调用方式设置新的this值。

例如，普通的函数调用bar()会将this的值设置为全局对象（如果不在严格模式下）或undefined（在严格模式下）。

总结一下，设置this值的方法有：

foo.call(test, ...);      // 将this设置为test
foo.apply(test, ...);     // 将this设置为test
obj.method();             // 将this设置为obj
var x = foo.bind(test);   
x();                      // 将this设置为test
var x = new foo();        // 创建一个新对象，并将this设置为新对象
foo();                    // this设置为全局对象或undefined（在严格模式下）

需要记住的是，根据上述规则，在Javascript中每次函数调用时，this的值都会被重置。它不会从先前的值中"继承"，而是根据函数调用的方式始终设置为新的值。这对于初学Javascript的人来说是一个常见的误解。

值得注意的是，回调函数在被调用时，可以通过在内部使用apply()或call()来将this的值设置为特定的值。例如：

function submitHandler(e) {
   // 在此函数中，this的值由addEventListener设置为处理事件的DOM对象
}
document.getElementById("submit").addEventListener("click", submitHandler);

此外，还可以参考以下相关内容：

When you pass 'this' as an argument

A Better Understanding of This

How does the "this" keyword work?

感谢您的回答！另外，我可以将结果与作用域链联系起来进行理解：如果执行foo.call(test)，那么在foo()中，this将是test，当在foo()中调用bar()时，由于test对象没有bar()方法，所以它会在作用域链中搜索，并在window对象中找到。作用域链（抱歉，我的英文不好，无法准确表达自己）。

0