【译】在时间属性上慎用Angular.js1.4的“angular.merge”函数

在时间属性上慎用Angular.js1.4的“angular.merge”函数

原文：Pay Attention to "angular.merge" in 1.4 on Date Properties

今天我将应用从Angular.js1.3.9升级到1.4的时候，发现了一些Bug。在经过一翻研究后，发现它们与时间属性及1.4中的“angular.merge”函数有关。

在官方文档中，“angular.merge”的表述如下：

复制src对象中的可枚举属性到dst对象中，以深度扩展目标对象“dst”。

同时也提到了与先前版本中的”angular.extend“的区别。

与"extend()"不同，在进行深度复制时，"merge()"支持递归复制。

让我们来看一个简单的例子，在下面的代码中，作用域内有一个源对象和一个自定义对象，接着我用”angular.extend“将自定义对象复制到源对象中。

 $scope.source = {
   name: 'Shaun',
   age: 35,
   birthDate: new Date(1997, 5, 27),
   skills: {
     dotNet: {
       level: 'expert',
       years: 10
     },
     javaScript: {
       level: 'newbie',
       years: 2
     }
   },
   mvp: [
     2011,
     2012,
     2013,
     2014,
     2015
   ]
 };
  
 $scope.custom = {
   name: 'Ziyan',
   age: 35,
   skills: {
     dotNet: {
       level: 'hero', 
       years: 100,
       active: true
     },
   },
   mvp: [
     2016
   ]
 };
  
 $scope.extend = angular.extend({}, $scope.source, $scope.custom);

从结果中我们可以看到，“angular.extend”执行的是浅拷贝，像“name”,”age”和“birthDate”这些原始属性值已经合并了，但因为“skills”和”mvp”是对象和数组，”angular.extend“会复制全部值，而不是数组或对象中的成员。

现在让我们用“angular.merge”来复制：

$scope.merge = angular.merge({}, $scope.source, $scope.custom);

我们可能看到，当用“angular.merge”的时候，对象属性是递归复制的。

到目前为止，一切看起来还不错。但是有些人可能会发现，在使用“angular.merge”的时候，其中一个属性“birthDate”被设成了空对象。

如果深入研究angular.js的源码，我们会发现，无论是“angular.extend”还是“angular.merge”都调用了“baseExtend”这个内部函数。它将多个对象合并到目标对象，用一个标志参数来表明是否为深度合并。

在这个函数内部，会遍历每个可枚举属性，将值复制到目标对象。如果源属性是一个对象并且需要深度复制，Angular.js会在目标对象中创建一个空对象，并且对这个属性递归执行这个函数。

   function baseExtend(dst, objs, deep) {
      var h = dst.$$hashKey;
     
      for (var i = 0, ii = objs.length; i < ii; ++i) {
        var obj = objs[i];
        if (!isObject(obj) && !isFunction(obj)) continue;
        var keys = Object.keys(obj);
        for (var j = 0, jj = keys.length; j < jj; j++) {
          var key = keys[j];
         var src = obj[key];
    
         if (deep && isObject(src)) {
           if (!isObject(dst[key])) dst[key] = isArray(src) ? [] : {};
           baseExtend(dst[key], [src], true);
         } else {
           dst[key] = src;
         }
       }
     }
    
     setHashKey(dst, h);
     return dst;
   }

除了日期之外，它几乎可以处理所有情况。如果我们定义了一个日期属性，例如“birthDate”，它就会用“angular.isObject”检查这个属性是否是为对象，返回的是“true”。所以它会在目标对象中创建一个属性名为“birthDate”的空对象，并且对“birthDate”调用“baseExtend”。但是因为“birthDate”的属性为Date，并不是可枚举属性，所以这个对象不会分配到任何数据。这就是为什么结果中"birthDate"属性为空的原因。

如果我将Angular.js 中的“baseExtend”函数复制到作用域内，并将代码改成如下形式，当属性为Date时，也会执行简单的复制了。

 $scope.$baseExtend = function (dst, objs, deep) {
   for (var i = 0, ii = objs.length; i < ii; ++i) {
     var obj = objs[i];
     if (!angular.isObject(obj) && !angular.isFunction(obj)) {
      console.log('[' + obj + '] = (skip)');
       continue;
     }
     var keys = Object.keys(obj);
     for (var j = 0, jj = keys.length; j < jj; j++) {
       var key = keys[j];
       var src = obj[key];
       // perform deep copy if
       // 1. spcified by user
       // 2. source property is an object
       // 3. source property is NOT a date
       if (deep && angular.isObject(src) && !angular.isDate(src)) {
         if (!angular.isObject(dst[key])) {
           console.log('[' + key + '] = (Try copy an object to an non-object, create an empty for deep copy.)');
           dst[key] = angular.isArray(src) ? [] : {};
         }
         $scope.$baseExtend(dst[key], [src], true);
       } 
       else {
         dst[key] = src;
         
         console.log('[' + key + '] = ' + src);
       }
     }
   }
   return dst;
 };
  
 $scope.sample = $scope.$baseExtend({}, [$scope.source, $scope.custom], true);

结果如下：

总结：

将框架升级到新版本是一种冒险行为。我们需要进行大量的回归测试，以确保不会出现任何问题。我在执行E2E测试时发现了这个问题。我想这是Angular.js的Bug，我已经将这个问题贴了出来。在他们确认和修改之前，在你的应用中，慎用“angular.merge”这个函数。