对象的属性在更改时激活功能？

Question

我有一个对象，在这个例子中是法拉利。例如，当使用ferrari.speed = 90; 更改速度时，我希望此属性对更改执行一些操作，例如使用函数更改屏幕上法拉利的速度。

我想知道最简单、最不疯狂的方法是什么？

这是一个 jsfiddle：

http://jsfiddle.net/qhV7B/3/

<button id="addspeed">speed up!!</button>
<button id="checkspeed">Check the speed!</button>


function car(){
    speed: 0;
    //Do something about speed change here? if its changed at all, greater or smaller?
}
document.getElementById('addspeed').onclick = function speedchange(){
    ferrari.speed++;
}
document.getElementById('checkspeed').onclick = function checkspeed() {
    alert(ferrari.speed);
}
var ferrari = new car();
ferrari.speed = 10;

Answer 1

Set operator 就是你要找的https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/set

这是我的解决方案http://jsfiddle.net/qhV7B/6/。

function car(){
}

car.prototype = {
    hidden_speed: 0,
    set speed(v){
        //special action
        alert("I changed value to " + v);
        this.hidden_speed = v;
    },
    get speed(v){
        return this.hidden_speed;
    },
};

var ferrari = new car();
ferrari.speed = 10;

document.getElementById('addspeed').onclick = function speedchange(){
    ferrari.speed = (ferrari.speed + 1);
}
document.getElementById('checkspeed').onclick = function checkspeed() {
    alert(ferrari.speed);
}

Answer 2

可以通过 getter 和 setter 完成，一种方法是通过 Object.defineProperty()：

function car(){
    this._speed=0;
}
...
var ferrari = new car();
Object.defineProperty(car.prototype,"speed",{
    get:function(){return this._speed;},
    set:function(v){
        this._speed=v;
        document.getElementById("speed").textContent=v.toString(10);
    }
});
ferrari.speed = 10;

修改fiddlefiddle。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

其他关于 getter 和 setter 的文档可能会或可能不会过时和/或依赖于平台：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/get
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/set
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineGetter
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineSetter

* 编辑：将Object.defineProperty 的参数从ferrari 更改为car.prototype

Answer 3

此代码使用setSpeed 方法，允许您在速度变化时添加所需的任何其他逻辑：

http://jsfiddle.net/rujbX/2/

var Car, ferrari,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

Car = (function() {
  function Car() {
    this.setSpeed = __bind(this.setSpeed, this);
  }

  Car.prototype.speed = 0;

  Car.prototype.setSpeed = function(newSpeed) {
    this.speed = newSpeed;
    //Here is where you custom logic needs to run
    return alert("Speed Changed to: " + this.speed);
  };

  return Car;

})();

ferrari = new Car();

ferrari.setSpeed(10);

document.getElementById('addspeed').onclick = function speedchange(){
    ferrari.setSpeed(ferrari.speed+1);
}
document.getElementById('checkspeed').onclick = function checkspeed() {
    alert(ferrari.speed);
}

The Javascript was generated here

Answer 4

使用 cmets 中的 asawyers 建议，您可以创建一个 speedUp 函数，该函数可以在更改时触发您的动画功能（或者如果您希望能够减速，则可以使用 speedChange，无论您的船漂浮在哪里）。

查看小提琴：http://jsfiddle.net/86HtX/

我还在那里对您的代码进行了一些调整：

function car(){
    var car = this;

    this.speed = 0;

    this.speedUp = function(mph){
         car.speed += mph;
         car.animate();
    };

    this.animate = function(){
         alert(car.speed); // new speed
    };

    //Do something about speed change here? if its changed at all, greater or smaller?
}

document.getElementById('addspeed').onclick = function speedchange(){
    ferrari.speedUp(1); // go 1 mph faster
}

document.getElementById('checkspeed').onclick = function checkspeed() {
    alert(ferrari.speed);
}

var ferrari = new car();
ferrari.speed = 10;