JavaScript改变this指向的三种方法

在JavaScript中，可以使用call()、apply()或bind()来改变函数的this指向。

1.call(): 通过调用函数并传入新的上下文对象作为参数，将函数内部的this关键字指向该对象。示例代码如下所示

function greet(name) {console.log("Hello " + name);
}var person = {name: 'Alice'
};greet.call(person, 'Bob'); // 输出结果为："Hello Bob"

call() 可以改变函数内的this 指向，可以调用函数

    <script>function Person() {this.name = 'kobe';this.sex = '男';this.age = '41';}function Star(name,sex,age) {Person.call(this,name,sex,age);  //call 改变了this指向console.log(this.name);console.log(this.sex);console.log(this.age);}new Star();     // 实例化对象</script>

2.apply(): 与call()类似，也是通过调用函数并传入新的上下文对象作为参数，不同之处在于apply()接收一个包含多个参数的数组而非单个参数。示例代码如下所示：

function sum(a, b) {return a + b;
}console.log(sum.apply(null, [3, 5])); // 输出结果为：8

apply() 方法可以改变this指向，也会调用函数和 call() 不同点是 apply() 的参数必须是数组或者伪数组的形式

  <script>function Person() {this.name = 'kobe';this.sex = '男';this.age = '41';}function Star(arr) {console.log(this); // 这个this指向 Starconsole.log(arr);}Star.apply(Person,['科比']) // 改变this指向之后，变成指向Person ，且参数要是数组形式</script>

3.bind(): 创建一个新的函数，其this值被永久地设置为提供的对象。原始函数会保持不变。示例代码如下所示：

function greet(name) {console.log("Hello " + this.name + ", " + name);
}var person = {name: 'Alice'
};var boundFunc = greet.bind(person);
boundFunc('Bob'); // 输出结果为："Hello Alice, Bob"

bind() 方法可以改变this指向，但不会调用原来的函数，返回的是改变this指向之后的产生的新函数

   <script>function Person() {this.name = 'kobe';this.sex = '男';this.age = '41';}function Star(a,b) {console.log(this);console.log(a + b);}var fn = Star.bind(Person,1,3);  // 不会调用原来的函数，产生一个新的函数（this指向改变的新函数）fn();</script>