javascript - 如何“覆盖”原型上定义的（获取）属性？

Question

我有一些代码在原型上定义了一个 getter（但没有 setter，如果相关的话）。返回的值在 99.99% 的情况下是正确的；但是，目标是将要评估的属性设置为特定对象的不同值。

foo = {}
Object.defineProperty(foo, "bar", {
    // only returns odd die sides
    get: function () { return (Math.random() * 6) | 1; }
});

x = Object.create(foo);
x.bar       // => eg. 5
x.bar = 4   // by fair dice roll
x.bar       // nope => eg. 3

如何覆盖现有对象 x 的属性，使其可分配（例如，具有默认属性行为）？

附录：虽然可以在 x 上定义新属性（值或 get/set），但我正在寻找是否有办法停止[prototype] 中属性的行为并将“bar”恢复为正常/ad特定实例的 -hoc 属性。

score 22 · Accepted Answer

通过使用Object.definePropertyon x：

var foo = {}
Object.defineProperty(foo, "bar", {
    // only returns odd die sides
    get: function () { return (Math.random() * 6) | 1; }
});

var x = Object.create(foo);
display(x.bar);      // E.g. 5

(function() {
  var bar;
  var proto = Object.getPrototypeOf(x); // Or just use foo

  Object.defineProperty(x, "bar", {
    get: function () { return typeof bar !== "undefined" ? bar : proto.bar; },
    set: function(value) { bar = value; }
  });
})();

display(x.bar);  // Still odd
x.bar = 4;       // By fair dice roll
display(x.bar);  // Shows 4

function display(msg) {
  document.body.insertAdjacentHTML("beforeend", "<p>" + msg + "</p>");
}

我正在寻找是否有办法停止 [prototype] 中属性的行为并将“bar”转回正常/临时属性。

好的，这略有不同，但仍然使用Object.defineProperty：

var foo = {}
Object.defineProperty(foo, "bar", {
    // only returns odd die sides
    get: function () { return (Math.random() * 6) | 1; }
});

var x = Object.create(foo);
display(x.bar);      // E.g. 5

Object.defineProperty(x, "bar", {
  value: undefined,
  writable: true,
  enumerable: true // Or leave off if you want it non-enumerable
});

display(x.bar);  // undefined
x.bar = 4;       // By fair dice roll
display(x.bar);  // Shows 4

function display(msg) {
  document.body.insertAdjacentHTML("beforeend", "<p>" + msg + "</p>");
}

score 4 · Accepted Answer

正如 TJ Crowder 所说，defineProperty再次使用就可以了。您可以考虑以下变体，其中 setter 本身会覆盖该属性：

Foo = function () {}
Foo.prototype = {
  // computes, but only knows odd die sides
  get bar() { 
    console.log("getter invoked")
    return (Math.random() * 6) | 1 
  },
  
  // fix it
  set bar(value) {
    console.log("setter invoked")
    Object.defineProperty(
      this, 'bar', 
      {writable: true, enumerable: true, configurable: true}
    )
    this.bar = value 
  }
}

var x = new Foo
console.log(x.bar)       // => eg. 5
x.bar = 4   // by fair dice roll
console.log(x.bar)       // => 4
x.bar = 2   // no setter, no getter
console.log(x.bar)

我希望你能原谅我用稍微不同的语法重写。它不会改变任何技巧。getter当我来到这篇文章时，我实际上只是在寻找一种方法来覆盖继承。

score 3 · Accepted Answer

它不像 Object.defineProperty 那样简单。
您需要先获取属性描述符（使用Object.getOwnPropertyDescriptor），然后检查属性是否可配置。
如果它不可配置，则不能覆盖它。
此外，您需要考虑到属性可以具有 getter/setter异或值。

所以你不能设置desc.value&desc.writable如果你有一个 getter/setter ，反之亦然。

let desc = Object.getOwnPropertyDescriptor(self.constructor.prototype, key);

if (desc != null)
{
    // We can only redefine configurable properties !
    if (!desc.configurable)
    {
        console.log("AUTOTRACE-WARNING: Property \"" + key + "\" not configurable ! (" + self.constructor.name + ")");
        continue;
    }

    let g = desc.get != null;
    let s = desc.set != null;

    if (g || s)
    {
        let newDescriptor: PropertyDescriptor = {};
        newDescriptor.enumerable = desc.enumerable;
        newDescriptor.configurable = desc.configurable; 
        // Argh !
        // newDescriptor.value= desc.value; 
        // newDescriptor.writable = desc.writable; 

        if (g)
            newDescriptor.get = getLoggableFunction(desc.get.bind(self), "Property", "get_" + key)

        if (s)
            newDescriptor.set = getLoggableFunction(desc.set.bind(self), "Property", "set_" + key)

        Object.defineProperty(self, key, newDescriptor);

        continue; // if it's a property, it can't be a function 
    } // End if (g || s) 

} // End if (desc != null)

