Javascript函陣列合

我試圖了解 javascript 中函陣列合的行為。

const Animal = (name) => {
  let properties = { name };
  return ({
    get name() { return properties.name },
    set name(newName) { properties.name = newName },
    breathe: function() {console.log(`${this.name} breathes!`); }
  })
}

const aquaticKind = (animal) => ({
  swim: () => console.log(`${animal.name} swims`)
})

const walkingKind = (animal, noOfLegs) => {
  const properties = { noOfLegs }
  return ({
    get noOfLegs() { return properties.noOfLegs },
    set noOfLegs(n) { properties.noOfLegs = n; },
    walk: () => console.log(`${animal.name} walks with ${properties.noOfLegs} legs`)
  })
}

const egglayingKind = (animal) => ({
  layEgg: () => console.log(`${animal.name} laid an egg`)
})

const Crocodile = (name) => {
  const info = Animal(name);
  return Object.assign(info,
                       walkingKind(info, 4),
                       aquaticKind(info),
                       egglayingKind(info)
                      );
}
const snooty = Crocodile('snooty');
snooty.breathe();
snooty.swim();
snooty.walk();
snooty.name = "coolie";
snooty.noOfLegs = 23 // I expected this to get update to 23
snooty.swim();
snooty.walk();
snooty.layEgg();

如果您運行上面的代碼，您將看到noOfLegs永遠不會更新，而name會更新。我似乎無法解決這個問題。我們如何使noOfLegs更新？

uj5u.com熱心網友回復：

object.assign 的 MDN 檔案向您展示了如何復制“訪問器”

這是您的代碼按預期作業 - 該completeAssign函式完全基于該鏈接中的代碼

const completeAssign = (target, ...sources) => {
    sources.forEach(source => {
        const descriptors = Object.keys(source).reduce((descriptors, key) => {
            descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
            return descriptors;
        }, {});
        Object.getOwnPropertySymbols(source).forEach(sym => {
            const descriptor = Object.getOwnPropertyDescriptor(source, sym);
            if (descriptor.enumerable) {
                descriptors[sym] = descriptor;
            }
        });
        Object.defineProperties(target, descriptors);
    });
    return target;
};

const Animal = (name) => {
    const properties = { name };
    return ({
        get name() { return properties.name },
        set name(newName) { properties.name = newName },
        breathe () { console.log(`${this.name} breathes!`); }
    })
}

const aquaticKind = (animal) => ({ 
    swim: () => console.log(`${animal.name} swims`) 
});

const walkingKind = (animal, noOfLegs) => {
    const properties = { noOfLegs };
    return ({
        get noOfLegs() { return properties.noOfLegs },
        set noOfLegs(n) { properties.noOfLegs = n; },
        walk: () => console.log(`${animal.name} walks with ${properties.noOfLegs} legs`)
    })
}

const egglayingKind = (animal) => ({
    layEgg: () => console.log(`${animal.name} laid an egg`)
})

const Crocodile = (name) => {
    const info = Animal(name);
    return completeAssign(info,
        walkingKind(info, 4),
        aquaticKind(info),
        egglayingKind(info)
    );
}
const snooty = Crocodile('snooty');
snooty.breathe();
snooty.swim();
snooty.walk();
snooty.name = "coolie";
snooty.noOfLegs = 23;
snooty.swim();
snooty.walk();
snooty.layEgg();

標籤：javascript 遗产 作品

上一篇：如何過濾陣列以匹配引數值與反應

下一篇：如何使用react將response.text()轉換為JSON