函数的内置方法

函数主要有 3 个内置方法——call()、apply() 和 bind()。它们主要用于改变 this 的默认指向，只是侧重点各不相同，接下来将分别介绍。

apply() 和 call()

apply() 方法和 call() 方法的作用完全一致，都会调用指定函数，并为该函数指定一个 this 对象（而不是默认以函数的拥有者作为 this），但区别在于向 apply() 方法传入参数值数组，而 call() 方法中以逗号分隔传入的多个参数。它们的调用方式如下。

函数名称.apply(要当作this的对象,参数数组);
函数名称.call(要当作this的对象,参数1,参数2,...,参数n);

示例代码如下。

let person1 = { name: "张三" };
let person2 = { name: "李四" };

function travel(from: string, to: string) {
    console.log(`${this.name}将从${from}出发到${to}旅游`);
}

//由于this是全局对象，全局对象尚未定义name属性，因此以下代码输出"undefined将从广州出发到上海旅游"
travel("广州", "上海");
//以下代码输出"张三将从广州出发到上海旅游"
travel.apply(person1, ["广州", "上海"]);
//以下代码输出"李四将从广州出发到上海旅游"
travel.call(person2, "广州", "上海");

bind()

bind() 是 ECMAScript 5 新增的一个方法，此方法的作用是根据当前函数创建一个新的函数实例，并为这个新的函数实例指定一个 this 对象，它的调用方式如下。

函数名称.bind(要当作this的对象)

示例代码如下。

let person1 = { name: "张三" };

function travel(from: string, to: string) {
    console.log(`${this.name}将从${from}出发到${to}旅游`);
}

let person1Traval = travel.bind(person1);
//以下代码输出"张三将从广州出发到上海旅游"
person1Traval("广州", "上海");
//bind只返回新的函数实例，不会改变旧的函数实例，以下代码依旧输出"undefined将从广州出发到上海旅游"
travel("广州", "上海");

无论是 apply()、call() 还是 bind() 方法，所传入的 this 只对当前函数有效，对函数中以正常形式调用的其他函数没有影响，示例代码如下。

let person1 = { name: "张三" };

function travel(from: string, to: string) {
    console.log(`${this.name}将从${from}出发到${to}旅游`);
    travel2();
}

function travel2() {
    console.log(`旅行人是${this.name}`);
}

let person1Traval = travel.bind(person1);
person1Traval("广州", "上海");
travel.apply(person1, ["广州", "上海"]);
travel.call(person1, "广州", "上海");

输出结果如下。

> 张三将从广州出发到上海旅游
> 旅行人是undefined
> 张三将从广州出发到上海旅游
> 旅行人是undefined
> 张三将从广州出发到上海旅游
> 旅行人是undefined

如果要使函数体内调用的其他函数具有相同的 this，那么需要以 apply()、call() 或 bind() 方法的形式调用其他函数，示例代码如下。

let person1 = { name: "张三" };

function travel(from: string, to: string) {
    console.log(`${this.name}将从${from}出发到${to}旅游`);
    travel2.call(this);
}

function travel2() {
    console.log(`旅行人是${this.name}`);
}

let person1Traval = travel.bind(person1);
person1Traval("广州", "上海");
travel.apply(person1, ["广州", "上海"]);
travel.call(person1, "广州", "上海");

输出结果如下。

> 张三将从广州出发到上海旅游
> 旅行人是张三
> 张三将从广州出发到上海旅游
> 旅行人是张三
> 张三将从广州出发到上海旅游
> 旅行人是张三