JavaScript中的call、apply、bind深入理解

文章转自 ： https://www.jianshu.com/p/00dc4ad9b83f；

一、函数的三种角色

---

首先要先了解在函数本身会有一些自己的属性，比如：

• length：形参的个数；
• name：函数名；
• prototype：类的原型，在原型上定义的方法都是当前这个类的实例的公有方法；
• __proto__：把函数当做一个普通对象，指向Function这个类的原型

函数在整个JavaScript中是最复杂也是最重要的知识，对于一个函数来说，会存在多种角色：

function Fn() {
    var num = 500;
    this.x = 100;
}
Fn.prototype.getX = function () {
    console.log(this.x);
}
Fn.aaa = 1000;

var f = new Fn;

f.num // undefined
f.aaa // undefined
var res = Fn(); // res是undefined  Fn中的this是window

• 角色一：普通函数，对于Fn而言，它本身是一个普通的函数，执行的时候会形成私有的作用域，然后进行形参赋值、预解析、代码执行、执行完成后内存销毁；

• 角色二：类，它有自己的实例，f就是Fn作为类而产生的一个实例，也有一个叫做prototype的属性是自己的原型，它的实例都可以指向自己的原型；

• 角色三：普通对象，Fn和 var obj = {} 中的obj一样，就是一个普通的对象（所有的函数都是Function的实例），它作为对象可以有一些自己的私有属性，也可以通过__proto__找到Function.prototype；

二、call深入

---

2.1、call的基本使用

var ary = [12, 23, 34];
ary.slice();

 

以上两行简单的代码的执行过程为：ary这个实例通过原型链的查找机制找到Array.prototype上的slice方法，让找到的slice方法执行，在执行slice方法的过程中才把ary数组进行了截取。

注意：slice方法执行之前有一个在原型上查找的过程（当前实例中没有找到，再根据原型链查找）。

当知道了一个对象调用方法会有一个查找过程之后，我们再看：

var obj = {name:'iceman'};
function fn() {
    console.log(this);
    console.log(this.name);
}
fn(); // this --> window
// obj.fn(); // Uncaught TypeError: obj.fn is not a function
fn.call(obj);

 

call方法的作用：首先寻找call方法，最后通过原型链在Function的原型中找到call方法，然后让call方法执行，在执行call方法的时候，让fn方法中的this变为第一个参数值obj，最后再把fn这个函数执行。

2.2、call方法原理

模拟Function中内置的call方法，写一个myCall方法，探讨call方法的执行原理

function sum() {
    console.log('---------------sum')
    console.log(this);
}
function fn() {
    console.log('---------------fn')
    console.log(this);
}
var obj = {name: 'iceman'};
var obj2 = {name: 'year'}
Function.prototype.myCall = function (context) {
    console.group("prototype")
    //在这里只是声明一个函数，并没有调用，即 function sum(){ console.log('---------------sum')  console.log(this);}
    eval(this.toString().replace("this", "context"))
    //在这里提取出函数名，并调用
    eval(this.toString().split("{")[0].replace("function", ""))
    console.groupEnd()
};
fn.myCall(obj);
sum.myCall(obj2);

 

2.3、call方法经典例子

function fn1() {
    console.log(1);
}
function fn2() {
    console.log(2);
}

 

2.3.1、输出一

fn1.call(fn2); // 1

首先fn1通过原型链查找机制找到Function.prototype上的call方法，并且让call方法执行，此时call这个方法中的this就是要操作的fn1。在call方法代码执行的过程过程中，首先让fn1中的“this关键字”变为fn2，然后再让fn1这个方法执行。

注意：在执行call方法的时候，fn1中的this的确会变为fn2，但是在fn1的方法体中输出的内容中并没有涉及到任何和this相关的内容，所以还是输出1.

2.3.2、输出二

fn1.call.call(fn2); // 2

首先fn1通过原型链找到Function.prototype上的call方法，然后再让call方法通过原型再找到Function原型上的call（因为call本身的值也是一个函数，所以同样可以让Function.prototype），在第二次找到call的时候再让方法执行，方法中的this是fn1.call，首先让这个方法中的this变为fn2，然后再让fn1.call执行。

这个例子有点绕了，不过一步一步来理解。在最开始的时候，fn1.call.call(fn2) 这行代码的最后一个call中的this是fn1.call，根据前面的理解可以知道 fn1.call 的原理大致为：

Function.prototype.call = function (context) {
    // 改变fn中的this关键字
    // eval(....);
    
    // 让fn方法执行
    this(); // 此时的this就是fn1
};

将上面的代码写为另一种形式：

Function.prototype.call = test1;
function test1 (context) {
    // 改变fn中的this关键字
    // eval(....);
    
    // 让fn方法执行
    this(); // 此时的this就是fn1
};

我们知道，这两种形式的写法的作用是一样的。那么此时可以将 fn1.call.call(fn2) 写成 test1.call(fn2) ，call中的的this就是test1：

Function.prototype.call = function (context) {
    // 改变fn中的this关键字
    // eval(....);
    
    // 让fn方法执行
    this(); // 此时的this就是test1
};

注意：此时call中的的this就是test1。

然后再将call中this替换为fn2，那么test1方法变为：

Function.prototype.call = function (context) {
    // 省略其他代码
    
    fn2(); 
};

所以最后是fn2执行，所以最后输出2。

 

三、call、apply、bind的区别

---

首先补充严格模式这个概念，这是ES5中提出的，只要写上：

"use strict"

就是告诉当前浏览器，接下来的JavaScript代码将按照严格模式进行编写。

function fn() {
    console.log(this);
}
fn.call(); // 普通模式下this是window，在严格模式下this是undefined
fn.call(null); // 普通模式下this是window，在严格模式下this是null
fn.call(undefined); // 普通模式下this是window，在严格模式下this是undefined

 

apply方法和call方法的作用是一模一样的，都是用来改变方法的this关键字，并且把方法执行，而且在严格模式下和非严格模式下，对于第一个参数是null/undefined这种情况规律也是一样的，只是传递函数的的参数的时候有区别。

function fn(num1, num2) {
    console.log(num1 + num2);
    console.log(this);
}
fn.call(obj , 100 , 200);
fn.apply(obj , [100, 200]); 

 

call在给fn传递参数的时候，是一个个的传递值的，而apply不是一个个传的，而是把要给fn传递的参数值同一个的放在一个数组中进行操作，也相当于一个个的给fn的形参赋值。

bind方法和apply、call稍有不同，bind方法是事先把fn的this改变为我们要想要的结果，并且把对应的参数值准备好，以后要用到了，直接的执行即可，也就是说bind同样可以改变this的指向，但和apply、call不同就是不会马上的执行。

var tempFn = fn.bind(obj, 1, 2);
tempFn();

 

第一行代码只是改变了fn中的this为obj，并且给fn传递了两个参数值1、2，但是此时并没有把fn这个函数给执行，执行bind会有一个返回值，这个返回值tempFn就是把fn的this改变后的那个结果。

注意：bind这个方法在IE6~8下不兼容。

四、call、apply的应用

---

4.1、求数组的最大值和最小值

定义一个数组：

var ary = [23, 34, 24, 12, 35, 36, 14, 25];

 

4.1.1、排序再取值法

首先先给数组进行排序（小--->大），第一个和最后一个就是我们想要的最小值和最大值。

var ary = [23, 34, 24, 12, 35, 36, 14, 25];
ary.sort(function (a, b) {
    return a - b;
});
var min = ary[0];
var max = ary[ary.length - 1];
console.log(min, max);

 

4.1.2、假设法

假设当前数组中的第一个值是最大值，然后拿这个值和后面的项逐一进行比较，如果后面某一个值比假设的还要打，说明假设错了，我们把假设的值进行替换.....

var max = ary[0], min = ary[0];
for (var i = 1; i < ary.length; i++) {
    var cur = ary[i];
    cur > max ? max = cur : null;
    cur < min ? min = cur : null;
}
console.log(min, max);

 

4.1.3、Math中的max/min方法实现（通过apply）

直接使用Math.min

var min = Math.min(ary);
console.log(min); // NaN
console.log(Math.min(23, 34, 24, 12, 35, 36, 14, 25));

 

直接使用Math.min的时候，需要把待比较的那堆数一个个的传递进去，这样才可以得到最后的记过，一下放一个ary数组进去是不可以的。

尝试：使用eval

var max = eval("Math.max(" + ary.toString() + ")");
console.log(max);
var min = eval("Math.min(" + ary.toString() + ")");
console.log(min);

 

"Math.max(" + ary.toString() + ")" --> "Math.max(23,34,24,12,35,36,14,25)"首先不要管其他的,先把我们最后要执行的代码都变为字符串,然后把数组中的每一项的值分别的拼接到这个字符串中。

eval：把一个字符串变为JavaScript表达式执行
例如：eval("12+23+34+45") // 114

通过apply调用Math中的max/min

var max = Math.max.apply(null, ary); 
var min = Math.min.apply(null, ary);
console.log(min, max);

 

在非严格模式下，给apply的第一个参数为null的时候，会让max/min中的this指向window，然后将ary的参数一个个传给max/min。

4.2、求平均数

现在模拟一个场景，进行某项比赛，评委打分后，要求去掉一个最高分和最低分，剩下分数求得的平均数即为最后分数。

可能很多同学会想到用，写一个方法，让后接收所有的分数，然后用函数的内置属性arguments，把arguments调用sort方法排序，然后......，但是要注意，arguments并不是真正的数组对象，它只是伪数组集合而已，所以直接调用用arguments调用sort方法是会报错的：

