call丶apply丶bind

1.call方法

作用:

1)可以调用一个函数,与此同时,它还可以改变这个函数内部的this指向

首先我们先看代码

var obj = {
  name:'xiaoxin',
  age:22    
}

function fn1(a,b){
  console.log(this)
  console.log(this.name)
  console.log(a+b)      
}

fn1.call(obj,1,2)  //此代码表示将函数fn1的this指向obj

//输出结果:obj;xiaoxin;3

fn1()  //window

　　

由以上代码我们可以看出我们通过call方法改变了fn1的this指向,并且通过传参计算出了a+b的值

但是,后面我又重新调用了一遍fn1,打印出来的结果是window,这就说明了call只会临时改变一次函数的this指向,并不会永久改变

2)我们还可以用call来实现继承

function Father(name,age){
    this.name = name
    this.age = age          
}
function son(name.age){
    Father.call(this,name,age)  
    //通过这一步,将Father里面的this修改为son里的this;另外,给son加上相应的参数,让son    
      自动拥有Father的属性,最终实现继承
}

let son1 = new son('xiaoxin',22)
console.log(son1)   //打印结果:son{name:'xiaoxin',age:22}

　　

上方代码中,我们通过call()方法,让son继承了Father里面的name和age属性

我们再来看一个复杂点的代码

var Person1 = function () {
        this.name = "xiaoxin";
      };
      var Person2 = function () {
        this.getname = function () {
          console.log(this.  name);
        };
        Person1.call(this);   //这里的this是person2   ---  也就是person1对象代替this对象
      };
      var person = new Person2();
      person.getname();  //xiaoxin

　　

从上面我们看到,构造函数person通过getname方法拿到了person1中的name,因为在person2中,person1.call(this)的作用就是使用person1对象代替this对象,那么person2中就有了person1中的属性和方法了,相当于person2继承了person1中的属性和方法

2.apply方法

作用:可以调用一个函数,与此同时,它还可以改变这个函数内部的this指向,这一点与call()相似

首先我们先看代码

var obj = {
  name:'xiaoxin',
  age:22    
}
function fn(str){
    console.log(this)
    console.log(this.name)
    console.log(str)  
}
fn.apply(obj,['Hello!'])
//打印结果 : 
//  {name:'xiaoxin',age:22}
//  xiaoxin
//  Hello!

　　

上方代码中,apply()里面传实参时,需要以数组的形式.即便是传一个实参,也需要传数组

由以上我们可以分析出call()和apply()方法作用是相同的,唯一的区别在于,apply()里面传入的实参,必须是数组或伪数组

3.bind方法

作用:不会调用函数,但是可以改变函数内部的this指向

var obj = {
  name:'xiaoxin'  
}
function fn(){
  console.log(this.name)  
}
var fn1 = fn.bind(obj)
fn1()  //打印结果:xiaoxin

　　

上方代码中,bind方法不会立即执行,说明bind方法返回的是一个函数,需要我们自身去调用

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

总结:call和apply改变了函数的this后便立即执行该函数,而bind则返回的是一个函数,把call(),apply(),bind()方法做一下对比,我们会发现,实际开发中,bind()方法用的会比较频繁,因为,如果有些参数,我们不需要立即调用,但是又想改变这个函数内部的this指向,此时用bind()最为合适