JavaScript中的隐式绑定和显式绑定与this关键字在不同上下文中的行为密切相关。理解这两个概念对于掌握JavaScript函数上下文至关重要。让我们分别讲解这两种绑定类型并通过示例来说明其工作机制。
隐式绑定
隐式绑定发生在函数的调用对象与其绑定时。这通常发生在方法调用中（函数作为对象的属性）。 使用点号表示法调用函数时，就会发生隐式绑定。
工作原理：
当在对象的上下文中调用方法（定义为对象属性的函数）时，就会发生隐式绑定。this的值隐式地绑定到调用该方法的对象。
示例1：
const person = { name: "sumit", greet: function() { console.log("hello, my name is " + this.name); }};person.greet(); // 输出: hello, my name is sumit
调用person.greet()时，this在greet函数内部隐式地指向person对象，因为person是调用该函数的对象。
示例2：
var movies = { genre: "action", moviegenre: function() { console.log(this.genre); }, nestedmovies: { genre: "romantic", moviegenre: function() { console.log(this.genre); } }};movies.nestedmovies.moviegenre(); // 输出: romanticmovies.moviegenre(); // 输出: action
显式绑定
显式绑定发生在您明确地告诉JavaScript this应该指向哪个对象时。
使用call()的显式绑定示例：
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 alicegreet.call(person2); // 输出: hello, my name is bob
call()方法用于立即调用函数，并将第一个参数作为this的值传递给该函数。
使用bind()的显式绑定示例：
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 john
bind()方法不会立即调用函数；它返回一个新的函数，并将this绑定到指定的对象。
使用apply()的显式绑定示例：
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 developer
apply()方法立即调用函数，将this设置为提供的对象，参数作为数组传递。 apply()类似于call()，但参数以数组的形式提供。
总结：
隐式绑定：自动发生，this指向调用该方法的对象。
显式绑定：使用call()、apply()或bind()方法手动设置this的值，从而控制this的指向。
在处理JavaScript函数上下文时，尤其是在传递函数或使用事件处理程序和回调时，理解这些概念至关重要。
以上就是JS中的隐式和显式绑定的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1501254.html
微信扫一扫 
支付宝扫一扫 
