js基础--深入理解call、apply、bind

一、函数的三种角色


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

  • 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的属性是自己的原型,它的实例都可以指向自己的原型;

  • 角色三:普通对象Fnvar obj = {} 中的obj一样,就是一个普通的对象(所有的函数都是Function的实例),它作为对象可以有一些自己的私有属性,也可以通过__proto__找到Function.prototype

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

函数作为普通对象.png

二、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(this);
}
function fn(){
    console.log(this);
}
var obj = {name:'iceman'};
Function.prototype.myCall = function (context) {
    // myCall方法中的this就是当前我要操作和改变其this关键字的那个函数名

    // 1、让fn中的this关键字变为context的值->obj
    // 让this这个函数中的"this关键字"变为context
    // eval(this.toString().replace("this","obj"));

    // 2、让fn方法在执行
    // this();
};
fn.myCall(obj);// myCall方法中原来的this是fn
sum.myCall(obj);// myCall方法中原来的this是sum

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

看完以上那段话是不是有些懵逼了呢?哈哈,没事,接下来看下面例子,理解一下。

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的时候再让方法执行,方法中的thisfn1.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');

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页