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

函数的三种角色

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

  • arguments:对应于传递给函数的参数的类数组对象(非箭头函数)
  • length:arguments 属性指向传递给当前函数的参数数量
  • 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的属性是自己的原型,它的实例都可以指向自己的原型;
  • 角色三:普通对象,Fnvar obj = {} 中的obj一样,就是一个普通的对象(所有的函数都是 Function 的实例),它作为对象可以有一些自己的私有属性,也可以通过__proto__找到Function.prototype

函数的以上三种角色,可能大多数同学对于角色一和角色二都是没有任何疑问的,不过对于角色三可能会稍有疑惑,那么画张图来理解下吧:

JS原型图

call 深入

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这个函数执行。

call 方法原理

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

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

    //在这里提取出函数名,并调用
    eval(this.toString().split("{")[0].replace("function", ""));
};
fn.myCall(obj); // myCall 方法中原来的 this 是 fn
sum.myCall(obj2); // myCall 方法中原来的 this 是 sum

fn.myCall(obj) 这行代码执行的时候,根据 this 的寻找规律,在 myCall 方法前面有.,那么 myCall 中的 this 就是 fn。执行 myCall 的方法,在第一步会将方法体中 this 换为传入的对象,并且执行原来的 this, 注意:是执行原来的 this,在本例中就是执行 fn

call 方法经典例子

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

输出一

fn1.call(fn2); // 1

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

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

输出二

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

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

这个例子有点绕了,不过一步一步来理解。在最开始的时候,fn1.call.call(fn2) 这行代码的最后一个 call 中的 thisfn1.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。

然后再将 callthis 替换为 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 的应用

求数组的最大值和最小值

定义一个数组:

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

排序再取值法

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

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);

假设法

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

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);

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。

求平均数

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

可能很多同学会想到用,写一个方法,然后接收所有的分数,然后用函数的内置属性 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);

将类数组转换数组

在上面提到了借用数组的 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的 catch分句会创建一个块作用域,其中声明的变量仅在 catch内部有效。

所以 try...catch 的使用格式为(和 Java 中很像):

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

如果有时候既想捕获到信息,又不想让下面的脚本执行,那么应该怎么做呢?

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

From

作者:iceman_dev
链接https://www.jianshu.com/p/00dc4ad9b83f

评论