揭秘JavaScript的函数继承利器——new、call、apply、bind
2023-10-29 23:56:53
JavaScript函数继承的利器
在JavaScript中，函数继承是一种常见且强大的技术，它允许我们创建新对象，并从现有对象继承属性和方法。实现函数继承有多种方式，其中new、call、apply和bind是最常用的四种方法。
new
new操作符是创建对象的最基本方式。当我们使用new来调用一个函数时，会发生以下几个步骤：
- 创建一个新的空对象。
- 将这个新对象设置为函数的this值。
- 执行函数体，并把this对象作为参数传递给函数。
- 返回this对象。
new操作符通常用于创建一个新对象，并将其赋值给一个变量。例如：
function Person(name, age) {
this.name = name;
this.age = age;
}
const person = new Person('John', 30);
在这个例子中，我们使用new操作符调用了Person函数，并创建了一个新的Person对象。这个新对象被赋值给person变量，我们可以使用person.name和person.age来访问它的属性。
call、apply和bind
call、apply和bind是函数的三个方法，它们允许我们以不同的方式调用函数。这三个方法都可以接受一个this值作为第一个参数，并将函数体作为第二个参数。
call
call方法直接调用函数，并将this值设置为第一个参数。例如：
function Person(name, age) {
this.name = name;
this.age = age;
}
const person = {};
Person.call(person, 'John', 30);
在这个例子中，我们使用call方法调用了Person函数，并将person对象设置为this值。这样，Person函数的this值就是person对象，我们可以使用person.name和person.age来访问它的属性。
apply
apply方法与call方法类似，但它接受一个参数数组作为第二个参数。例如：
function Person(name, age) {
this.name = name;
this.age = age;
}
const person = {};
Person.apply(person, ['John', 30]);
在这个例子中，我们使用apply方法调用了Person函数，并将一个包含两个元素的数组作为第二个参数。这个数组中的两个元素分别是'John'和30，它们被传递给Person函数作为参数。
bind
bind方法与call和apply方法不同，它不会立即调用函数，而是返回一个新的函数。这个新函数的this值被设置为bind方法的第一个参数。例如：
function Person(name, age) {
this.name = name;
this.age = age;
}
const person = {};
const boundFunction = Person.bind(person);
boundFunction('John', 30);
在这个例子中，我们使用bind方法将Person函数绑定到person对象上，并创建了一个新的函数boundFunction。这个新函数的this值是person对象，我们可以使用boundFunction('John', 30)来调用它。
总结
new、call、apply和bind是JavaScript函数继承的四种常用方法。它们都可以接受一个this值作为第一个参数，并将函数体作为第二个参数。
- new操作符用于创建一个新对象，并将其赋值给一个变量。
- call方法直接调用函数，并将this值设置为第一个参数。
- apply方法与call方法类似，但它接受一个参数数组作为第二个参数。
- bind方法与call和apply方法不同，它不会立即调用函数，而是返回一个新的函数。这个新函数的this值被设置为bind方法的第一个参数。
掌握这四种方法，可以让我们更加灵活地使用函数，并实现复杂的函数继承。
