vue2工具函数本文参加了由公众号@若川视野发起的每周源码共读活动，点击了解详情一起参与。 **这是源码共读的第2

本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
**这是源码共读的第24期，链接：[初学者也能看懂的 Vue2 源码中那些实用的基础工具函数]juejin.cn/post/707976…

前言

了解vue2工具函数的基本封装，夯实基础功

源码解读

创建一个空对象使用Object.freeze来冻结空对象，防止其扩展或被更改

var emptyObject = Object.freeze({});

isUndef 判断一个变量值是undefined

  function isUndef (v) {
    return v === undefined || v === null
  }

isDef

  function isDef (v) {
    return v !== undefined && v !== null
  }

isTrue 判断变量值为true

  function isTrue (v) {
    return v === true
  }

isFalse 判断变量值为false

  function isFalse (v) {
    return v === false
  }

isPrimitive 检查一个变量是基本类型, 通过typeof来判断

  function isPrimitive (value) {
    return (
      typeof value === 'string' ||
      typeof value === 'number' ||
      // $flow-disable-line
      typeof value === 'symbol' ||
      typeof value === 'boolean'
    )
  }

isObject 判断变量值是对象

 function isObject (obj) {
    return obj !== null && typeof obj === 'object'
  }

isPlainObject 判断一个变量是对象，更加准确的判断 JavaScript 的 Object.prototype.toString 方法会返回一个表示对象类型的字符串，格式为 [object Type]，其中 Type 是对象的具体类型，但是直接使用对象.toString()调用时，许多对象（数组、函数等）会重写toString()方法，返回对象的字符串格式，导致结果不准确。所以通过 .call(value)，可以强制让 value 作为 this 传递给 Object.prototype.toString，从而绕过对象自身的 toString 方法，直接调用原始的 Object.prototype.toString得到想要的结果。

 /**
   * Get the raw type string of a value, e.g., [object Object].
   */
  var _toString = Object.prototype.toString;

  function toRawType (value) {
    return _toString.call(value).slice(8, -1)
  }

  /**
   * Strict object type check. Only returns true
   * for plain JavaScript objects.
   */
  function isPlainObject (obj) {
    return _toString.call(obj) === '[object Object]'
  }

isRegExp 判断变量是一个正则

 function isRegExp (v) {
    return _toString.call(v) === '[object RegExp]'
  }

isValidArrayIndex 判断是一个有效的数组索引，将传参通过parseFloat转换成浮点类型值n，在判断n>0 且向下取整为n并且是一个有限数字

  /**
   * Check if val is a valid array index.
   */
  function isValidArrayIndex (val) {
    var n = parseFloat(String(val));
    return n >= 0 && Math.floor(n) === n && isFinite(val)
  }

为什么要用parseFloat而不是用parseInt、Number、+？参考juejin.cn/post/723591… 写的非常详细

isPromise判断,这里通过val存在then和catch来判断的，非常好的借鉴思路

 function isPromise (val) {
    return (
      isDef(val) &&
      typeof val.then === 'function' &&
      typeof val.catch === 'function'
    )
  }

toString将值转换为他对应的字符串形式，数组和对象是通过JSON.stringify来转换的

 function toString (val) {
    return val == null
      ? ''
      : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
        ? JSON.stringify(val, null, 2)
        : String(val)
  }

toNumber, 这里单独判断了变量是否为NaN

 function toNumber (val) {
    var n = parseFloat(val);
    return isNaN(n) ? val : n
  }

remove, 移除数组的值

  function remove (arr, item) {
    if (arr.length) {
      var index = arr.indexOf(item);
      if (index > -1) {
        return arr.splice(index, 1)
      }
    }
  }

hasOwn, hasOwnProperty() 方法返回一个布尔值，表示对象自有属性（而不是继承来的属性）中是否具有指定的属性

  var hasOwnProperty = Object.prototype.hasOwnProperty;
  function hasOwn (obj, key) {
    return hasOwnProperty.call(obj, key)
  }

cached, 缓存函数，这里通过闭包来缓存

  function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
      var hit = cache[str];
      return hit || (cache[str] = fn(str))
    })
  }

camelize，将on-clock转换成onClick，这里用到了16中的cached函数，节约性能

 var camelizeRE = /-(\w)/g;
  var camelize = cached(function (str) {
    return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
  });

capitalize，将第一个字母转换为大写

var capitalize = cached(function (str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
  });

hyphenate，将onClick转换为on-click

  var hyphenateRE = /\B([A-Z])/g;
  var hyphenate = cached(function (str) {
    return str.replace(hyphenateRE, '-$1').toLowerCase()
  });

polyfillBind, 对bind方法做了一个polyfill兼容

function polyfillBind (fn, ctx) {
    function boundFn (a) {
      var l = arguments.length;
      return l
        ? l > 1
          ? fn.apply(ctx, arguments)
          : fn.call(ctx, a)
        : fn.call(ctx)
    }

    boundFn._length = fn.length;
    return boundFn
  }

  function nativeBind (fn, ctx) {
    return fn.bind(ctx)
  }

  var bind = Function.prototype.bind
    ? nativeBind
    : polyfillBind;

toArray, 将类数组对象转换为数组

  function toArray (list, start) {
    start = start || 0;
    var i = list.length - start;
    var ret = new Array(i);
    while (i--) {
      ret[i] = list[i + start];
    }
    return ret
  }

extend, 从目标对象融合他的属性值

  function extend (to, _from) {
    for (var key in _from) {
      to[key] = _from[key];
    }
    return to
  }

toObject, 将arr中的对象值扁平放在一个对象中

  function toObject (arr) {
    var res = {};
    for (var i = 0; i < arr.length; i++) {
      if (arr[i]) {
        extend(res, arr[i]);
      }
    }
    return res
  }

深度比较函数looseEqual

通过===全等式来过滤基本类型比较
a和b都是数组和一般对象类型，则使用深度递归调用looseEqual，判断对象包含的所有属性都相等才返回true
Date类型对象比较时间戳是否相等
最后a和b类型不一致，将他们转换成string类型来比较

function looseEqual (a, b) {
    if (a === b) { return true }
    var isObjectA = isObject(a);
    var isObjectB = isObject(b);
    if (isObjectA && isObjectB) {
      try {
        var isArrayA = Array.isArray(a);
        var isArrayB = Array.isArray(b);
        if (isArrayA && isArrayB) {
          return a.length === b.length && a.every(function (e, i) {
            return looseEqual(e, b[i])
          })
        } else if (a instanceof Date && b instanceof Date) {
          return a.getTime() === b.getTime()
        } else if (!isArrayA && !isArrayB) {
          var keysA = Object.keys(a);
          var keysB = Object.keys(b);
          return keysA.length === keysB.length && keysA.every(function (key) {
            return looseEqual(a[key], b[key])
          })
        } else {
          /* istanbul ignore next */
          return false
        }
      } catch (e) {
        /* istanbul ignore next */
        return false
      }
    } else if (!isObjectA && !isObjectB) {
      return String(a) === String(b)
    } else {
      return false
    }
  }

25.looseIndexOf, 查找数组列表中那个值与val深度相等，并返回对应的数组下标

 function looseIndexOf (arr, val) {
    for (var i = 0; i < arr.length; i++) {
      if (looseEqual(arr[i], val)) { return i }
    }
    return -1
  }

once, fn函数自会被调用一次，这里也是使用了闭包来包裹called变量

  function once (fn) {
    var called = false;
    return function () {
      if (!called) {
        called = true;
        fn.apply(this, arguments);
      }
    }
  }

结语

如有问题，谢谢帮忙指正