浅谈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 相关文章推荐
javascript Deferred和递归次数限制实例
Oct 21 Javascript
javascript实现完美拖拽效果
May 06 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
thinkphp分页实现效果
2016/10/13 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
javascript div 弹出可拖动窗口
2009/02/26 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python笔记(叁)继续学习
2012/10/24 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
大学生就业自荐信
2013/10/26 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
企业员工薪酬方案
2014/06/04 职场文书
搞笑老公保证书
2015/02/26 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers