JS 的 call apply bind 方法

js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context)

call

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, argN .. 可选项。将被传递方法参数序列。

如果没设置严格模式 “use strict”

 当thisObj 不存在或 为 undefined 或为 null 或为 this 时,则隐式地指向 全局对象(在浏览器中即为 window)

第二个参数是一个个值

apply

apply([thisObj[,arg1, arg2, argN]])

apply和call类似,区别只是第二个参数,是一个数组(或类数组)的形式

bind

bind(thisArg [, arg1 [, arg2, …]]);

bind 也是改变某个方法的执行环境,区别也在于第二个参数(也是一个个的参数形式)和“返回值”的特性。

  它将一个func绑定给thisArg的上下文,并传入相应的参数,并以一个新函数的形式返回,以供调用。

如 func.call(func1,var1,var2,var3)

对应的apply写法为:func.apply(func1,[var1,var2,var3])

对应的bind写法为: func.bind(func1,var1,var2,var3)() 

来举个栗子:

//'use strict'

var name = 'name1';
var obj = {
    name: 'name2',
    sayName: function(str1,str2){
        str1 = str1 || '';
        str2 = str2 || '';
        console.log(str1 + this.name + str2);
    }
};

obj.sayName();

obj.sayName.bind(window,'Hello: ',' !')();

obj.sayName.apply(this,['hello: ',' ,']);

obj.sayName.call(obj,'hello: ',' .');

将会输出:

注1:但IE9(包括IE9)以上的才支持bind

所以,在不支持bind的浏览器上,我们需要模拟一下

Function.prototype.Bind = function(context){
    var self = this,
                // 获取到bind第二个参数(中的所有参数)
        args = Array.prototype.slice.call(arguments,1);
        // 返回一个新的函数
    return function(){
        // 将相关参数赋给这个bind所在方法,并将执环境赋给context
        return self.apply(context,args);
    };
};

注2:

Function.prototype的apply和call是在1999年发布的ECMA262 Edition3中才加入的(1998年发布ECMA262 Edition2)。

在此前的的浏览器如IE5.01(JScript 5.0)中是没有apply和call的。因此也会带来一些兼容性问题。所以,

call的模拟:

Function.prototype.Call = function(context){
       // 首先判断所给的context,即call的第一个参数
    context = (context == undefined) ? window : context;
    var temp = [],
        evalStr = '';
        // 最后要形成 一个eval字符串函数调用形式,以供动态执行
    for(var i=1,j=arguments.length; i<j; i++){
        temp.push('arguments[' + i + ']');
    }
        // 给context新增一个方法(拥有this值)
    context._apply = this;
    evalStr = 'context._apply(' + temp.join(',') + ')';
    // console.log(evalStr);
    try{
               // 执行函数调用
        eval(evalStr);
    }catch(e){
        throw new Error(e.message);
    }finally{
               // 销毁该属性
        delete obj._apply;
    }
};

apply的模拟:

apply也类似,因为第二个参数是类数组的形式,所以也要变换为数组

// 第二个参数 args是为了方便使用
Function.prototype.Apply = function(context,args){
    context = (context == undefined) ? window : context;
    var temp = [],
        evalStr = '';
        // 直接拿第二个参数数组的各个元素再进行组合join(',')
        // 为什么不直接用 arguments[1]呢?
        // 因为此时join也要用到 Array.prototype.join.call ,call又不一定支持
    for(var i=0,j=args.length; i<j; i++){
        temp.push('args[' + i + ']');
    }
    
    context._apply = this;
    evalStr = 'context._apply(' + temp.join(',') + ')';
    // console.log(evalStr);
    try{
        eval(evalStr);
    }catch(e){
        throw new Error(e.message);
    }finally{
        delete obj._apply;
    }
};

ok 来看一下对比效果

Function.prototype.Bind = function(context){
    var self = this,
        args = Array.prototype.slice.call(arguments,1);
    return function(){
        return self.apply(context,args);
    };
};

