从另一个对象扩展而不使用object.JavaScript中的assign (ES6特性)

Extending from another object without using Object.assign (ES6 feature) in JavaScript

本文关键字：assign 中的 JavaScript ES6 特性 object 一个对象 扩展      更新时间：2023-09-26

更新1:我之前没有提到这一点，但是我试图避免使用new关键字。Polyfill应该工作得很好。我应该清楚地表明，我是在寻找是否有另一种方法来编写类似的代码。

Chris Elliott的文章《关于JS中继承的常见误解》阐述了一种使用闭包来保护数据隐私的好方法，但使用的是ES6方法Object.assign。

他这样描述:

Object.assign()是由Rick Waldron倡导的ES6新特性，以前在几十个库中实现过。你可能知道它是来自jQuery的$.extend()或来自Underscore的_.extend()。Lodash有一个叫做assign()的版本。传入一个目标对象和任意数量的源对象，它们之间用逗号分隔。

它将通过赋值复制所有可枚举的自身属性以last为优先级的源对象到目标对象。如果存在任何属性名称冲突，则从上一个版本开始

我如何使用ES6特性Object.assign编写这个示例而不使用 ?

let animal = {
  animalType: 'animal',
  describe () {
    return `An ${this.animalType} with ${this.furColor} fur, 
      ${this.legs} legs, and a ${this.tail} tail.`;
  }
};
let mouseFactory = function mouseFactory () {
  let secret = 'secret agent';
  return Object.assign(Object.create(animal), {
    animalType: 'mouse',
    furColor: 'brown',
    legs: 4,
    tail: 'long, skinny',
    profession () {
      return secret;
    }
  });
};
let james = mouseFactory();

通过编写自己版本的object.assign!

function assign(target, sources) {
    // for each object in source, iterate through properties
    // check has own property and add the property to the target 
    // object
    // or just modify in place, too many different ways to do this
    let newTarget = new target();

    for (let i = 0; i < sources.length; i++) {
      for (let key in sources[i]) {
        if (sources[i].hasOwnProperty(key)) {
          newTarget[key] = sources[i][key];
        }
      }
    }
    return newTarget;
}

编辑:你绝对不需要使用new——你也可以把它们添加到一个空对象中。

function assign(sources) {
    // for each object in source, iterate through properties
    // check has own property and add the property to the target 
    // object
    // this is not the important part
    let newTarget = {};

    for (let i = 0; i < sources.length; i++) {
      for (let key in sources[i]) {
        if (sources[i].hasOwnProperty(key)) {
          newTarget[key] = sources[i][key];
        }
      }
    }
    return newTarget;
}

你可以直接使用Object.create也就是ES5，如下所示:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

我已经把你的代码重写成这样的格式，好了:

var animal = {
  animalType: 'animal',
  describe: function() {
    return 'An ' + this.animalType + ' with ' + this.furColor + ' fur, ' 
      + this.legs + ' legs, and a ' + this.tail + ' tail.';
  }
};
var mouseFactory = function mouseFactory () {
  var secret = 'secret agent';
  return Object.create(animal, {
    animalType: {
        value: 'mouse',
        writable: true
    },
    furColor: {
        value: 'brown',
        writable: true
    },
    legs: {
        value: 4,
        writable: true        
    },
    tail: {
        value: 'long, skinny',
        writable: true        
    },
    profession: {
        value: function () {
          return secret;
        }
    }
  });
};
var james = mouseFactory();
var dave = mouseFactory();
dave.furColor = 'white';
console.log(james.describe());
// An mouse with brown fur, 4 legs, and a long, skinny tail.
console.log(dave.describe());
// An mouse with white fur, 4 legs, and a long, skinny tail.
相关文章：