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

Object's Property Activates Function When Changed?

本文关键字：激活 功能 改变 属性 对象      更新时间：2023-09-26

我有一个对象，在本例中是法拉利。当使用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;

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

可以通过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的文档，可能过时，也可能不过时，或者依赖于平台:

  • 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

* edit: change parameter of Object.defineProperty from ferrari to car.prototype

此代码使用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在这里生成

使用律师在评论中的建议，你可以创建一个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;
相关文章：