underscore 源码解读之 bind 方法的实现
自从进入七月以来,我的 underscore 源码解读系列 更新缓慢,再这样下去,今年更完的目标似乎要落空,赶紧写一篇压压惊。
前文 跟大家简单介绍了下 ES5 中的 bind 方法以及使用场景(没读过的同学建议先看看),毕竟 bind 是 ES5 的东西,低版本 IE 不支持。今天就根据 underscore 的实现,来聊一聊如何实现一个 bind 的 polyfill。
之前在 ECMAScript 5(ES5) 中 bind 方法简介备忘 一文中,给出了一个 "穷人版" 的 polyfill,如下。
Function.prototype.bind = Function.prototype.bind || function(context) {
var that = this;
return function() {
return that.apply(context, arguments);
}
}
说实话,基本可以满足多数的场景需求了。bind 方法返回的还是一个方法(经典闭包),很巧妙地用 apply 改变(绑定)了 this 指向。但是毫无疑问这样简单的实现是有问题的。
首先,该方法只支持传入一个参数,为方法需要绑定的 this 指向,原生的 bind 方法可以传入多个参数,如果要问这些参数干嘛用,回头翻翻 前文。如何实现传参?非常简单,传入,然后提取,不就 ok 了?
underscore 源码中重点看这几行:
var args = slice.call(arguments, 2);
var bound = function() {
// args.concat(slice.call(arguments))
// 最终函数的实际调用参数由两部分组成
// 一部分是传入 _.bind 的参数
// 另一部分是传入 bound(_.bind 所返回方法)的参数
return executeBound(func, bound, context, this, args.concat(slice.call(arguments)));
};
return bound;
其实核心实现差不多,都是闭包返回函数。第一行将参数(args)提取保存(这些参数将会在方法中被优先调用),返回的是一个叫做 bound 的方法,bound 也能传参啊,用 args.concat(slice.call(arguments))
将两个参数合并当做原方法的参数,因为 args 会优先调用,所以合并结果 args 中元素在先。
接着来看 executeBound 函数,为何 "穷人版" 一行的代码,这里却要整个函数出来?原因是 "穷人版" 没有考虑 bind 返回函数被 new 操作的情况。如果不是被 new 操作,那就简单了,和 "穷人版" 是一样一样的,直接看 underscore 源码。
// 非 new 调用 _.bind 返回的方法(即 bound)
// callingContext 不是 boundFunc 的一个实例
if (!(callingContext instanceof boundFunc))
return sourceFunc.apply(context, args);
如果进行 new 运算操作呢?这里我们还要复习一下 new 运算,有兴趣的可以看下我以前的文章 一道有意思的笔试题引发的对于 new 操作符的思考。概括地讲,如果构造函数有返回值,且返回值是对象(不能是 null),那么对其进行 new 操作返回该对象,否则返回构造实例。所以在方法 executeBound 中,我们需要进一步判断这个构造函数有没有返回值,返回值是不是对象。
var executeBound = function(sourceFunc, boundFunc, context, callingContext, args) {
// 非 new 调用 _.bind 返回的方法(即 bound)
// callingContext 不是 boundFunc 的一个实例
if (!(callingContext instanceof boundFunc))
return sourceFunc.apply(context, args);
// 如果是用 new 调用 _.bind 返回的方法
// self 为 sourceFunc 的实例,继承了它的原型链
// self 理论上是一个空对象(还没赋值),但是有原型链
var self = baseCreate(sourceFunc.prototype);
// 用 new 生成一个构造函数的实例
// 正常情况下是没有返回值的,即 result 值为 undefined
// 如果构造函数有返回值
// 如果返回值是对象(非 null),则 new 的结果返回这个对象
// 否则返回实例
// @see http://www.cnblogs.com/zichi/p/4392944.html
var result = sourceFunc.apply(self, args);
// 如果构造函数返回了对象
// 则 new 的结果是这个对象
// 返回这个对象
if (_.isObject(result)) return result;
// 否则返回 self
// var result = sourceFunc.apply(self, args);
// self 对象当做参数传入
// 会直接改变值
return self;
};
关于这部分的源码,有兴趣的同学可以参考 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L698-L719。
关于 Function 这部分,接下去的打算是去抖一篇,节流一篇,然后其他零碎的方法概要一篇,希望能在十月中旬左右结束掉吧。
underscore 源码解读之 bind 方法的实现的更多相关文章
- 前端日报-20160527 underscore 源码解读
underscore 源码解读 API文档浏览器 JavaScript 中加号操作符细节 抛弃 jQuery,拥抱原生 JS 从 0 开始学习 GitHub 系列之「加入 GitHub」 js实现克隆 ...
- Underscore 源码
Underscore 源码 作者:韩子迟 What? 不知不觉间,「Underscore 源码解读系列」进入了真正的尾声,也请允许我最后一次 po 下项目的原始地址 https://github.co ...
- SDWebImage源码解读 之 NSData+ImageContentType
第一篇 前言 从今天开始,我将开启一段源码解读的旅途了.在这里先暂时不透露具体解读的源码到底是哪些?因为也可能随着解读的进行会更改计划.但能够肯定的是,这一系列之中肯定会有Swift版本的代码. 说说 ...
- AFNetworking 3.0 源码解读(十)之 UIActivityIndicatorView/UIRefreshControl/UIImageView + AFNetworking
我们应该看到过很多类似这样的例子:某个控件拥有加载网络图片的能力.但这究竟是怎么做到的呢?看完这篇文章就明白了. 前言 这篇我们会介绍 AFNetworking 中的3个UIKit中的分类.UIAct ...
- AFNetworking 3.0 源码解读(一)之 AFNetworkReachabilityManager
做ios开发,AFNetworking 这个网络框架肯定都非常熟悉,也许我们平时只使用了它的部分功能,而且我们对它的实现原理并不是很清楚,就好像总是有一团迷雾在眼前一样. 接下来我们就非常详细的来读一 ...
- AFNetworking 3.0 源码解读(三)之 AFURLRequestSerialization
这篇就讲到了跟请求相关的类了 关于AFNetworking 3.0 源码解读 的文章篇幅都会很长,因为不仅仅要把代码进行详细的的解释,还会大概讲解和代码相关的知识点. 上半篇: URI编码的知识 关于 ...
- AfNetworking 3.0源码解读
做ios开发,AFNetworking 这个网络框架肯定都非常熟悉,也许我们平时只使用了它的部分功能,而且我们对它的实现原理并不是很清楚,就好像总是有一团迷雾在眼前一样. 接下来我们就非常详细的来读一 ...
- ThreadPoolExecutor源码解读
1. 背景与简介 在Java中异步任务的处理,我们通常会使用Executor框架,而ThreadPoolExecutor是JUC为我们提供的线程池实现. 线程池的优点在于规避线程的频繁创建,对线程资源 ...
- jdk1.8.0_45源码解读——Set接口和AbstractSet抽象类的实现
jdk1.8.0_45源码解读——Set接口和AbstractSet抽象类的实现 一. Set架构 如上图: (01) Set 是继承于Collection的接口.它是一个不允许有重复元素的集合.(0 ...
随机推荐
- 在DevExpress程序中使用条形码二维码控件,以及进行报表打印处理
在很多业务系统里面,越来越多涉及到条形码.二维码的应用了,不管在Web界面还是WInform界面都需要处理很多物料相关的操作,甚至很多企业为了减少录入错误操作,为每个设备进行条形码.二维码的标签,直接 ...
- C#开发微信门户及应用(12)-使用语音处理
我们知道,微信最开始就是做语音聊天而使得其更加流行的,因此语音的识别处理自然也就成为微信交流的一个重要途径,微信的开发接口,也提供了对语音的消息请求处理.本文主要介绍如何利用语音的识别,对C#开发的微 ...
- Golang接口(interface)三个特性(译文)
The Laws of Reflection 原文地址 第一次翻译文章,请各路人士多多指教! 类型和接口 因为映射建设在类型的基础之上,首先我们对类型进行全新的介绍. go是一个静态性语言,每个变量都 ...
- 计算(LnN!)的值
import java.util.*;import java.math.*;public class CaculatorLnN { public static void main(String[] a ...
- 你必须知道的Microsoft SQL Server一
不知道为什么我Win10环境下安装的Sqlserver2012,智能提示的功能基本上没有用,没办法,我还是选择安装插件SQL Prompt 5吧.下载地址:http://www.uzzf.com/so ...
- jQuery与ajax 基础运用
jQuery是一个轻量级js框架,使用方便快捷,更是封装ajax处理方法,如$.load() $.get() $.post() 等 但最常用的方法还是$.ajax() 一.一般的格式为 $.ajax( ...
- Java程序员应该掌握的10项技能
这篇文章主要介绍了作为Java程序员应该掌握的10项技能,包括java的知识点与相关的技能,对于java的学习有不错的参考借鉴价值,需要的朋友可以参考下 1.语法:必须比较熟悉,在写代码的时候ID ...
- ASP.NET中后台数据和前台控件的绑定
关于ASP.NET中后台数据库和前台的数据控件的绑定问题 最近一直在学习个知识点,自己创建了SQL Server数据库表,想在ASP.NET中连接数据库,并把数据库中的数据显示在前台,注意,这里的数据 ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- js模仿ios select效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...