浅谈javascript的call()、apply()、bind()的用法


Posted in Javascript onFebruary 21, 2016

JavaScript中的函数不仅是一种类似于Java中方法的语言功能,它还可以作为对象而存在。 本文将要探讨JavaScript中函数的一些特殊用法,包括call、apply、bind三个原型方法。
一、函数基础
JavaScript中的函数是一种类似于Java中方法的语言功能,不过它可以独立于类进行定义。

函数式编程:由于JavaScript支持匿名函数,因此可以将函数作为对象来使用, 所以JavaScript不仅支持过程式编程(面向对象也是过程式编程的一种),还支持函数式编程。
上下文

函数的每次调用都会拥有一个特殊值——本次调用的上下文(context)——这就是this关键字的值。 如果函数挂载在一个对象上,作为对象的一个属性,就称它为对象的方法。当通过这个对象来调用函数时,该对象就是此次调用的上下文, 也就是该函数的this的值。

需要注意,this是一个关键字,不是变量,也不是属性名。JavaScript的语法不允许给this赋值。

函数是一种对象

JavaScript中的函数和Java中的方法或C语言中的函数最大不同在于,JavaScript中的函数也是一种对象。 但这并不意味着,所有的对象都是函数。函数是一种包含了可执行代码,并能够被其他代码调用的特殊的对象。

和变量不同,关键字this没有作用域的限制,嵌套的函数不会从调用它的函数中继承this。 - 如果嵌套函数作为方法调用,其this的值指向调用它的对象。 - 如果嵌套函数作为函数调用,其this的值不是全局对象(非严格模式下)就是undefined(严格模式下)。

很多人误以为调用嵌套函数时this会指向掉i用外层函数的上下文。如果你想访问这个外部函数的this值, 需要将this的值保存都在一个变量中,这个变量和内部函数都同在一个作用域内。例如:

var o = {
 m: function() {
  var self = this;
  console.log(this==o); // true
  f();
  
  function f() {
   console.log(this === o); // false,this的值是全局对象或undefined
   console.log(self === o); // true
  }
 }
}

闭包

JavaScript的函数可以嵌套在其他函数中定义,这样它们就可以访问它们被定义时所处的作用域中的任何变量。 这意味着JavaScript函数构成了一个闭包(closure),它给JavaScript带来了非常强劲的编程能力。

作为值的函数
在JavaScript中,函数不仅是一种语法,也是值,也就是说,可以将函数赋值给变量,存储在对象的属性或数组的元素中, 作为参数传入另外一个函数等。

bind、call、apply
每一个函数都包含一个prototype属性,这个属性是指向一个对象的引用,这个对象称作“原型对象”。 每一个函数都包含不同的原型对象。当将函数用作构造函数的时候,新创建的对象会从原型对象上继承属性。

Function.prototype.call()Function.prototype.apply()

call()和apply()可以看作为某个对象的方法,通过调用方法的形式来间接调用函数。 它们的第一个参数是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对它的引用。 apply()方法和call()方法的作用相同,只不过函数传递的方式不一样,它的实参都放入在一个数组中。

举个例子,以对象o的方法的形式调用函数f(),并传入两个参数,可以使用这样的代码:

var o = {};

function f(a, b) {
 return a + b;
}

f.call(o, 1, 2);    // 将函数f作为o的方法,实际上就是重新设置函数f的上下文
f.apply(o, [1, 2]);

再举一个例子,使用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);
}

Function.prototype.bind()

bind()是在ES5中新增的方法,从名字可以看出,这个方法的主要作用就是将函数绑定到某个对象。 当在函数f()上调用bind()方法并后窜入一个对象o作为参数,这个方法将返回一个新函数: (以函数调用的方式)调用新的函数将会把原始的函数f()作为o的方法来调用。例如:

function f(y) {
 return this.x + y;
}

var o = {
 x: 1
};

var g = f.bind(o); // 通过调用 g(x) 来调用 o.f(x)
g(2); // 3

其实我们可以轻松的实现bind()方法:

// 返回一个函数,通过调用它来调用o中的方法f(),传递它所有的实参
function bind(f, o) {
 if (f.bind) return f.bind(o); // 如果bind()方法存在,使用bind()方法
 else return function () {
  return f.apply(o, arguments);
 }
}

二、函数式编程
JavaScript并非函数式编程语言,但在JavaScript中可以像操控对象一样操控函数,也就是说可以在JavaScript中应用函数式编程技术。

使用函数处理数组

假设有一个数组,数组元素都是数字,我们想要计算这些元素的平均值和标准差。

var data = [1, 1, 3, 5, 5];
var sum = function(x, y) {
 return x + y;
};
var square = function(x) {
 return x * x;
};

var mean = data.reduce(sum)/data.length;
var deviations = data.map(x => x - mean);

var stddev = Math.sqrt(deviations.map(square).reduce(sum)/(data.length - 1));
高阶函数

高阶函数就是操作函数的函数,它接收一个或多个函数作为参数,并返回一个新函数。举个例子:

function not(f) {
 return function () {
  var result = f.apply(this, arguments);
  return !result;
 };
}

// 判断x是否为偶数的函数
var even = function(x) {
 return x % 2 === 0;
};

var odd = not(even);      // 一个新函数,所做的事情和even()相反
[1, 1, 3, 5, 5].every(odd);   // true,每个函数都是奇数

函数not()是个高阶函数,因为它返回一个新的函数,这个新函数将它的实参传入f(),并返回f的返回值的逻辑非。

以上就是关于javascript的call()、apply()、bind()的用法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
使用javascipt---实现二分查找法
Apr 10 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 #Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 #Javascript
JavaScript编程学习技巧汇总
Feb 21 #Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 #Javascript
JSON简介以及用法汇总
Feb 21 #Javascript
javascript实现计时器的简单方法
Feb 21 #Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 #Javascript
You might like
虫族 Zerg 热键控制
2020/03/14 星际争霸
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
vue2实现数据请求显示loading图
2017/11/28 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
英文版区域经理求职信
2013/10/23 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
院系推荐意见
2015/06/05 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python