this的五种绑定方式
-
「默认绑定」：
默认绑定是指在独立函数调用时，this 会绑定到全局对象（在浏览器环境中是 window，在 Node.js 环境中是 global）。在严格模式下，默认绑定会将 this 绑定到 undefined。
function sayHello() {
console.log(this);
}
sayHello(); // 在浏览器中：window，Node.js 中：global 或 undefined（严格模式）
2.「隐式绑定」：
当函数作为对象的方法被调用时，this 会绑定到调用该方法的对象。
const person = {
name: "Alice",
sayHello: function() {
console.log(`Hello, my name is ${this.name}.`);
}
};
person.sayHello(); // "Hello, my name is Alice."
-
「显式绑定」:
通过 call、apply 或 bind 方法，可以显式地指定函数调用时的 this 值。
function sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
const person1 = { name: "Alice" };
const person2 = { name: "Bob" };
sayHello.call(person1); // "Hello, my name is Alice."
sayHello.apply(person2); // "Hello, my name is Bob."
const sayHelloToPerson1 = sayHello.bind(person1);
sayHelloToPerson1(); // "Hello, my name is Alice."
4.「new 绑定」:
当一个函数被用作构造函数来创建对象时，this 会绑定到正在创建的新对象。
function Person(name) {
this.name = name;
}
const person = new Person("Bob");
console.log(person.name); // "Bob"
-
「箭头函数绑定」:
箭头函数的 this 值在函数创建时就已经确定，并且会捕获外部函数的 this 值。
const obj = {
prop: "value",
getProp: function() {
return () => {
console.log(this.prop); // "value"
};
}
};
const func = obj.getProp();
func();
原文始发于微信公众号（前端大大大）：JavaScript this解析
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/174187.html
