Js改变this指向的三种方法以及区别

目录

call()方法

apply()方法

bind() 方法：预设this指向

三者的区别

---

call()方法

格式： 函数名.call(修改的this,参数1,参数2....);
参数： 
    第一个参数:传入该函数this指向的对象，传入什么强制指向什么
    第二个参数:将原函数的参数往后顺延一位。

var Person = {
    name: "zhangsan",
    age: 19
}
 
function fn(x, y) {
    console.log(x + "," + y);
    console.log(this);
    console.log(this.name);
}
 
fn(10, 11); //this指向window--10,11  window  空
 
fn.call(Person, 10, 11); //this指向Person--10,11  Person{}对象  zhangsan

apply()方法

格式： 函数名.apply(修改的this, 数组/伪数组);
参数： 
    第一个参数:传入该函数this指向的对象，传入什么强制指向什么
    第二个参数:数组,数组里面放入我们原有的参数

apply会自动遍历数组和伪数组,然后逐一传参

var Person = {
    name: "zhangsan",
    age: 19
}
 
function fn(x, y) {
    console.log(x + "," + y);
    console.log(this);
    console.log(this.name);
}
 
fn.apply(Person, [1, 2]); //this指向Person--1,2  Person{}对象  zhangsan

bind() 方法：预设this指向

格式：函数.bind(修改的this,参数...)()

bind不会立即执行函数,，然后返回一个新函数，此时这个新函数this已经指向新的位置了

var Person = {
    name: "zhangsan",
    age: 19
}
 
function fn(x, y) {
    console.log(x + "," + y);
    console.log(this);
    console.log(this.name);
}
 
fn.bind(Person, 1, 2); //只是更改了this指向，没有输出
fn.bind(Person, 3, 4)(); //this指向Person--3,4  Person{}对象  zhangsan

三者的区别

相同点 :

• (1)都可以修改this指向
• (2)三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window

不同点 :

• (1)传参方式不同 : call是单个传参, apply是数组/伪数组传参         
• (2)执行机制不同 : call和apply会立即执行函数, bind不会立即执行而是得到修改this的新函数