谈谈JavaScript中的几种借用方法

前言

通过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。这样写很啰嗦，很快就会令人生厌。更有效的方法是使用字面量来达到同样的目的。

使用字面量借用方法

字面量是一种遵循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中的借用方法有所帮助吧。

赞 (0)

相关推荐

  • JS截取字符串常用方法详细整理

    使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico|png"; arr=theString.split("|"); //arr是一个包含字符值"jpg"."bmp"."gif"."ico"和"png"的数组 函数:Join() 功能:使用您选择的分

  • php中json_decode()和json_encode()的使用方法

    1.json_decode() json_decode (PHP 5 >= 5.2.0, PECL json >= 1.2.0) json_decode - 对 JSON 格式的字符串进行编码 说明 mixed json_decode ( string $json [, bool $assoc ] ) 接受一个 JSON 格式的字符串并且把它转换为 PHP 变量 参数 json 待解码的 json string 格式的字符串. assoc 当该参数为 TRUE 时,将返回 array 而非 o

  • js confirm()方法的使用方法实例

    如果用户点击确定按钮,则 confirm() 返回 true.如果点击取消按钮,则 confirm() 返回 false. 在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入.在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句. 下面我们通过这两个小例子,来了解一下它的使用方法吧: 复制代码 代码如下: <html><head><title>confrim 的使用方法</ti

  • js 将json字符串转换为json对象的方法解析

    例如: JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对象: var str2 = { "name": "cxh", "sex": "man" }; 一.JSON字符串转换为JSON对象 要使用上面的str1,必须使用下面的方法先转化为JSON对象: //由JSON字符串转换为

  • JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即"子类型.prototype = new 父类型();&qu

  • js 字符串转换成数字的三种方法

    方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 一些示例如下: 复制代码 代码如下: parseInt("1234blue");   //returns   1234parseInt("0xA");  

  • js数组循环遍历数组内所有元素的方法

    例,for(){}遍历数组 复制代码 代码如下: <script type="text/javascript"> <!--var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){ arr[i] = arr[i]/2.0;}alert(arr); //--> </script> 例,for in循环遍历数组 复制代码 代码如下: <html><body>

  • js刷新页面方法大全

    如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前

  • 在js(jquery)中获得文本框焦点和失去焦点的方法

    先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')

  • 谈谈JavaScript中的几种借用方法

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

  • JavaScript中的几种继承方法示例

    JavaScript中的几种继承方法示例

    1.原型链继承 原理: 子类原型指向父类实例对象实现原型共享,即Son.prototype = new Father(). 这里先简单介绍下原型 js中每个对象都有一个__proto__属性,这个属性指向的就是该对象的原型.js中每个函数都有一个prototype属性,这个属性指向该函数作为构造函数调用时创建的实例的原型.原型对象上有一个constructor属性,指向创建该对象的构造函数,该属性不可枚举. var obj = {}; obj.__proto__ === Object.proto

  • JavaScript中OnLoad几种使用方法

    在前几个项目的开发中 遇到onload使用的几种情形 1. 可以在Body 里面执行 <body onload="alert(123)"></body>2. 先定义好 在页面加载完成后使用 复制代码 代码如下: <script type="text/javascript"> function test(){ var aa = "嘻嘻,你个大猪猪"; alert(aa); } window.onload = te

  • 详解JavaScript中的4种类型识别方法

    具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console

  • 谈谈JavaScript中的垃圾回收机制

    JavaScript 具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存. 在编写 JavaScript 程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理. 这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间), 周期性地执行这一操作. 具体到浏览器中的实现,则通常有两个策略,分别为标记清除和引用计数. 一.标记清除 JavaScri

  • 详解JavaScript中哪一种循环最快呢

    了解哪一种 for 循环或迭代器适合我们的需求,防止我们犯下一些影响应用性能的低级错误. JavaScript 是 Web 开发领域的"常青树".无论是 JavaScript 框架(如 Node.js.React.Angular.Vue 等),还是原生 JavaScript,都拥有非常庞大的粉丝基础.我们来谈谈现代 JavaScript 吧.循环一直是大多数编程语言的重要组成部分,而现代 JavaScript 为我们提供了许多迭代或循环值的方法. 但问题在于,我们是否真的知道哪种循环或

  • 分享JavaScript 中的几种继承方式

    目录 一.原型链 1.1 原型链的问题 二.盗用构造函数 2.1 基本思想 2.2 可向父类构造函数传参 2.3 盗用构造函数的问题 三.组合继承(伪经典继承) 3.1 基本思想 3.2 组合继承的问题 四.原型式继承 4.1 基本思想 4.2 Object.create() (1)语法 (2)示例 (3)手动实现 五.寄生式继承 5.1 基本思想 5.2 寄生式继承 六.寄生式组合继承 6.1 基本思想 前言: 说到JavaScript中的继承,与之密切相关的就是原型链了,JavaScript

  • Javascript中的几种URL编码方法比较

    javascript中存在几种对URL字符串进行编码的方法:escape(),encodeURI(),以及encodeURIComponent().这几种编码所起的作用各不相同. escape() 方法: 采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字).比如,空格符对应的编码是%20. 不会被此方法编码的字符: @ * / + encodeURI()

  • 深入理解JavaScript中为什么string可以拥有方法

    引子 我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null.Boolean.Number和String. 引用类型的值是保存在堆内存中的对象,它的值是按引用访问的.引用类型主要有Object.Array.Function.RegExp.Date. 对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪. var favs=['鸡蛋','莲蓬']

  • Javascript中的几种继承方式对比分析

    开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现

随机推荐