谈谈JavaScript中的几种借用方法


Posted in Javascript onAugust 09, 2016

前言

通过call()、apply()和bind()方法,我们可轻易地借用其它对象的方法,而无须从这些对象中继承它。

在JavaScript中借用方法

在JavaScript中,有时可以重用其它对象的函数或方法,而不一定非得是对象本身或原型上定义的。通过 call()、apply() 和 bind() 方法,我们可轻易地借用其它对象的方法,而无须继承这些对象。这是专业 JavaScript 开发者常用的手段。

原型方法

在 JavaScript 中,除了不可更改的原始数据类型,如 string、number 和 boolean,几乎所有的数据都是对象。Array 是一种适用于遍历和转换有序数列的对象,其原型上有 slice、join、push 和 pop 等好用的方法。

一个常用的例子是,当对象和数组都是列表类型的数据结构时,对象可以从数组“借用”方法。最常借用的方法是 Array.prototype.slice

function myFunc() {
 
  // error, arguments is an array like object, not a real array
  arguments.sort();
 
  // "borrow" the Array method slice from its prototype, which takes an array like object (key:value)
  // and returns a real array
  var args = Array.prototype.slice.call(arguments);
 
  // args is now a real Array, so can use the sort() method from Array
  args.sort();
 
}
 
myFunc('bananas', 'cherries', 'apples');

借用方法之所以可行,是因为 call 和 apply 方法允许在不同上下文中调用函数,这也是重用已有功能而不必继承其它对象的好方法。实际上,数组在原型中定义了很多常用方法,比如 join 和 filter 也是:

// takes a string "abc" and produces "a|b|c
Array.prototype.join.call('abc', '|');
 
// takes a string and removes all non vowels
Array.prototype.filter.call('abcdefghijk', function(val) {
  return ['a', 'e', 'i', 'o', 'u'].indexOf(val) !== -1;
}).join('');

可以看出,不仅对象可以借用数组的方法,字符串也可以。但是因为泛型方法是在原型上定义的,每次想要借用方法时都必须使用 String.prototype Array.prototype。这样写很??拢?芸炀突崃钊松?帷8?行У姆椒ㄊ鞘褂米置媪坷创锏酵??哪康摹?/p>

使用字面量借用方法

字面量是一种遵循JavaScript规则的语法结构,MDN 这样解释:

在JavaScript中,使用字面量可以代表值。它们是固定值,不是变量,就是在脚本中按字面给出的。
字面量可以简写原型方法:

[].slice.call(arguments);
[].join.call('abc', '|');
''.toUpperCase.call(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

这样看上去没有那么冗长了,但是必须直接在 [] 和 "" 上操作以借用方法,仍然有点丑。可以利用变量保存对字面量和方法的引用,这样写起来更简便些:

var slice = [].slice;
slice.call(arguments);
var join = [].join;
join.call('abc', '|');
 
var toUpperCase = ''.toUpperCase;
toUpperCase.call(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

有了借用方法的引用,我们就可以轻松地使用 call() 调用它了,这样也可以重用代码。秉着减少冗余的原则,我们来看看可否借用方法却不用每次调用都要写 call() 或者 apply():

var slice = Function.prototype.call.bind(Array.prototype.slice);
slice(arguments);
 
var join = Function.prototype.call.bind(Array.prototype.join);
join('abc', '|');
 
var toUpperCase = Function.prototype.call.bind(String.prototype.toUpperCase);
toUpperCase(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

如你所见,现在可以使用 Function.prototype.call.bind 来静态绑定从不同原型“借来的”方法了。但是 var slice = Function.prototype.call.bind(Array.prototype.slice) 这句话实际是如何起作用的呢?

理解 Function.prototype.call.bind

Function.prototype.call.bind 乍一看有些复杂,但是理解它是如何起作用的会非常有益。

Function.prototype.call 是一种引用,可以“call”函数并将设置其“this”值以在函数中使用。
注意“bind”返回一个存有其“this”值的新函数。因此 .bind(Array.prototype.slice) 返回的新函数的“this”总是 Array.prototype.slice 函数。

综上所述,新函数会调用“call”函数,并且其“this”为“slice”函数。调用 slice() 就会指向之前限定的方法。

自定义对象的方法

继承很棒,但是开发者通常在想要重用一些对象或模块间的通用功能时才会使用。没必要仅为代码重用使用继承,因为在多数情况下简单的借用方法会很复杂。

之前我们只讨论了借用原生方法,但是借用任何方法都是可以的。比如下面的代码可以计算积分游戏的玩家分数:

var scoreCalculator = {
  getSum: function(results) {
    var score = 0;
    for (var i = 0, len = results.length; i < len; i++) {
      score = score + results[i];
    }
    return score;
  },
  getScore: function() {
    return scoreCalculator.getSum(this.results) / this.handicap;
  }
};
var player1 = {
  results: [69, 50, 76],
  handicap: 8
};
 
var player2 = {
  results: [23, 4, 58],
  handicap: 5
};
 
var score = Function.prototype.call.bind(scoreCalculator.getScore);
 
// Score: 24.375
console.log('Score: ' + score(player1));
 
// Score: 17
console.log('Score: ' + score(player2));

虽然上面的例子很生硬,但是可以看出,就像原生方法一样,用户定义的方法也可以轻松借用。

总结

Call、bind 和 apply 可以改变函数的调用方式,并且经常在借用函数时使用。多数开发者熟悉借用原生方法,但是较少借用自定义的方法。

近几年 JavaScript 的函数式编程发展不错,怎样使用 Function.prototype.call.bind 借用方法才更加简便?估计这样的话题会越来越常见。

以上就是JavaScript中的借用方法总结的全部内容,希望对大家了解到JavaScript中的借用方法有所帮助吧。

Javascript 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
表格 隔行换色升级版
Nov 07 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
javascript回到顶部特效
Jul 30 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
Backbone View 之间通信的三种方式
Aug 09 #Javascript
Backbone中View之间传值的学习心得
Aug 09 #Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 #Javascript
jQuery 生成svg矢量二维码
Aug 09 #Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 #Javascript
浅谈js基本数据类型和typeof
Aug 09 #Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python实现电子书翻页小程序
2019/07/23 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
python 爬取小说并下载的示例
2020/12/07 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
2013年军训通讯稿
2014/02/05 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
给学校的建议书范文
2014/05/15 职场文书
初级党校心得体会
2014/09/11 职场文书
2016年母亲节广告语
2016/01/28 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers