javascript中call apply 与 bind方法详解


Posted in Javascript onMarch 10, 2016

在JavaScript中,call、apply和bind是Function对象自带的三个方法,本文将通过几个场景的应用,来详细理解三个方法。

call()

call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。

当调用一个函数时,可以赋值一个不同的 this 对象。this 引用当前对象,即 call 方法的第一个参数。

通过 call 方法,你可以在一个对象上借用另一个对象上的方法,比如Object.prototype.toString.call([]),就是一个Array对象借用了Object对象上的方法。

语法 fun.call(thisArg[, arg1[, arg2[, ...]]])
thisArg
在fun函数运行时指定的this值。需要注意的是下面几种情况

(1)不传,或者传null,undefined, 函数中的this指向window对象
(2)传递另一个函数的函数名,函数中的this指向这个函数的引用,并不一定是该函数执行时真正的this值
(3)值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象,如 String、Number、Boolean
(4)传递一个对象,函数中的this指向这个对象

arg1, arg2, ...
指定的参数列表。

例子
初级应用例子

function a(){
 //输出函数a中的this对象
 console.log(this); 
}
//定义函数b
function b(){} 

var obj = {name:'这是一个?潘?}; //定义对象obj
a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object

使用call方法调用匿名函数并且指定上下文的this

在下面的例子中,当调用 greet 方法的时候,该方法的 this 值会绑定到 i对象。

function greet() {
 var reply = [this.person, '是一个轻量的', this.role].join(' ');
 console.log(reply);
}

var i = {function greet() {
 var reply = [this.person, '是一个轻量的', this.role].join(' ');
 console.log(reply);
}

var i = {
 person: 'JSLite.io', role: 'Javascript 库。'
};

greet.call(i); 
// JSLite.io 是一个轻量的 Javascript 库。


 person: 'JSLite.io', role: 'Javascript 库。'
};

greet.call(i); 
// JSLite.io 是一个轻量的 Javascript 库。

使用call方法调用匿名函数

在下例中的for循环体内,我们创建了一个匿名函数,然后通过调用该函数的call方法,将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法,这个print方法可以打印出各元素在数组中的正确索引号。当然,这里不是必须得让数组元素作为this值传入那个匿名函数(普通参数就可以),目的是为了演示call的用法。

var animals = [
 {species: 'Lion', name: 'King'},
 {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
 (function (i) { 
 this.print = function () { 
 console.log('#' + i + ' ' + this.species + ': ' + this.name); 
 } 
 this.print();
 }).call(animals[i], i);
}
//#0 Lion: King
//#1 Whale: Fail

使用call方法调用函数传参数

var a = {
 name:'JSLite.io', //定义a的属性
 say:function(){ //定义a的方法
 console.log("Hi,I'm function a!");
 }
};
function b(name){
 console.log("Post params: "+ name);
 console.log("I'm "+ this.name);
 this.say();
}

b.call(a,'test');
//Post params: test
//I'm onepixel
//I'm function a!

apply()

语法与 call() 方法的语法几乎完全相同,唯一的区别在于,apply的第二个参数必须是一个包含多个参数的数组(或类数组对象)。apply的这个特性很重要,

在调用一个存在的函数时,你可以为其指定一个 this 对象。 this 指当前对象,也就是正在调用这个函数的对象。 使用 apply, 你可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写该方法。

语法:fun.apply(thisArg[, argsArray])
注意: 需要注意:Chrome 14 以及 Internet Explorer 9 仍然不接受类数组对象。如果传入类数组对象,它们会抛出异常。

参数
thisArg

同上call 的thisArg参数。

argsArray

一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

例子

function jsy(x,y,z){
 console.log(x,y,z);
}

jsy.apply(null,[1,2,3]); 
// 1 2 3

使用apply来链接构造器的例子

你可以使用apply来给一个对象链接构造器,类似于Java. 在接下来的例子中我们会创建一个叫做construct的全局的Function函数,来使你能够在构造器中使用一个类数组对象而非参数列表。

Function.prototype.construct = function(aArgs) {
 var fConstructor = this, 
 fNewConstr = function() { 
 fConstructor.apply(this, aArgs); 
 };
 fNewConstr.prototype = fConstructor.prototype;
 return new fNewConstr();
};
function MyConstructor () {
 for (var nProp = 0; nProp < arguments.length; nProp++) {
 console.log(arguments,this)
 this["property" + nProp] = arguments[nProp];
 }
}
var myArray = [4, "Hello world!", false];
var myInstance = MyConstructor.construct(myArray);

console.log(myInstance.property1);  // logs "Hello world!"
console.log(myInstance instanceof MyConstructor); // logs "true"
console.log(myInstance.constructor);  // logs "MyConstructor"

使用apply和内置函数

聪明的apply用法允许你在某些本来需要写成遍历数组变量的任务中使用内建的函数。在接下里的例子中我们会使用Math.max/Math.min来找出一个数组中的最大/最小值。

//里面有最大最小数字值的一个数组对象
var numbers = [5, 6, 2, 3, 7];

/* 使用 Math.min/Math.max 在 apply 中应用 */
var max = Math.max.apply(null, numbers);
// 一般情况是用 Math.max(5, 6, ..) 或者 Math.max(numbers[0], ...) 来找最大值
var min = Math.min.apply(null, numbers);

//通常情况我们会这样来找到数字的最大或者最小值
//比对上面的栗子,是不是下面的看起来没有上面的舒服呢?
max = -Infinity, min = +Infinity;
for (var i = 0; i < numbers.length; i++) {
 if (numbers[i] > max)
 max = numbers[i];
 if (numbers[i] < min) 
 min = numbers[i];
}

参数数组切块后循环传入

function minOfArray(arr) {
 var min = Infinity;
 var QUANTUM = 32768;

 for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
 var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
 console.log(submin, min)
 min = Math.min(submin, min);
 }

 return min;
}

var min = minOfArray([5, 6, 2, 3, 7]);

bind

bind() 函数会创建一个新函数(称为绑定函数)

bind是ES5新增的一个方法
传参和call或apply类似
不会执行对应的函数,call或apply会自动执行对应的函数
返回对函数的引用
语法 fun.bind(thisArg[, arg1[, arg2[, ...]]])

下面例子:当点击网页时,EventClick被触发执行,输出JSLite.io p1 p2, 说明EventClick中的this被bind改变成了obj对象。如果你将EventClick.bind(obj,'p1','p2') 变成 EventClick.call(obj,'p1','p2') 的话,页面会直接输出 JSLite.io p1 p2

var obj = {name:'JSLite.io'};
/**
 * 给document添加click事件监听,并绑定EventClick函数
 * 通过bind方法设置EventClick的this为obj,并传递参数p1,p2
 */
document.addEventListener('click',EventClick.bind(obj,'p1','p2'),false);
//当点击网页时触发并执行
function EventClick(a,b){
 console.log(
  this.name, //JSLite.io
  a, //p1
  b //p2
 )
}
// JSLite.io p1 p2

兼容

if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
 if (typeof this !== "function") {
 // closest thing possible to the ECMAScript 5
 // internal IsCallable function
 throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
 }

 var aArgs = Array.prototype.slice.call(arguments, 1), 
 fToBind = this, // this在这里指向的是目标函数
 fNOP = function () {},
 fBound = function () {
  return fToBind.apply(this instanceof fNOP
   ? this //此时的this就是new出的obj
   : oThis || this,//如果传递的oThis无效,就将fBound的调用者作为this
  
  //将通过bind传递的参数和调用时传递的参数进行合并,并作为最终的参数传递
  aArgs.concat(Array.prototype.slice.call(arguments)));
 };
 fNOP.prototype = this.prototype;
 //将目标函数的原型对象拷贝到新函数中,因为目标函数有可能被当作构造函数使用
 fBound.prototype = new fNOP();
 //返回fBond的引用,由外部按需调用
 return fBound;
 };
}

