对象属性随分配变量的值动态变化 [英] object property to dynamically change with the value of assigned variable

问题描述

由于我是新手，这可能是一个非常基本的问题.我正在从构造函数创建对象.我希望将对象的属性之一链接到变量.因此，如果变量值更改，则属性的值也应更改.

This may turn out to be a very basic question as I am a newbie. I am creating an object from a constructor. I want one of the properties of object to be linked to a variable. So if variable value changes, the property's value should also change.

示例:我正在研究dynamicjs，并正在根据构造函数Rect创建对象.我希望只要optvar更改，属性draggable的值就会动态更改为optvar的值.

Example: I am working on kineticjs and am creating an object from constructor Rect. I want the value of the property draggable to dynamically change to the value of optvar whenever optvar changes.

Var optvar="true";

rect = new Kinetic.Rect({ 
    x: 22, 
    y: 7, 
    width: 0, 
    height: 0,
     fill: 'red', 
    stroke: 'black', 
    strokeWidth: 4, 
    draggable: optvar    
});

optvar="false"; // I want value if rect.draggable to be equal to false

推荐答案

这不是基本问题. :-)

This is not a basic question. :-)

从 ES5 开始，可以使用定义属性设置程序和获取程序通过 Object.defineProperty (和Object.defineProperties). ES5的此功能在现代浏览器中得到了广泛的支持，但是较旧的浏览器(例如IE8和更早的浏览器)没有此功能.

As of ES5, it's possible to define properties with setters and getters via Object.defineProperty (and Object.defineProperties). This feature of ES5 is quite broadly supported in modern browsers, but older browsers (such as IE8 and earlier) do not have it.

使用吸气剂，可以做到这一点:

Using a getter, it's possible to do this:

var optvar=true;

rect = new Kinetic.Rect({ 
    x: 22, 
    y: 7, 
    width: 0, 
    height: 0,
     fill: 'red', 
    stroke: 'black', 
    strokeWidth: 4
});
Object.defineProperty(rect, "draggable", {
    enumerable: true,
    get:        function() {
        return optvar;
    }
});

这将在rect上创建一个属性，该属性在检索时将返回optvar的当前值.之所以起作用，是因为getter函数是对optvar变量的闭包(有关我的博客中闭包的更多信息:

That creates a property on rect that, when retrieved, returns the current value of optvar. It works because the getter function is a closure over the optvar variable (more about closures in my blog: Closures are not complicated.)

当然，这是否可以与Kinetic.Rect一起正常工作取决于Kinetic.Rect的实现方式.

Of course, whether this works correctly with Kinetic.Rect will depend on how Kinetic.Rect is implemented.

上面创建的属性是可枚举的(如其他循环一样显示在for..in循环中)，但不可写.如果您希望它可写:

The property created above is enumerable [shows up in for..in loops like the others do], but is not writable. If you wanted it to be writable:

Object.defineProperty(rect, "draggable", {
    enumerable: true,
    get:        function() {
        return optvar;
    },
    writable:   true,
    set:        function(value) {
        optvar = value;
    }
});

从您对问题的评论:

我有多个对象rect(全部动态创建).我希望所有对象的属性都链接到一个变量.

I have multiple objects rect (all created dynamically). I want all objects' property to be linked to one variable.

可以使用上述机制来完成此操作，因为当然，您可以为所有矩形使用吸气剂:

The above mechanism can be used to do that, because of course, you can have getters for all of your rects:

var optvar = true;
var rect;
var rects = [];

while (rects.length < 10) {    
    rect = new Kinetic.Rect({ 
        x: 22, 
        y: 7, 
        width: 0, 
        height: 0,
        fill: 'red', 
        stroke: 'black', 
        strokeWidth: 4
    });
    Object.defineProperty(rect, "draggable", {
        enumerable: true,
        get:        getDraggable
    });

    rects.push(rect);
}
function getDraggable() {
    return optvar;
}

现在，根据optvar，所有这10个矩形都可以拖动或不拖动.

Now, all 10 of those rects will be draggable, or not, based on optvar.

(注意:我假设所有这些代码都在某个地方的函数中，因此我们不创建全局变量.)

这篇关于对象属性随分配变量的值动态变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！