我是这样做的（注意'TestClass'的构造函数中的自动绑定和自动跟踪调用）：

import { autoBind, autoTrace } from "./autobind_autotrace.js";

class TestClass
{

    constructor()
    {
        autoBind(this);
        autoTrace(this);
    }



    get bar(): boolean
    {
        return this._bar;
    }
    set bar(value: boolean)
    {
        this._bar = value;
    }


    public hello()
    {
        console.log("hello", "this", this);
    }


    public world(x, y)
    {
        console.log("world", "this", this);

    }

}

自动绑定/自动跟踪（TypeScript）：

export function autoBind(self: any): any
{
    for (const key of Object.getOwnPropertyNames(self.constructor.prototype))
    {

        if (key !== 'constructor')
        {
            // console.log(key);

            let desc = Object.getOwnPropertyDescriptor(self.constructor.prototype, key);
            

            if (desc != null)
            {
                // We can only redefine configurable properties !
                if (!desc.configurable)
                {
                    console.log("AUTOBIND-WARNING: Property \"" + key + "\" not configurable ! (" + self.constructor.name + ")");
                    continue;
                }

                let g = desc.get != null;
                let s = desc.set != null;

                if (g || s)
                {
                    let newGetter = null;
                    let newSetter = null;

                    if (g)
                        //desc.get = desc.get.bind(self);
                        newGetter = desc.get.bind(self);

                    if (s)
                        // desc.set = desc.set.bind(self);
                        newSetter = desc.set.bind(self);

                    if (newGetter != null && newSetter == null)
                    {
                        Object.defineProperty(self, key, {
                              get: newGetter 
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , value: desc.value
                            // , writable: desc.writable
                        });
                    }
                    else if (newSetter != null && newGetter == null)
                    {
                        Object.defineProperty(self, key, {
                              set: newSetter
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , value: desc.value
                            // , writable: desc.writable
                        });
                    }
                    else // at least one is set, but none of the above cases, so two are set 
                    {
                        Object.defineProperty(self, key, {
                              get: newGetter
                            , set: newSetter
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , value: desc.value
                            // , writable: desc.writable
                        });
                    }

                    // Object.defineProperty(self.constructor.prototype, key, desc);
                    // Object.defineProperty(self.constructor.prototype, key, desc);
                    continue; // if it's a property, it can't be a function 
                } // End if (g || s) 

            } // End if (desc != null) 

            if (typeof (self[key]) === 'function')
            {
                let val = self[key];
                self[key] = val.bind(self);
            }

        } // End if (key !== 'constructor' && typeof val === 'function') 

    } // Next key 

    return self;
} // End Function autoBind



export function autoTrace(self: any): any
{


    function getLoggableFunction_old(func: any, type: any, name: any)
    {
        return function (...args:any[])
        {
            let logText = name + '(';

            for (var i = 0; i < args.length; i++)
            {
                if (i > 0)
                {
                    logText += ', ';
                }
                logText += args[i];
            }
            logText += ');';

            console.log(type + " " + logText);
            return func.apply(self, args);
        };
    }


    function getLoggableFunction(func: any, type: any, name: any)
    {
        return function (...args: any[])
        {
            let logText = name + '(';

            for (var i = 0; i < args.length; i++)
            {
                if (i > 0)
                {
                    logText += ', ';
                }
                logText += args[i];
            }
            logText += ')';

            console.log("Pre " + type + " " + logText + "; ");
            let res = func.apply(self, args);
            console.log("Post " + type + " " + logText + ":", res);
            return res;
        };
    }


    for (const key of Object.getOwnPropertyNames(self.constructor.prototype))
    {

        if (key !== 'constructor')
        {
            // console.log(key);
            let desc = Object.getOwnPropertyDescriptor(self.constructor.prototype, key);

            if (desc != null)
            {
                // We can only redefine configurable properties !
                if (!desc.configurable)
                {
                    console.log("AUTOTRACE-WARNING: Property \"" + key + "\" not configurable ! (" + self.constructor.name + ")");
                    continue;
                }

                let g = desc.get != null;
                let s = desc.set != null;

                if (g || s)
                {
                    let newGetter = null;
                    let newSetter = null;

                    if (g)
                        //desc.get = getLoggableFunction(desc.get.bind(self), "Property", "get_" + key)
                        newGetter = getLoggableFunction(desc.get.bind(self), "Property", "get_" + key)

                    if (s)
                        // desc.set = getLoggableFunction(desc.set.bind(self), "Property", "set_" + key)
                        newSetter = getLoggableFunction(desc.set.bind(self), "Property", "set_" + key)

                    if (newGetter != null && newSetter == null)
                    {
                        Object.defineProperty(self, key, {
                              get: newGetter
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , value: desc.value
                            // , writable: desc.writable
                        });
                    }
                    else if (newSetter != null && newGetter == null)
                    {
                        Object.defineProperty(self, key, {
                              set: newSetter
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , value: desc.value
                            // , writable: desc.writable
                        });
                    }
                    else // at least one is set, but none of the above cases, so two are set 
                    {
                        Object.defineProperty(self, key, {
                              get: newGetter
                            , set: newSetter
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , value: desc.value
                            // , writable: desc.writable
                        });
                    }

                    continue; // if it's a property, it can't be a function 
                } // End if (g || s) 

            } // End if (desc != null) 

            // if it's not a property, it can only be a function or not a function 
            if (typeof (self[key]) === 'function')
            {
                let val = self[key];
                self[key] = getLoggableFunction(val.bind(self), "Function", key);
            } // End if (typeof (self[key]) === 'function') 

        } // End if (key !== 'constructor' && typeof val === 'function') 

    } // Next key 

    return self;
} // End Function autoTrace