兼容例子来源于:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Compatibility

应用场景:继承

function Animal(name,weight){
 this.name = name;
 this.weight = weight;
}
function Cat(){
 // 在call中将this作为thisArgs参数传递
 // Animal方法中的this就指向了Cat中的this
 // 所以Animal中的this指向的就是cat对象
 // 在Animal中定义了name和weight属性,就相当于在cat中定义了这些属性
 // cat对象便拥有了Animal中定义的属性,从而达到了继承的目的
 Animal.call(this,'cat','50');
 //Animal.apply(this,['cat','50']);
 this.say = function(){
 console.log("I am " + this.name+",my weight is " + this.weight);
 }
}
//当通过new运算符产生了cat时,Cat中的this就指向了cat对象
var cat = new Cat();
cat.say();
//输出=> I am cat,my weight is 50

原型扩展

在原型函数上扩展和自定义方法,从而不污染原生函数。例如:我们在 Array 上扩展一个 forEach

function test(){
 // 检测arguments是否为Array的实例
 console.log(
 arguments instanceof Array, //false
 Array.isArray(arguments) //false
 );
 // 判断arguments是否有forEach方法
 console.log(arguments.forEach); 
 // undefined
 // 将数组中的forEach应用到arguments上
 Array.prototype.forEach.call(arguments,function(item){
 console.log(item); // 1 2 3 4
 });
}
test(1,2,3,4);
Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
angularjs表格ng-table使用备忘录
Mar 09 #Javascript
详解AngularJS控制器的使用
Mar 09 #Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 #Javascript
javascript基本算法汇总
Mar 09 #Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 #Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 #Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 #Javascript
You might like
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python闭包函数定义与用法分析
2018/07/20 Python
python实现zabbix发送短信脚本
2018/09/17 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python日志logging模块使用方法分析
2019/05/23 Python
python文件读写代码实例
2019/10/21 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python爬虫与反爬虫大战
2020/07/30 Python
如何用python写个模板引擎
2021/01/14 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
你对IPv6了解程度
2016/02/09 面试题
大学生团员个人总结
2015/02/14 职场文书
培训师岗位职责
2015/02/14 职场文书
公司开业主持词
2015/07/02 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书