Underscore-分析

0.Ecmascript的版本重要时间点

Ecmascript262-3 1999年，ie5.5及以后完全支持，ff,chrome等全部支持
Ecmascript262-4 因为跨越太大，废弃
Ecmascript262-3.1 后改名ecmascript5 主流浏览器支持，ie8部分支持，ie9全部支持

1.常用ecmascript5原生方法

1.1 Array.isArray(arg)
如果是数组，放回true

if (!Array.isArray) {
Array.prototype.isArray = function(ar) {
return Object.prototype.toString.call(ar) === “[object Array]”
}
}

1.2 Object.keys(obj)
把obj的所有属性枚举放到数组里返回，顺序取决于for in的顺序，Object.keys不枚举原型链中的属性

if (!Object.keys) {
Object.prototype.keys = function(obj) {
var ar = [];
for (var i in obj) {
if (Object.prototype.hasOwnProperty.call(obj,i) {
ar.push(i);
}
}
return ar;
}
}

1.3 FuncProto.bind
fun.bind(thisArg[, arg1[, arg2[, ...]]])
if (!Function.bind) {
Function.prototype.bind = function(context) {
var fn = this,
arg = [];
for (var i = 1, len = arguments.length; i < len; i++) {
arg[i-1] = arguments[i];
}
return function() {
for (var j = 0, len2 = arguments.length; j < len2; j++) {
arg[i++] = arguments[j];
}
fn.apply(context, arg);
}
}
}

1.4 Object.create
Object.create(prototype, [ propertiesObject ])
创建一个对象并返回，让该对象的prototype对象指向参数的对象

if (!Object.prototype.create) {
Object.prototype.create = (function() {
function fn() {

};
var hasown = Object.prototype.hasOwnProperty;
return function(proto, args) {
var obj;
fn.prototype = proto;
obj = new fn();
fn.prototype = null;
if (args) {
for (var i in args) {
if (hasown.call(args, i)) {
obj[i] = args[i];
}
}
}
return obj;

}
}())
}

2. _

构建UnderScore的安全的构造函数

关键点是安全：
var _ = function(obj) {
if (obj instanceof _) return obj;
if (!(this instanceof _)) return new _(obj);
this._wrapped = obj;
};
如果参数obj是通过构造函数_new出来的对象，那么直接返回
如果this不是_的对象，说明可能不是通过new _的调用，所以执行
return new _(obj);
最终执行this._wrapped = obj;

2.1 new操作符的过程

当new ConstructorFn(...) 执行时：
1.一个新对象被创建。它继承自ConstructorFn.prototype(newobj.prototype=foo.prototype).
2.构造函数 ConstructorFn 被执行。执行的时候，相应的传参会被传入，同时上下文(this)会被指定为这个新实例。new ConstructorFn 等同于 new ConstructorFn(), 只能用在不传递任何参数的情况。
3.如果构造函数返回了一个“对象”，那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象，那么new出来的结果为步骤1创建的对象，ps：一般情况下构造函数不返回任何值，不过用户如果想覆盖这个返回值，可以自己选择返回一个普通对象来覆盖。当然，返回数组也会覆盖，因为数组也是对象。

 

3.baseCreate 

创建一个对象，让它的prototype指向参数对象，多用于子类继承父类

首先判断参数是否为对象或函数，如果不是，返回空对象。

然后判断是否存在原生create，如果有，调用。

如果没有，通过ctor函数，让ctort.prototype = prototype;

var result = new ctor();

ctor.prototype = null;

var baseCreate = function(prototype) {
if (!_.isObject(prototype)) return {};
if (nativeCreate) return nativeCreate(prototype);
Ctor.prototype = prototype;
var result = new Ctor;
Ctor.prototype = null;
return result;
};

4.var property

var property = function(key) {
return function(obj) {
return obj == null ? void 0 : obj[key];
};
};

生成安全的取对象属性的方法，防止undefined或null取属性值而报错。

关键点：

obj == null ? void 0 : obj[key];

obj == null 实际上是一个隐式转换，就是当obj是null或undefined的时候。

==的隐式转换规则，详见Ecmascript： http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.1

如果双方类型一致，对比值：

如果是undefined， true

如果是null， true

如果是number，

　　如果其中一个是NaN,不相等

　　如果值相等，相等

　　+0， -0， 0是相等的。

如果是String，

　　当两个字符串长度一致，而且对应位置字符一致那么相等。

如果是Boolean

　　当两者都是true或者false时候相等。

如果是Object

　　当两者的指针指向一个对象时相等。

 

如果类型不一致，

null, undefined相等

string，boolean和number比较时候会转换成数字再比较

boolean和其他的比较会转换成number，true1 false 0

Object和string或number比较会先调用toString或valueOf，得到值后在比较。

　　

5. optimizeCb

用于优化回调函数:

1)  绑定上下文context，如果有context，返回绑定context的函数，用于后续操作。如果没有context，直接返回

2）通过客户端传入的argCount决定返回函数的参数个数，防止使用arguments对象，因为在一些旧的v8版本中，使用

arguments会导致函数得不到浏览器优化。

6.createreduce

在函数内部创建一个闭包的迭代函数，然后返回一个函数，判断参数，初始化然后调用这个迭代函数。

闭包作用

闭包大致有这么几个作用：避免命名冲突；私有化变量；变量持久化，让函数参数固定值

这里的作用主要就是变量（函数）持久化，好处就是重复调用的时候不需要再重新创建函数，从而提升执行速度。

为什么要用两层闭包呢？第一层闭包持久化iterator函数，调用reduce和reduceRight函数避免重复新建函数。第二层闭包保存keys,index,length这些变量。

 