这会转换为纯 JavaScript：

"use strict";

function autoBind(self)
{
    for (var _i = 0, _a = Object.getOwnPropertyNames(self.constructor.prototype); _i < _a.length; _i++)
    {
        var key = _a[_i];
        if (key !== 'constructor')
        {
            var desc = Object.getOwnPropertyDescriptor(self.constructor.prototype, key);
            
            if (desc != null)
            {
                if (!desc.configurable)
                {
                    console.log("AUTOBIND-WARNING: Property \"" + key + "\" not configurable ! (" + self.constructor.name + ")");
                    continue;
                }
                var g = desc.get != null;
                var s = desc.set != null;
                if (g || s)
                {
                    var newGetter = null;
                    var newSetter = null;
                    if (g)
                        newGetter = desc.get.bind(self);
                    if (s)
                        newSetter = desc.set.bind(self);
                    if (newGetter != null && newSetter == null)
                    {
                        Object.defineProperty(self, key, {
                              get: newGetter 
                            , enumerable: desc.enumerable 
                            , configurable: desc.configurable 
                            // , writable: desc.writable 
                            // , value: desc.value 
                        });
                    }
                    else if (newSetter != null && newGetter == null)
                    {
                        Object.defineProperty(self, key, {
                              set: newSetter 
                            , enumerable: desc.enumerable 
                            , configurable: desc.configurable 
                            // , writable: desc.writable 
                            // , value: desc.value 
                        });
                    }
                    else
                    {
                        Object.defineProperty(self, key, {
                              get: newGetter 
                            , set: newSetter
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , writable: desc.writable
                            // , value: desc.value
                        });
                    }
                    continue;
                }
            }
            if (typeof (self[key]) === 'function')
            {
                var val = self[key];
                self[key] = val.bind(self);
            }
        }
    }
    return self;
}

function autoTrace(self)
{
    function getLoggableFunction_old(func, type, name)
    {
        return function ()
        {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++)
            {
                args[_i] = arguments[_i];
            }
            var logText = name + '(';
            for (var i = 0; i < args.length; i++)
            {
                if (i > 0)
                {
                    logText += ', ';
                }
                logText += args[i];
            }
            logText += ');';
            console.log(type + " " + logText);
            return func.apply(self, args);
        };
    }
    function getLoggableFunction(func, type, name)
    {
        return function ()
        {
            var args = [];
            for (var _i = 0; _i < arguments.length; _i++)
            {
                args[_i] = arguments[_i];
            }
            var logText = name + '(';
            for (var i = 0; i < args.length; i++)
            {
                if (i > 0)
                {
                    logText += ', ';
                }
                logText += args[i];
            }
            logText += ')';
            console.log("Pre " + type + " " + logText + "; ");
            var res = func.apply(self, args);
            console.log("Post " + type + " " + logText + ":", res);
            return res;
        };
    }
    for (var _i = 0, _a = Object.getOwnPropertyNames(self.constructor.prototype); _i < _a.length; _i++)
    {
        var key = _a[_i];
        if (key !== 'constructor')
        {
            var desc = Object.getOwnPropertyDescriptor(self.constructor.prototype, key);
            if (desc != null)
            {
                if (!desc.configurable)
                {
                    console.log("AUTOTRACE-WARNING: Property \"" + key + "\" not configurable ! (" + self.constructor.name + ")");
                    continue;
                }
                var g = desc.get != null;
                var s = desc.set != null;
                if (g || s)
                {
                    var newGetter = null;
                    var newSetter = null;
                    if (g)
                        newGetter = getLoggableFunction(desc.get.bind(self), "Property", "get_" + key);
                    if (s)
                        newSetter = getLoggableFunction(desc.set.bind(self), "Property", "set_" + key);
                    if (newGetter != null && newSetter == null)
                    {
                        Object.defineProperty(self, key, {
                              get: newGetter 
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , writable: desc.writable
                            // , value: desc.value
                        });
                    }
                    else if (newSetter != null && newGetter == null)
                    {
                        Object.defineProperty(self, key, {
                              set: newSetter 
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , writable: desc.writable
                            // , value: desc.value
                        });
                    }
                    else
                    {
                        Object.defineProperty(self, key, {
                              get: newGetter 
                            , set: newSetter 
                            , enumerable: desc.enumerable
                            , configurable: desc.configurable
                            // , writable: desc.writable
                            // , value: desc.value
                        });
                    }
                    continue;
                }
            }
            if (typeof (self[key]) === 'function')
            {
                var val = self[key];
                self[key] = getLoggableFunction(val.bind(self), "Function", key);
            }
        }
    }
    return self;
}

