标签: defineproperty

我四处寻找如何使用该Object.defineProperty方法,但找不到任何体面的东西.

有人给了我这段代码:

Object.defineProperty(player, "health", {
    get: function () {
        return 10 + ( player.level * 15 );
    }
})

但我不明白.主要get是,我不能得到(双关语).它是如何工作的？

小提琴

var Assertion = function() {
    return { "dummy": "data" };    
}

Object.defineProperty(Object.prototype, 'should', {
  set: function(){},
  get: function(){
    return new Assertion(this);
  }
});

// Insert magic here.

// This needs to be false
console.log(({}).should === undefined);

我在ES5中有哪些选项来撤消defineProperty呼叫？

没有愚蠢的建议,Object.defineProperty = function() { }请.

下列 Object.defineProperty(Object.prototype, 'should', {})

也无法正常工作

和 Object.defineProperty(Object.prototype, 'should', { value: undefined })

Uncaught TypeError: Cannot redefine property: defineProperty在V8中投掷a

Object.defineProperty(Object.prototype, 'should', { 
    set: function() {},
    get: function() { return undefined; }
}); …

如您所知,我们可以使用JS定义getter和setter defineProperty().我试图扩展我的班级时遇到困难defineProperty().

这是一个示例代码:

我有一个必须添加到对象的字段数组

fields = ["id", "name", "last_login"]

我还有一个将被修改的课程

var User = (function(){
    // constructor
    function User(id, name){
        this.id     = id
        this.name   = name
    }
    return User;
})();

还有一个函数,它将使用类添加字段 defineProperty()

var define_fields = function (fields){
    fields.forEach(function(field_name){
        var value = null
        Object.defineProperty(User.prototype, field_name, {
            get: function(){ return value }
            set: function(new_value){
                /* some business logic goes here */
                value = new_value
            }
        })
    })
};

运行后define_fields()我在我的实例中有我的字段User

define_fields(fields);
user1 = new User(1, "Thomas")
user2 = …

我的目标是观察输入值并在其值以编程方式更改时触发处理程序.我只需要它用于现代浏览器.

我尝试了很多组合使用defineProperty,这是我最新的迭代:

var myInput=document.getElementById("myInput");
Object.defineProperty(myInput,"value",{
    get:function(){
        return this.getAttribute("value");
    },
    set:function(val){
        console.log("set");
        // handle value change here
        this.setAttribute("value",val);
    }
});
myInput.value="new value"; // should trigger console.log and handler

这似乎做了我的预期,但感觉就像一个黑客,因为我重写现有的价值属性和玩value(属性和属性)的双重身份.它还打破了change似乎不喜欢修改属性的事件.

我的其他尝试:

• 一个setTimeout/setInterval循环,但这也不干净
• 各种watch和observepolyfill,但它们打破输入值属性

什么是获得相同结果的正确方法？

现场演示:http://jsfiddle.net/L7Emx/4/

[编辑]澄清一下:我的代码正在观看一个输入元素,其他应用程序可以推送更新(例如,由于ajax调用,或者由于其他字段的更改).我无法控制其他应用程序如何推送更新,我只是一个观察者.

[编辑2]为了澄清"现代浏览器"的含义,我对能够在IE 11和Chrome 30上运行的解决方案感到非常满意.

[更新]根据接受的答案更新了演示:http://jsfiddle.net/L7Emx/10/

@ mohit-jain建议的技巧是为用户交互添加第二个输入.

询问Object.defineProperty,如下所示:

function testComponent(){
    var testProperty;
    Object.defineProperty(this, "testProperty",
    {
        get : function()
        {
           return testProperty;
        },
        set : function(val)
        {
          testProperty = val;
        }
    });
}

它会像这样使用的地方:

testObject = new testComponent();
testObject.testProperty = "testValue";

基于我到目前为止看到的,看起来没有跨浏览器解决方案,因为我尝试使用es5-shim没有运气,但我想证实.我也发现了对这篇文章的引用,我的测试在IE 7和8中仍然失败,任何人都可以对此有所了解吗？

我记得几个月前在S/O的某个地方查看了一个相关的问题,我想我看到有人在答案中为此写了一个解决方案.任何关于getter/setter的一般解决方法也将受到赞赏.我的想法是,我需要在对象上使用一些等效的getter setter而不通过方法传递参数更改.我不需要IE6,但我想支持IE7 + ff 3.6+等范围内的浏览器

下面的QUnit测试:(jsFiddles)

(这些在我的机器上的所有浏览器中传递,除了IE 7和8

直接使用defineProperty,没有垫片:http:
//jsfiddle.net/uSYFE/

使用ES5垫片小提琴,我假设我需要做的就是包括它？ :http:
//jsfiddle.net/hyperthalamus/ntwDy/

使用IE推荐的解决方案小提琴:http:
//jsfiddle.net/hyperthalamus/xfvz3/

我正在尝试定义一个对象并为其创建一个访问器属性.

HTML:

<input type='hidden' id='crudMode' value='Create' />

JavaScript的:

crudMode = {
   create: "Create",
   read: "Read",
   update: "Update",
   delete: "Delete",
   current: function () { return $('#crudMode').val(); }
}

Object.defineProperty(crudMode, 'mode', {
    get: function(){
        return this.current();
    },
    set: function(value){ 
        $('#crudMode').val(value);
    }
});

但是当我使用它时,它会在问题标题中引发提到的错误:

console.log(crudMode.mode);

抛出:

TypeError:无法重新定义不可配置的属性"mode"

这有什么不对？

如何让TypeScript发出属性定义,例如:

Object.defineProperties(this, {
    view: {
        value: view,
        enumerable: false,
        writable: false,
        configurable: false
    },
});

有谁知道HTA文件使用的是什么版本的JavaScript.

目前正在创建一些脚本文件 - 并尝试使用 Object.defineProperty

当作为HTA运行时 - 它会错误地指出Object不支持此属性或方法.我将它作为HTM文件运行只是为了检查 - 并且根本没有问题.

所以我只能假设mshta.exe使用较旧的JavaScript引擎.任何人都能证实这一点吗？

我正在尝试使用setter和getter创建一个对象,这是我的代码:

var Player = function(height){
    var _height = height;

    Object.defineProperty(this, 'height', {
      enumerable: false
    , configurable: true
    , writable: false
    , get: function(){return _height;}
    , set: function(val){_height = val;}
    });
}

var myPlayer = new Player(10);

即使writabledefineProperty选项的属性设置为false,我也会收到以下错误:

Invalid property. A property cannot both have accessors and be writable or have a value, #<Object>

当当writable设置为true 时也会发生同样的情况,但如果我删除该writable行,则错误消失.

我做错了什么,或者这是一个错误？这种情况发生在Google Chrome,版本30.0.1599.66上

在JavaScript(ES5 +)中,我试图实现以下场景:

1. 一个对象(其中将有许多单独的实例),每个对象都具有只读属性.size,可以通过直接属性读取从外部读取,但不能从外部设置.
2. .size必须从原型上的某些方法维护/更新该属性(并且应保留在原型上).
3. 我的API已经由规范定义,因此我无法对其进行修改(我正在为已定义的ES6对象处理polyfill).
4. 我大部分时间都试图阻止人们不小心在脚下射击,并且实际上不必有防弹只读(尽管防弹越多越好),所以我愿意妥协一些只要obj.size = 3;不允许直接设置,就可以在侧门进入酒店.

我知道我可以使用在构造函数中声明的私有变量并设置一个getter来读取它,但是我必须移动需要从原型中维护该变量的方法并在构造函数中声明它们(所以他们可以访问包含变量的闭包.对于这种特殊情况,我宁愿不从原型中取出我的方法,所以我正在寻找其他选项可能是什么.

还有什么其他想法(即使有一些妥协)？