Javascript基础进阶(七) call()，apply(

call,apply,bind是做什么的？

都是天生自带的方法（Function.prototype）,
所有的函数都可以调取这三个方法

一般用来指定this的环境！（改变this指向）
首先咱们复习一下之前学到的知识点：

// 1
var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b(); //undefined



// 2
var a = {
    user:"浮云先生",z
    fn:function(){
        console.log(this.user);
    }
}
a.fn(); //浮云先生

如果有不明白的同学请看第六章关于this指向。
但是有时候我们不得不将这个对象保存到另外的一个变量中，那么就可以通过以下方法：

1. call()

fn.call(context, para1, ...)
把fn函数执行，并且让fn函数中的this变为context，而para1和...是给fn传递的实参

var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this.user); //浮云先生
    }
}
var b = a.fn;
b.call(a);

通过在call方法，给第一个参数添加要把b添加到哪个环境中，简单来说，this就会指向那个对象。
call方法除了第一个参数以外还可以添加多个参数，如下：

var a = {
    user:"浮云先生",
    fn:function(s,ss){
        console.log(this.user); //浮云先生
        console.log(s+ss); //3
    }
}
var b = a.fn;
b.call(a,1,2);

2. apply（）

fn.apply(context, [para1, ...])
把fn函数执行，并且让fn函数中的this变为context，而para1和...是给fn传递的实参

var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this.user); //浮云先生
    }
}
var b = a.fn;
b.apply(a);

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var a = {
    user:"浮云先生",
    fn:function(s,ss){
        console.log(this.user); //浮云先生
        console.log(s+ss); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

注意：如果call和apply的第一个参数写的是null，那么this指向的是window对象

var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this); //Window 
    }
}
var b = a.fn;
b.apply(null);

3.bind()

bind方法和call、apply方法有些不同，不过他们都是用来改变this指向。

var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); // fn---> function() { [native code] }
c(); // ---> 浮云先生

实际上bind方法返回的是一个修改过后的函数.那我们赋值一个变量执行函数得到浮云先生。

同样bind也可以跟多个参数，如下：

var a = {
    user:"浮云先生",
    fn:function(e,d,f){
        console.log(this.user); //浮云先生
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

觉得写的不错的小伙伴点赞加关注哦！ (=・ω・=)