// exports and module are globals of "require" - delete if usage without require 
exports = exports || {}; // prevent error if no module 
exports.autoBind = autoBind;
exports.autoTrace = autoTrace;

score 2 · Accepted Answer

您可以通过定义Setter来更改Getter行为。

1. 定义`foo`为新实例对象的原型

Setters/Getters（访问器属性）将被复制到其原型的新创建对象中。

与访问器属性不同，值属性总是在对象本身上设置，而不是在原型上。
的值bar“隐藏”在Symbol 属性后面。这可以防止直接操纵。

2. 创建实例`foo`并覆盖`set bar()`：

选项 A：

➜ 创建新的foo.

➜set bar()用于更改默认值。
选项 B：

➜foo使用重新定义创建新的set bar()。

➜ 访问器属性 set bar()被值属性 bar覆盖。
选项 C：

➜ 创建新的foo和Object.assign()新的默认值。

➜ 这会调用set bar().

它在源上使用 [[Get]]，在目标上使用 [[Set]]，因此它将调用 getter 和 setter。

// Freeze foo. (Prevent accidental manipulation of the prototype)
const foo = Object.freeze(
  // Create new objecct with NO prototype: null 
  // Change null ➜ {} for inheritance of standard object methods
  Object.create(null, {
    // 'bar' set/get
    bar: {
      get() {
        // Check: Symbol existence || random number
        return this[Symbol.for('bar')] ?? (Math.random() * 6) | 1;
      },
      set(val) {
        console.log(`setter 'bar' = ${val}`);
        // Set 'bar' val and hide behind a Symbol key (non enumerable)
        this[Symbol.for('bar')] = val;
      }
    }
  })
);


console.log('Option A: Call setter (post create) =================');
const x = Object.create(foo);
console.log(x.bar);           // rnd
x.bar = 4;                    // setter 'bar' = 4
console.log(x.bar);           // 4
x.bar = null;                 // setter 'bar' = null
console.log(x.bar);           // rnd

console.log('Option B: Overwrite Setter (on create) ==============');
// Create new foo obj, overwrite 'bar' Setter/Getter
const create = obj => Object.create(foo, Object.getOwnPropertyDescriptors(obj));

const y = create({bar: 4});  
console.log(y.bar);           // 4
y.bar = 5;                    // overwrite prop 'bar' = 4 
console.log(y.bar);           // 5
y.bar = null;                 // overwrite prop 'bar' = null 
console.log(y.bar);           // null (no fallback)

console.log('Option C: Obj.assign invoces Setter (on create) ====');
// create new foo Obj, assign default
// ➜ Setter gets called on new target
const createFrom = obj => Object.assign(Object.create(foo), obj);

const z = createFrom({bar: 4});
console.log(z.bar);           // 4
z.bar = 6;                    // setter 'bar' = 6
console.log(z.bar);           // 6
z.bar = null;                 // setter 'bar' = null
console.log(z.bar);           // rnd

javascript - 如何“覆盖”原型上定义的（获取）属性？

4 回答 4

1. 定义foo为新实例对象的原型

2. 创建实例foo并覆盖set bar()：

Related

Reference

1. 定义`foo`为新实例对象的原型

2. 创建实例`foo`并覆盖`set bar()`：