7.find

调用情况如下，以findIndex为例，我们一个个分析它的函数

createPredicateIndexFinder(1)

类似于createReduce，传入一个用于表示方向的参数，初始化

迭代的长度，起点位置，迭代器，然后执行，如果迭代器返回true，表示找到了，返回index。否则返回-1

然后看生成迭代器的cb函数

cb

是一个所有回调函数的入口函数，会根据传入的值类型进行判断，然后优化。

如果传入的value是方法，调用optimizeCb优化。返回一个迭代器，参数是value, index, obj

 

8.filter

对每个元素根据传入的函数进行计算，如果true，将这个元素放入数组，最后返回数组。

内部还是先用optimizeCb进行处理函数的绑定和优化，然后执行each，对每个元素处理。

 

9.contains

1.调用values把对象的值转换成数组返回

2.调用indexOf >=0 判断是否在给定的数组（或对象中）

3.使用createIndexFinder生成indexOf方法,关键点有：

1）根据开始index和dir值，生成循环的条件

2）判断是否被查找的元素是不是NaN（obj !== obj),如果是的话，对每个元素调用isNaN判断是不是NaN，如果有的话，返回true

 

10. isNaN

_.isNaN = function(obj) {
return _.isNumber(obj) && obj !== +obj;
};

一般我们判断NaN的方法只需要：a !== a，那么就是NaN了。

而这里是为了同时检验出：new Object(NaN)

这个数的类型（toString)是Number，如果+obj的话就转换成了NaN，满足new Object(NaN） ！== NaN

另附对象转换成数字：

When the [[DefaultValue]] internal method of O is called with hint Number, the following steps are taken:

1. Let valueOf be the result of calling the [[Get]] internal method of object O with argument "valueOf".
2. If IsCallable(valueOf) is true then,
   1. Let val be the result of calling the [[Call]] internal method of valueOf, with O as the this value and an empty argument list.
   2. If val is a primitive value, return val.
3. Let toString be the result of calling the [[Get]] internal method of object O with argument "toString".
4. If IsCallable(toString) is true then,
   1. Let str be the result of calling the [[Call]] internal method of toString, with O as the this value and an empty argument list.
   2. If str is a primitive value, return str.
5. Throw a TypeError exception.

 首先调用valueOf，如果可执行，返回值，否则调用toString，返回值。

11.invoke

_.invoke(obj, method)

对obj的每个元素执行method方法，结果组成数组并返回；

如果method是自定义函数，那么执行method，否则，获得eachvalue[method]并执行。

 

12.shuffle

乱序排列一个数组，几个关键点：

1）返回的是新数组

2）有可能顺序是不变的

3）random的

3）核心是：

if (random !== index) shuffle[index] = shuffle[random]

shuffle[random] = set[index];

 

13.partial 

给函数设置预定义的变量，允许使用占位符。

核心思想是在partial函数中处理参数，然后返回一个闭包函数，把两部分参数组装在一起。

_.partial = function(func) {

  var args = slice.call(arguments, 1);

  return function() {

    return func.apply(this, args.concat(slice.call(arguments)));

  };

};

可以把固定的操作和参数定义成fn，

var fn = function(myargs1,myargs2..);

然后使用

var mydefin = partial(fn， args);返回一个函数

 

14.memorize

缓存耗费长时间的函数的结果

通过var fab = memorize(fn);

获得一个执行函数，每次执行的时候看是否有关键字，如果

 

15.throttle

节流阀函数，_.throttle(function, wait, [options]) 

如果有很短时间内的多次调用，只在大于等于wait时间时候调用

 

 

15.after和before的技巧

_.after = function(times, func) {
return function() {
if (--times < 1) {
return func.apply(this, arguments);
}
};
};

因为参数也是函数内的一个变量，所以返回的闭包函数对参数的操作也是同一个内存位置，因此直接更新times进行判断。

 

16. Infinity的妙用

用于设置无穷大或小的值，用于查找最大（小）值时候的初始化值：

var max = -Infinity;

if (value > max) {

　　max = value;

}

 

17.eq

关键点

+0和-0如何区分：

1/+0 = Infinity

1/-0 =  -Infinity

 

18. 双叹号作用

用于返回true或false

比如：

var a

此时a是undefined ，而!!a是false

 

 19.template函数

_.template(templateString, [settings]) 

整体思路：

在templateString里设置

三个关键正则参数：

interpolate   插入内容，默认正则是       /<%=([\s\S]+?)%>/g

escape       插入转义后内容，默认正则是       /<%-([\s\S]+?)%>/g

evaluate    只执行一次不返回值，默认正则是       /<%([\s\S]+?)%>/g 

 

填充选项对象，如果自定义的选项没有上面的三个属性，用默认填充。

创建这三个关键字的正则，对输入的模板字符串进行全局的替换，

1.先对非捕获的内容进行转义

var escapes = {
"'": "'",
'\\': '\\',
'\r': 'r',
'\n': 'n',
'\u2028': 'u2028',
'\u2029': 'u2029'
};

2.然后对捕获的内容处理，然后组装成js代码的字符串形式

对所有匹配的正则都做处理，组装成一个大的js代码字符串。

再组装，增加参数定义，常用函数定义等内容在前头。

最后使用new Function创建render函数，函数的参数有两个：

第一个参数是传入的变量对象，如果有setting.variable的话，使用这个字符串作为变量名，然后模板中都是用这个变量名调用和访问，速度会快。

如果没有的话，就命名为obj，然后通过with(obj) {函数体}的方式来使用这个传入的数据。