arguments.sort(); // Uncaught TypeError: arguments.sort is not a function

 

那么这时候可不可以先将arguments转换为一个真正的数组呢，然后再进行操作呢，按照这个思想，我们自己实现一个实现题目要求的业务方法：

function avgFn() {
    // 1、将类数组转换为数组：把arguments克隆一份一模一样的数组出来
    var ary = [];
    for (var i = 0; i < arguments.length; i++) {
        ary[ary.length] = arguments[i];
    }
    
    // 2、给数组排序，去掉开头和结尾，剩下的求平均数
    ary.sort(function (a, b) {
        return a - b;
    });
    ary.shift();
    ary.pop();
    return (eval(ary.join('+')) / ary.length).toFixed(2);
}
var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);

 

我们发现在自己实现的avgFn方法中有一个步骤为将arguments克隆出来生成是一个数组。如果对数组的slice方法比较熟悉的话，可以知道当slice方法什么参数都不传的时候就是克隆当前的数组，可以模拟为：

function mySlice () {
    // this->当前要操作的这个数组ary
    var ary = [];
    for (var i = 0; i < this.length; i++) {
        ary[ary.length] = this[i];
    }
    return ary;
};
var ary = [12, 23, 34];
var newAry = mySlice(ary);
console.log(newAry);

 

所以在avgFn方法中的将arguments转换为数组的操作可以通过call方法来借用Array中的slice方法。

function avgFn() {
    // 1、将类数组转换为数组：把arguments克隆一份一模一样的数组出来      
    // var ary = Array.prototype.slice.call(arguments);
    var ary = [].slice.call(arguments);
    
    // 2、给数组排序，去掉开头和结尾，剩下的求平均数
    ....
}

 

我们现在的做法是先将arguments转换为数组，然后再操作转换之后的数组，那么可以不可以直接就用arguments而不要先转换为数组呢？ 当然是可以的，通过call来借用数组的方法来实现。

function avgFn() {
    Array.prototype.sort.call(arguments , function (a, b) {
        return a - b;
    });
    
    [].shift.call(arguments);
    [].pop.call(arguments);
    
    return (eval([].join.call(arguments, '+')) / arguments.length).toFixed(2);
}
var res = avgFn(9.8, 9.7, 10, 9.9, 9.0, 9.8, 3.0);
console.log(res);

 

4.3、将类数组转换数组

在4.2中提到了借用数组的slice方法将类数组对象转换为数组，那么通过getElementsByTagName等方法获取的类数组对象是不是也可以借用slice方法来转换为数组对象呢？

var oLis = document.getElementsByTagName('div');
var ary = Array.prototype.slice.call(oLis);
console.log(ary);

 

在标准浏览器下，的确可以这么用，但是在IE6~8下就悲剧了，会报错：

SCRIPT5014: Array.prototype.slice: 'this' 不是 JavaScript 对象 (报错)

 

那么在IE6~8下就只能通过循环一个个加到数组中了：

for (var i = 0; i < oLis.length; i++) {
    ary[ary.length] = oLis[i];
}

 

注意：对于arguments借用数组的方法是不存在任何兼容性问题的。

基于IE6~8和标准浏览器中的区别，抽取出类数组对象转换为数组的工具类：

function listToArray(likeAry) {
    var ary = [];
    try {
        ary = Array.prototype.slice.call(likeAry);
    } catch (e) {
        for (var i = 0; i < likeAry.length; i++) {
            ary[ary.length] = likeAry[i];
        }
    }
    return ary;
}

 

这个工具方法中用到了浏览器的异常信息捕获，那么在这里也介绍一下吧。

console.log(num);

 

当我们输出一个没有定义的变量的时候会报错：Uncaught ReferenceError: num is not defined，在JavaScript中，本行报错，下面的代码都不再执行了。

但是如果使用了try..catch捕获异常信息的话，则不会影响下面的代码进行执行，如果try中的代码执行出错了，会默认的去执行catch中的代码。

try {
    console.log(num);
} catch (e) { // 形参必须要写，我们一般起名为e
    console.log(e.message); // --> num is not defined  可以收集当前代码报错的原因
}
console.log('ok');

 

所以try...catch的使用格式为（和Java中很像）：

try {
    // <js code>
} catch (e) {
    // 如果代码报错执行catch中的代码
} finally {
    // 一般不用：不管try中的代码是否报错，都要执行finally中的代码
}

 

如果有时候既想捕获到信息，又不想让下面的diamante执行，那么应该怎么做呢？

try {
    console.log(num);
} catch (e) {
    // console.log(e.message); // --> 可以得到错误信息，把其进行统计
    // 手动抛出一条错误信息，终止代码执行
    throw new Error('当前网络繁忙，请稍后再试');
    // new ReferenceError --> 引用错误
    // new TypeError --> 类型错误
    // new RangeError --> 范围错误
}
console.log('ok');