概述

很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以就了结研究underscore源码这一心愿吧。

underscore.js源码研究(1)

underscore.js源码研究(2)

underscore.js源码研究(3)

underscore.js源码研究(4)

underscore.js源码研究(5)

underscore.js源码研究(6)

underscore.js源码研究(7)

underscore.js源码研究(8)

参考资料:underscore.js官方注释undersercore 源码分析undersercore 源码分析 segmentfault

解决冲突

我们知道,_既是underscore的函数也是对象,我们把方法先挂载到它的对象属性上,使得方法可以直接调用,然后我们利用mixin方法把这些方法挂载到它的原型属性上,使得这个函数返回的underscore对象可以利用这些方法。

那么如果其它库也用到了_这个符号呢?underscore中是这样解决的:

var previousUnderscore = root._;

_.noConflict = function() {
root._ = previousUnderscore;
return this;
}; //给underscore重新定义一个符号:
var __ = _.noConflict();

内建方法

underscore这个库里面有一些私有的变量和方法,也会暴露出一些方法,这些暴露出的方法一旦被用户改写,可能整个库就不能按照希望的方向运行了。所以underscore把一些暴露的方法赋给一些内建方法,然后在其它方法使用这些方法的时候可以用内建方法判断是否被改写了。示例如下:

//声明内建方法
var builtinIteratee; //双重赋值赋给内建方法
_.iteratee = builtinIteratee = function(value, context) {
return cb(value, context, Infinity);
}; //cb函数中判断iteratee方法是否被改写。
var cb = function(value, context, argCount) {
if (_.iteratee !== builtinIteratee) return _.iteratee(value, context);
if (value == null) return _.identity;
if (_.isFunction(value)) return optimizeCb(value, context, argCount);
if (_.isObject(value) && !_.isArray(value)) return _.matcher(value);
return _.property(value);
};

值得一提的是,由于js中传递的是引用,所以赋给内建方法并不会有太大的内存开销,所以我觉得这个想法非常好。

创建对象

new Person()实际上为我们做了如下事情:

//创建一个对象,并设置其指向的原型
var obj = {'__proto__': Person.prototype}; //调用Person()的构造方法,并且将上下文(this)绑定到obj上
Person.apply(obj, arguments); //返回创建的对象
return obj;

但是使用new需要一个构造函数,这在很多时候非常不方便。更多时候,我们希望通过一个对象直接创建另一个对象,于是就有了Object.create()方法。Object.create(obj)的原理是这样的:

//创建一个临时的构造函数,并将原型指向
var Ctor = function() {};
ctor.prototype = obj; //通过new新建一个对象
var obj2 = new Ctor(); //清除Ctor,防止内存泄漏。并返回obj2
Ctor.prototype = null;
return obj2;

所以,mdn上这样描述Object.create()方法:创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

需要注意的是,为了提升速度,underscore把Ctor进行了缓存

var Ctor = function() {};

所以后面当我们为了防止内存泄漏清除Ctor的时候,只是清除它的原型。

而underscore的baseCreate方法就是对Object.create()方法的polyfill

var baseCreate = function(prototype) {
if (!_.isObject(prototype)) return {};
//nativeCreate即是Object.create()方法
if (nativeCreate) return nativeCreate(prototype); Ctor.prototype = prototype;
var result = new Ctor;
Ctor.prototype = null; return result;
};

需要注意的是,Object.create()方法支持多个参数,但是underscore的baseCreate方法只支持一个参数

underscore.js源码研究(2)的更多相关文章

  1. underscore.js源码研究(8)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  2. underscore.js源码研究(7)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  3. underscore.js源码研究(6)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  4. underscore.js源码研究(5)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  5. underscore.js源码研究(4)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  6. underscore.js源码研究(3)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  7. underscore.js源码研究(1)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  8. underscore.js源码解析(五)—— 完结篇

    最近公司各种上线,所以回家略感疲惫就懒得写了,这次我准备把剩下的所有方法全部分析完,可能篇幅过长...那么废话不多说让我们进入正题. 没看过前几篇的可以猛戳这里: underscore.js源码解析( ...

  9. underscore.js 源码

    underscore.js 源码 underscore]JavaScript 中如何判断两个元素是否 "相同" Why underscore 最近开始看 underscore.js ...

随机推荐

  1. lower_case_table_names

    http://blog.csdn.net/jesseyoung/article/details/40617031 1 简介    在MySQL中,数据库对应数据目录中的目录.数据库中的每个表至少对应数 ...

  2. 利用Delphi-cross-socket 库提升kbmmw 跨平台开发

    以前我写过了,通过httpsys 提升windows 下,delphi 多层应用.随着delphi 10.2 对linux 的支持,很多人也想在linux 下 发布kbmmw 服务器,但是官方仅通过i ...

  3. MacBook小技巧

    退出全屏:Control+Command+F.关闭当前的应用程序:Command+W.退出应用程序,可对着Dock上的应用程序辅助点按(右键),选择退出.也可直接按Commnad+Q退出当前的应用程序 ...

  4. express框架搭建服务端

    1.管理员权限全局安装express npm i -g express-generator@4 2.创建express项目 express -e projectName 3.进入项目并安装 cd pr ...

  5. Codeforces 1060E(思维+贡献法)

    https://codeforces.com/contest/1060/problem/E 题意 给一颗树,在原始的图中假如两个点连向同一个点,这两个点之间就可以连一条边,定义两点之间的长度为两点之间 ...

  6. oracle 11g中文乱码解决的办法一

    oracle中文乱码解决的办法 正常安装完oracle客户端后,插入数据时,发现中文都是问号. PLL/SQL中输入select userenv('LANGUAGE') From Dual,结果为AM ...

  7. idea配置github

    一.事先准备 1.安装Git Git下载: http://git-scm.com/downloads 最新版本是2.1.2 git登陆地址:https://github.com/ 2.注册GitHub ...

  8. Attach()和Detach()函数

    一.Windows对象和MFC对象的区别? MFC对象实际上并没有把整个Windows对象都包装在其中.对于窗口:MFC对象它只是有一个窗口句柄而已,这个窗口句柄如果指向一个实际存在的窗口对象(窗口对 ...

  9. js五道经典练习题--第三道实现购物车功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  10. js获取元素下标

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...