JavaScript中的隐式绑定和显式绑定与
关键字在不同上下文中的行为密切相关。理解这两个概念对于掌握JavaScript函数上下文至关重要。让我们分别讲解这两种绑定类型并通过示例来说明其工作机制。
隐式绑定
隐式绑定发生在函数的调用对象与其绑定时。这通常发生在方法调用中（函数作为对象的属性）。 使用点号表示法调用函数时，就会发生隐式绑定。
工作原理：
当在对象的上下文中调用方法（定义为对象属性的函数）时，就会发生隐式绑定。
的值隐式地绑定到调用该方法的对象。
示例1：
调用
时，
在
函数内部隐式地指向
对象，因为
是调用该函数的对象。
示例2：
显式绑定
显式绑定发生在您明确地告诉JavaScript
应该指向哪个对象时。
使用的显式绑定示例：
方法用于立即调用函数，并将第一个参数作为
的值传递给该函数。
使用的显式绑定示例：
方法不会立即调用函数；它返回一个新的函数，并将
绑定到指定的对象。
使用的显式绑定示例：
方法立即调用函数，将
设置为提供的对象，参数作为数组传递。
类似于
，但参数以数组的形式提供。
总结：
隐式绑定：自动发生，
指向调用该方法的对象。
显式绑定：使用
、
或
方法手动设置
的值，从而控制
的指向。
在处理JavaScript函数上下文时，尤其是在传递函数或使用事件处理程序和回调时，理解这些概念至关重要。
thisthisconst person = {
name: "sumit",
greet: function() {
console.log("hello, my name is " + this.name);
}
};
person.greet(); // 输出: hello, my name is sumitperson.greet()thisgreetpersonpersonvar movies = {
genre: "action",
moviegenre: function() {
console.log(this.genre);
},
nestedmovies: {
genre: "romantic",
moviegenre: function() {
console.log(this.genre);
}
}
};
movies.nestedmovies.moviegenre(); // 输出: romantic
movies.moviegenre(); // 输出: actionthiscall()function greet() {
console.log("hello, my name is " + this.name);
}
const person1 = { name: "alice" };
const person2 = { name: "bob" };
greet.call(person1); // 输出: hello, my name is alice
greet.call(person2); // 输出: hello, my name is bobcall()thisbind()const person = {
name: "john",
greet: function(greeting) {
console.log(greeting + ", my name is " + this.name);
}
};
const greetjohn = person.greet.bind(person, "hello");
greetjohn(); // 输出: hello, my name is johnbind()thisapply()const person = {
name: "Bob"
};
function introduce(age, occupation) {
console.log("My name is " + this.name + ", I am " + age + " years old and I am a " + occupation);
}
introduce.apply(person, [30, "developer"]);
// 输出: My name is Bob, I am 30 years old and I am a developerapply()thisapply()call()thiscall()apply()bind()thisthis