object属性,使用赋值变量的值动态更改

Question

这可能会成为一个非常基本的问题,因为我是新手.我正在从构造函数创建一个对象.我希望将对象的一个​​属性链接到一个变量.因此,如果变量值发生变化,则属性的值也应该更改.

示例:我正在研究kineticjs并从构造函数创建一个对象Rect.我希望属性的值draggable动态更改为optvar每次optvar更改时的值.

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

Answer 1

这不是一个基本问题.:-)

从ES5开始,可以通过(和)定义具有setter和getter的属性.现代浏览器广泛支持ES5的这一功能,但旧版浏览器(如IE8及更早版本)没有.Object.definePropertyObject.defineProperties

使用getter,可以这样做:

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变量的闭包(更多关于我博客中的闭包:闭包并不复杂.)

当然,这是否正常工作Kinetic.Rect将取决于如何Kinetic.Rect实现.

上面创建的属性是可枚举的[ for..in像其他人一样显示在循环中],但是不可写.如果你想让它可写:

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

从您对该问题的评论:

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

上面的机制可以用来做到这一点,因为当然,你可以拥有所有rects的getter:

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;
}

现在,所有这10个rects都将是可拖动的,或者不是基于optvar.

(注意:我假设所有这些代码都在某个函数中,所以我们不创建全局变量.)