js里function的apply vs. bind vs. call
js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply、bind、call,都在function的原型里。这3种方法的异同在stackoverflow的这个答案里说的最清楚,下面只是自己的理解。
1. 异同
这3种方式的相同点是:改变了func调用的上下文,链接到新的对象上。这使得任何函数都可以被其他对象调用,即使这个对象没有定义该函数。
区别是:调用的方式不同。
- call: 最简单,立即调用,按顺序传参
- apply:立即调用,按数组传参
- bind: 延迟调用(返回一个新的func),按顺序传参
2. 例子
上代码:
var person = {
name: "Alex",
code: function(lang1, lang2, lang3, lang4){
//在这里断点,观察arguments和lang1-4的区别
console.log(this.name + " code in " + arguments.toString());
}
};
var machine = {
name: "alphago"
};
//普通的调用方式
person.code("C#");
//call是按顺序传参
person.code.call(machine, "python", "perl");
//apply是按数组传参,如果不能转成数组,抛TypeError
person.code.apply(machine, ["C", "C++", "lisp"]);
//Uncaught TypeError: CreateListFromArrayLike called on non-object
//person.code.apply(machine, "C", "C++", "lisp");
//不报错,但转出的数组为空
//person.code.apply(machine, {lang1:"C", lang2:"C++", lang3:"lisp"});
var func = person.code.bind(machine);
func("python", "perl");
//按顺序传参,类似call
//func(["C", "C++", "lisp"]);
var func1 = person.code.bind(machine, "python", "perl");
func1("C#");
3. 使用场景
- 如果是可变数量的参数,那么很明显只能使用apply;
- 如果要延迟调用某个函数,那么只能使用bind;
- bind能够实现所谓的柯里化(function currying),即先传一部分参数进去,使用的时候再传另一部分参数,这种场景下也只能使用bind。
js里function的apply vs. bind vs. call的更多相关文章
- JS里面的call, apply以及bind
参考了这篇文章:http://www.tuicool.com/articles/EVF3Eb 给几个例子 function add(a,b) { alert(a+b); } function sub( ...
- 原生JS:Function对象(apply、call、bind)详解
Function对象(apply.call.bind) 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5850180.html 本文参考MDN做的 ...
- JS中call、apply、bind使用指南,带部分原理。
为什么需要这些?主要是因为this,来看看this干的好事. box.onclick = function(){ function fn(){ alert(this); } fn();}; 我们原本以 ...
- js中call、apply、bind那些事
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- js中call、apply、bind那些事2
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- js中call、apply和bind到底有什么区别?
介绍 在js中,每个函数的原型都指向Function.prototype对象(js基于原型链的继承).因此,每个函数都会有apply,call,和bind方法,这些方法继承于Function. 它们的 ...
- js中call、apply、bind到底有什么区别?bind返回的方法还能修改this指向吗?
壹 ❀ 引 同事最近在看angularjs源码,被源码中各种bind,apply弄的晕头转向:于是他问我,你知道apply,call与bind的区别吗?我说apply与call是函数应用,指定thi ...
- JS中call()和apply()以及bind()的区别
一.方法定义: apply:调用一个对象的一个方法,用另一个对象替换当前对象.例如:B.apply(A, arguments);即A对象应用B对象的方法. call:调用一个对象的一个方法,用另一个对 ...
- js中call,apply和bind
1,首先先做一个定义:每个函数都包含两个非继承的方法:apply()和call(),apply和call这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值,两者唯一的 ...
随机推荐
- 单点登录 SSO 的实现原理
单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任. 单点登录在大型网站里使用 ...
- 学习jQuery之旅
早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自 ...
- usermod
环境: [root@vm-xiluhua][/]# cat /etc/redhat-release CentOS Linux release (Core) usermod usage:(本人使用的版本 ...
- 关于mysql中int(1)中int后面的数字
mysql在建表的时候int类型后的长度代表什么? 是该列允许存储值的最大宽度吗? 为什么我设置成int(1), 也一样能存10,100,1000呢. 当时我虽然知道int(1),这个长度1并不代表 ...
- java转换unicode,筛选文件中的insert语句并把日期给转换为可以直接在数据库执行的语句
package com; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; impo ...
- python importlib
api 文档 importlib.import_module(name, package=None) Import a module. The name argument specifies what ...
- 在FireFox中安装Selenium IDE
第二步:点击查看更多,查找Selenium IDE,安装 第三步:安装好后,在顶部的工具栏里点击"工具",弹出的选项框里出现Selenium IDE,安装完毕.
- 常用js总结1
1.cookie.js(封装了cookie的基本操作) 1.引入cookie.js <script type="text/javascript" src="../j ...
- Kth Largest Element in an Array - LeetCode
examination questions Find the kth largest element in an unsorted array. Note that it is the kth lar ...
- XAF应用开发教程-内置Attribute功能列表
在 XAF 框架,一些用来生成一个业务应用程序的信息是在Attribute中指定.您可以将属性应用到业务类 (或它的成员) 指定验证规则,指定如何对数据进行显示. 设置关系类等.本主题提供了有关在何处 ...