javascript 的bind/apply/call函数

javascript有三个使用频率非常高的内建函数:bind/apply/call。许多高级点的技巧都是基于这几个函数来实现的。这三个函数都用于改变函数的执行环境.从而达到代码复用的目的。

先来所说bind函数, bind,函数通常有两个用途:

1. 创建新函数,指定函数的this指针。

name = ‘global‘;
var obj1 = {name: ‘foo‘};
var showName = function() {
    console.log(this.name);
}
showName(); //global

var showObj = showName.bind(obj1);
showObj(); // foo

2. bind函数体现出偏函数的思维,可以有效减少匿名函数的使用,譬如,有一个接收用户不同请求并分发处理的模块:

//query: 请求参数
//config:不同请求的配置信息
function dispatcher(query, config) {
       var action = query.action;
       switch(action){
            case ‘action1‘:{
            //....
                break;
            }
        }
}

dispatcher函数执行的操作都是类似的,只是不同的用户请求需要不同的config配置信息。可以有如下做法:

function createDispatcher(config) {
    return function(query) {
        dispatcher(query, config);
    };
}

当然如果需要多个参数也可以这样搞:

function createDispatcher(config, ext) {
    //借用Array原型对象的slice函数把函数参数拷贝一份
    var args = Array.prototype.slice.call(arguments);
    return function (query) {
        var newArgs = args.push(query);
        dispatcher.apply(null, newArgs);
    };
}

如果通过bind来实现,可以这样搞:

function dispatcher(config, query) {
    //
}

//创建分发函数
var dispatch1 = dispatcher.bind(null, config1);
var dispatch2 = dispatcher.bind(null, config2);
var dispatch3 = dispatcher.bind(null, config3);

在这里我们不需要改变bind返回的偏函数的this指针,所以bind函数第一个参数传null。只需要指定一个固定的参数。所以一句话就搞定了。

再说说apply函数,apply和call函数可以方便的实现函数借用。javascript这种基于原型继承的语言,基础类型的原型为我们提供了许多方便的内建函数,譬如,我要把上面的分发函数写成一个通用的模块,即:把分发行为也抽象出来,由使用者来指定函数行为。createDispatcher只是收集用户参数并调用指定的动作函数:

function createDispatcher(doit, context) {
    var args = Array.prototype.slice.call(arguments, 2);
    return function() {
        doit.apply(context, args.concat(Array.prototype.slice.call(arguments));
    }
}

var obj1 = {name: ‘obj1‘};
var obj2 = {name: ‘obj2‘};
var showParams1 = function() {
    console.log(this.name + ‘got it: ‘ + arguments.join(‘+‘));
};

var showParams2 = function() {
    console.log(this.name + ‘got it: ‘ + arguments.join(‘-‘));
};
//obj1 got it: 1+2+3
createDispatcher(showParams1, obj1)(1, 2, 3);
//obj2 got it: 4-5-6
createDispatcher(showParams2, obj2)(4, 5, 6);

apply与call的唯一区别是apply通过数组的形式传参,而call需要把参数列在函数后面,可以认为apply是javascript语言基于call构造的一个语法糖罢了~

时间: 2024-11-05 15:52:43

javascript 的bind/apply/call函数的相关文章

面试官:能解释一下javascript中bind、apply和call这三个函数的用法吗

一.前言    不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数,但是多少也和this有点关联. 假如在前面那场面试末尾,面试官不依不饶继续问你javascript中的this,那看完本篇文章后一定还会有收获. (本篇文章不会站在this的角度去回答问题,而是重于解释bind.apply和call这三个函数的用法和使用场景) 二.正戏开始 面试官:能解释一下javascr

javascript中call,apply,bind的用法对比分析

这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用“,"请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用

javascript中bind函数的作用

javascript的bind的作用 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 button {background-color:#0f0;} 7 </style> 8 </head> 9 <body> 10 <button id="button"> 按钮

JavaScript学习总结(二)——闭包、IIFE、apply、函数与对象

目录 一.闭包(Closure) 1.1.闭包相关的问题 1.2.理解闭包 二.对象 2.1.对象常量(字面量) 2.2.取值 2.3.枚举(遍历) 2.4.更新与添加 2.5.对象的原型 2.6.删除 2.7.封装 三.函数 3.1.参数对象 (arguments) 3.2.构造函数 3.3.函数调用 3.3.1.call 3.3.2.apply 3.3.3.caller 3.3.4.Callee 3.5.立即执行函数表达式 (IIFE) 3.5.1.匿名函数与匿名对象 3.5.2.函数与函数

JavaScript中的apply和call函数详解

第一次翻译技术文章,见笑了! 翻译原文:Function.apply and Function.call in JavaScript 第一段略. 每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象.看一下这篇文章,复习一下(refresher)JavaScript特性.你可能还想知道JavaScript中函

[Effective JavaScript 笔记]第26条:使用bind方法实现函数的柯里化

bind方法的作用,除了有绑定函数到对象外,我们来看看bind方法的一些其它应用. 简单示例 例子:假设有一个装配URL字符串的简单函数.代码如下 function simpleURL(protocol,domain,path){ return protocol+'://'+domain+'/'+path; } 要将特定站点的路径字符串构建为绝对路径URL.可以使用ES5中数组的map方法来实现.如下 var paths=['wengxuesong/','wengxuesong/p/556048

Javascript中bind()方法的使用与实现

我们先来看一道题目 1 2 3 4 var write = document.write;  write("hello");  //1.以上代码有什么问题 //2.正确操作是怎样的 不能正确执行,因为write函数丢掉了上下文,此时this的指向global或window对象,导致执行时提示非法调用异常,所以我们需要改变this的指向 正确的方案就是使用 bind/call/apply来改变this指向 bind方法 1 2 var write = document.write; wr

JavaScript中的apply()方法和call()方法使用介绍

javascript中apply和call方法的作用及区别说明 call和apply的说明 call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 语法:foo.call(this, arg1,arg

JavaScript基础学习之-JavaScript权威指南--8.7函数属性方法构造函数

函数属性.方法和构造函数 一.函数属性 函数是js中特殊的对象,可以拥有属性. funcation.length属性:代表形参的长度,只读属性,不允许更改 arguments.length代表的是实参长度 prototype属性:每个函数都有一个prototype属性,当把函数当做构造函数时,新创建的对象会从原型对象上继承属性. 二.函数方法 与其他语言不同,ECMAScript函数不介意传递进来多少个参数,也不在乎是什么类型.因为实参在内部是用一个类数组来表示的,函数接收到的始终是个类数组.