2

我有一个对象,在这个例子中是法拉利。例如,当使用 更改速度时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;
4

4 回答 4

2

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);
}
于 2013-06-04T23:01:56.750 回答
1

可以通过 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;

修改过的小提琴 小提琴

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

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

* 编辑:更改参数Object.definePropertyfromferraricar.prototype

于 2013-06-04T23:05:52.747 回答
0

此代码使用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);
}

Javascript 是在这里生成的

于 2013-06-04T22:38:32.497 回答
0

使用评论中的 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;
于 2013-06-04T22:42:15.590 回答