underscore.js原始碼解析2

熊貓ewall發表於2017-06-05
  1. _.isNull(object)
    如果object的值是null,返回true。

_.isNull(null);
=> true;
_.isNull(undefined);
=> false;

_.isNull =function(obj){
  return obj === null;
}

undefined派生自null,所以兩者相等(==),但是不全等(===),所以這裡如果obj是undefined則會返回false。

2.isArray(object)
如果object是一個陣列,返回true

(function() {return _.isArray(arguments);}();
=> false 這裡的arguments是一個類陣列,所以返回false
_.isArray([1,2,3])
=> true

var ObjProto = Object.prototype;
var toString = ObjProto.toString;
var nativeIsArray = Array.isArray;
_.isArray = nativeIsArray || function(obj) {
  return toString.call(obj) === `[object Array]`
}

如果有es5原生的isArray()方法,就用原生的;如果沒有就呼叫經典的陣列判斷方法,通過Object.prototype.toString()方法,判斷某個物件值屬於哪種內建型別。

3.isArguments、isFunction、isString、isNumber、isDate、isRegExp、isError這些方法放到一起講,因為這些方法的的原始碼實現都是放到了一個each函式中遍歷每一個方法名然後實現的布林值判定。原始碼:

_.each([`Arguments`, `Function`, `String`, `Number`, `Date`, `RegExp`, `Error`], function(name) {
    _[`is` + name] = function(obj) {
     //呼叫Object原生的toString()方法,實現安全的型別檢測
      return toString.call(obj) === `[object ` + name + `]`;
    };
  });
  1. _.isBoolean(object)
    如果object是一個布林值,返回true,否則返回false

_.isBoolean(null)
=> false

_.isBoolean = function(obj) {
  return obj === true || obj === false || toString.call(obj) === `[object Boolean]`;
}
  1. _.isNaN(object)
    如果object是NaN,返回true
    注意:這和原生的isNaN函式不一樣,如果變數是undefined,原生的isNaN函式也會返回true。

_.isNaN(NaN);
=> true
isNaN(undefined);
=> true
_.isNaN(undefined);
=> false

_.isNaN = function(obj) {
  return _.isNumber(obj) && obj !== +obj; //"+obj"是把其他型別轉換成Number型別的快捷方式
}
  1. isFinite(object)
    如果object是一個有限數字,返回true

_.isFinite(-101);
=> true
_.isFinite(-Inifinity);
=> false

 _.isFinite = function(obj) {
    return isFinite(obj) && !isNaN(parseFloat(obj));
  };
  1. isObject(value)
    如果object是一個物件,返回true。
    需要注意的是js陣列和函式是物件,字串和數字不是。

_.isObject({})
=> true
_.isObject(1)
=>false

_.isObject = function(obj) {
    var type = typeof obj;
    return type === `function` || type === `object` && !!obj;
  };

“!!obj”是為了排除null以及undefined

  1. isElement(object)
    如果object是一個DOM元素,返回true

_.isElement(document.body);
=> true

_.isElement = function(obj) {
  return !!(obj && obj.nodeType === 1);
}
  1. _.has(object,key)
    物件是否包含給定的鍵嗎?等同與object.hasOwnProperty(key),但是使用hasOwnProperty函式的一個安全引用,以防止意外覆蓋。

_.has({a: 1 , b: 2,c: 3}, “b”);
=> true

var ObjProto = Object.prototype;
var hasOwnProperty = Object.hasOwnProperty;
_.has = function(obj,key) {
  return obj != null &&hasOwnProperty.call(obj,key);
}

hasOwnProperty() 方法會返回一個布林值,指示物件是否具有指定的屬性作為自身(不繼承)屬性。

學習參考:
http://www.qdfuns.com/house/17398/note/class/id/bb6dc3cabae6651b94f69bbd562ff370/page/2.html
https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js
http://www.css88.com/doc/underscore/#isEmpty
http://www.css88.com/doc/underscore/docs/underscore.html

這是我學習underscore受益匪淺的幾個網站和大神寫得博文,想學好underscore的話就去看看吧


相關文章