vue.js - 怎么理解这里面的argument？

问题描述

问 题

function def (obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {
  // cache original method
  var original = arrayProto[method];
  def(arrayMethods, method, function mutator () {
    var arguments$1 = arguments;

    // avoid leaking arguments:
    // http://jsperf.com/closure-with-arguments
    var i = arguments.length;
    var args = new Array(i);
    while (i--) {
      args[i] = arguments$1[i];
    }
    var result = original.apply(this, args);
    var ob = this.__ob__;
    var inserted;
    switch (method) {
      case 'push':
        inserted = args;
        break
      case 'unshift':
        inserted = args;
        break
      case 'splice':
        inserted = args.slice(2);
        break
    }
    if (inserted) { ob.observeArray(inserted); }
    // notify change
    ob.dep.notify();
    return result
  });
});

解决方案

好像是为了防止 内存泄露, 所以new了一个数组, 而不是用[].slice.call(arguments);

/**
 * Define a property.
 */
function def (obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

上面是def的定义, 可以看到参数value, 作者传入了一个 mutator修改器;
其实相当于
Object.definePropery( {arrProto}, push, mutator)

举个列子:

当我们调用 [a,b,c].push(d) 的时候, 就会进入 mutator, 因为arr的原型在Observer.js会被修改成
arr.__proto__ = arrProto; 原型的push被改写, 所以arguments就是我们 push的参数 d;

具体过程可以看看我写的

这篇关于vue.js - 怎么理解这里面的argument？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！