Function.prototype.Call = function(context){
    context = (context == undefined) ? window : context;
    var temp = [],
        evalStr = '';
    for(var i=1,j=arguments.length; i<j; i++){
        temp.push('arguments[' + i + ']');
    }
    context._apply = this;
    evalStr = 'context._apply(' + temp.join(',') + ')';
    console.log(evalStr);
    try{
        eval(evalStr);
    }catch(e){
        throw new Error(e.message);
    }finally{
        delete obj._apply;
    }
};

Function.prototype.Apply = function(context,args){
    context = (context == undefined) ? window : context;
    var temp = [],
        evalStr = '';
    for(var i=0,j=args.length; i<j; i++){
        temp.push('args[' + i + ']');
    }
    
    context._apply = this;
    evalStr = 'context._apply(' + temp.join(',') + ')';
    console.log(evalStr);
    try{
        eval(evalStr);
    }catch(e){
        throw new Error(e.message);
    }finally{
        delete obj._apply;
    }
};



var name = 'name1';
var obj = {
    name: 'name2',
    sayName: function(str1,str2){
        str1 = str1 || '';
        str2 = str2 || '';
        console.log(str1 + this.name + str2);
    }
};

obj.sayName();

obj.sayName.bind(window,'Hello: ',' !')();
obj.sayName.Bind(window,'Hello: ',' !')();

obj.sayName.apply(this,['hello: ',' ,']);
obj.sayName.Apply(this,['hello: ',' ,']);

obj.sayName.call(obj,'hello: ',' .');
obj.sayName.Call(obj,'hello: ',' .');

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从流域到海域

《笨办法学Python》 第39课手记

《笨办法学Python》 第39课手记 本节课讲列表的操作,用来做练习的代码中出现了之前用到过的几个函数,是一节复习课。你需要记住它们。 原代码如下: ten_...

1987
来自专栏阿杜的世界

【译】Java 8的新特性—终极版1. 简介2. Java语言的新特性3. Java编译器的新特性4. Java官方库的新特性5. 新的Java工具6. JVM的新特性7. 结论8. 参考资料

前言: Java 8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级。在Java Code Geeks上已经有很多介绍Java 8新特性的文章,...

1104
来自专栏二进制文集

JDK源码分析 异常

对于JDK源码分析的文章,仅仅记录我认为重要的地方。源码的细节实在太多,不可能面面俱到地写清每个逻辑。所以我的JDK源码分析,着重在JDK的体系架构层面,具体源...

2094
来自专栏aCloudDeveloper

算法导论第六章优先队列(二)

优先队列可以说是堆的一个非常重要的应用,和堆对应,优先队列也分最小优先队列和最大优先队列。 优先队列是一种用来维护由一组元素构成的集合S的数据结构,其中每一个元...

2578
来自专栏Netkiller

Solidity 智能合约开发语言·数据类型

中国广东省深圳市龙华新区民治街道溪山美地 518131 +86 13113668890 <netkiller@msn.com>

75710
来自专栏进击的君君的前端之路

知识点梳理

1022
来自专栏有趣的Python

3-玩转数据结构-栈和队列

栈也是一种线性结构;相比数组,栈对应的操作是数组的子集;只能从一端添加元素,也只能从一端取出元素(这一端称之为栈顶)

5492
来自专栏码匠的流水账

聊聊jesque的几个dao

jesque-2.1.0-sources.jar!/net/greghaines/jesque/meta/dao/FailureDAO.java

811
来自专栏搜云库

BTA 常问的 Java基础40道常见面试题及详细答案

最近看到网上流传着,各种面试经验及面试题,往往都是一大堆技术题目贴上去,而没有答案。

5816
来自专栏技术点滴

Windows字符集的统一与转换

Windows字符集的统一与转换 一、字符集的历史渊源 在Windows编程时经常会遇到编码转换的问题,一直以来让刚接触的人摸不着头脑。其实只要弄清Win32程...

19210

扫码关注云+社区

领取腾讯云代金券