引用复制对象时出现问题

时间:2017-11-07 16:38:34

标签: javascript

我需要复制一个对象及其方法。 因此我对该对象进行字符串化,然后解析它并从原始对象添加方法(但绑定到这个新副本)。

// Taken from: https://stackoverflow.com/questions/31054910/get-functions-methods-of-a-class
function getAllMethods(obj) {
    let props = [];

    do {
        const l = Object.getOwnPropertyNames(obj)
        .concat(Object.getOwnPropertySymbols(obj).map(s => s.toString()))
        .sort()
        .filter((p, i, arr) =>
                typeof obj[p] === 'function' &&  //only the methods
                p !== 'constructor' &&           //not the constructor
                (i == 0 || p !== arr[i - 1]) &&  //not overriding in this prototype
                props.indexOf(p) === -1          //not overridden in a child
               )
        props = props.concat(l)
    }
    while (
        (obj = Object.getPrototypeOf(obj)) &&   //walk-up the prototype chain
        Object.getPrototypeOf(obj)              //not the the Object prototype methods (hasOwnProperty, etc...)
    )

        return props;
}

function copyObject(obj) {
    var copy = JSON.parse(JSON.stringify(obj));

    // Copy all methods
    getAllMethods(obj)
        .filter(prop => typeof obj[prop] === 'function')
        .forEach(prop => copy[prop] = obj[prop].bind(copy));

    return copy;
}

这里有一些测试:

var foo = { bar:2, f: function() { this.bar = 5 } }
var bar = copyObject(foo);
var baz = copyObject(bar);

bar.f();
bar.bar; // 5

baz.f();
baz.bar; // 2 instead of 5..?!
baz.f.apply(baz); // not working either, baz.bar still 2

为什么副本的副本不能像我期望的那样工作?

编辑:在baz.f中,由于某种原因,this引用仍然绑定到bar

1 个答案:

答案 0 :(得分:5)

它不起作用,因为您只能.bind()一次函数的this值。 this值基本上是在您第一次使用bind()时设置的,之后,您只是"绘制另一个图层"在已经绑定的函数之上:



function myFunc() {
  console.log(this.a);
}

var f1 = myFunc.bind({
  a: 5
});
var f2 = f1.bind({
  a: 6
});

f1();
f2();




另请注意,您根本无法在箭头功能上重新this



var a = 2;

var myFunc = () => {
  console.log(this.a);
}

var f1 = myFunc.bind({
  a: 5
});
var f2 = f1.bind({
  a: 6
});

f1();
f2();