86

编辑 2016 年 10 月：请注意这个问题是在 2012 年提出的。每个月左右都会有人添加一个新的答案或评论来反驳一个答案，但这样做并没有任何意义，因为这个问题可能已经过时了（记住，是让Gnome Javascript编写 gnome-shell 扩展，而不是浏览器的东西，这是非常具体的）。

在我之前关于如何在 Javascript 中进行子类化的问题之后，我正在制作一个超类的子类，如下所示：

function inherits(Child,Parent) {
    var Tmp = function {};
    Tmp.prototype = Parent.prototype;
    Child.prototype = new Tmp();
    Child.prototype.constructor = Child;
}
/* Define subclass */
function Subclass() {
    Superclass.apply(this,arguments);
    /* other initialisation */
}
/* Set up inheritance */
inherits(Subclass,Superclass);
/* Add other methods */
Subclass.prototype.method1 = function ... // and so on.

我的问题是，如何使用这种语法在原型上定义 setter/getter？

我曾经做：

Subclass.prototype = {
    __proto__: Superclass.prototype,
    /* other methods here ... */

    get myProperty() {
        // code.
    }
}

但显然以下方法不起作用：

Subclass.prototype.get myProperty() { /* code */ }

我正在使用 GJS（GNOME Javascript），该引擎与 Mozilla Spidermonkey 引擎大致相同。我的代码不适用于浏览器，只要 GJS 支持它（我猜这意味着 Spidermonkey？），我不介意它是否不交叉兼容。

4

6 回答 6

111

Object.defineProperty()上使用Subclass.prototype。在某些浏览器上也有__defineGetter__ 并且__defineSetter__可用，但它们已被弃用。对于您的示例，它将是：

Object.defineProperty(Subclass.prototype, "myProperty", {
    get: function myProperty() {
        // code
    }
});
于 2012-05-15T00:39:57.983 回答
78

使用对象文字声明（最简单的方法）：

var o = {
    a: 7,
    get b() {
        return this.a + 1;
    },
    set c(x) {
        this.a = x / 2
    }
};

使用Object.defineProperty（在支持 ES5 的现代浏览器上）：

Object.defineProperty(o, "myProperty", {
    get: function myProperty() {
        // code
    }
});

或使用__defineGetter__和__defineSetter__（已弃用）：

var d = Date.prototype;
d.__defineGetter__("year", function() { return this.getFullYear(); });
d.__defineSetter__("year", function(y) { this.setFullYear(y); });
于 2012-05-15T00:41:41.420 回答
43

我想你想这样做：

function Unit() {
   	this._data; // just temp value
}
Unit.prototype = {
 	get accreation() {
   		return this._data;
   	},
   	set accreation(value) {
   		this._data = value
   	},
}
Unit.prototype.edit = function(data) {
   	this.accreation = data; // setting
   	this.out();
};

Unit.prototype.out = function() {
    alert(this.accreation); // getting
};

var unit = new Unit();
unit.edit('setting and getting');

function Field() {
    // children
}

Field.prototype = Object.create(Unit.prototype);

Field.prototype.add = function(data) {
  this.accreation = data; // setting
   	this.out();
}

var field1 = new Field();
field1.add('new value for getter&setter');

var field2 = new Field();
field2.out();// because field2 object has no setting

于 2016-02-21T22:51:54.430 回答
5

要在“对象的原型内”定义 setter 和 getter，您必须执行以下操作：

Object.defineProperties(obj.__proto__, {"property_name": {get: getfn, set: setfn}})

您可以使用实用功能缩短它：

//creates get/set properties inside an object's proto
function prop (propname, getfn, setfn) {
    var obj = {};
    obj[propname] = { get: getfn, set: setfn };
    Object.defineProperties(this, obj);        
}

function Product () {
     this.name =  "Product";
     this.amount =  10;
     this.price =  1;
     this.discount =  0;
}

//how to use prop function
prop.apply(Product.prototype, ["total", function(){ return this.amount * this.price}]);

pr = new Product();
console.log(pr.total);

这里我们使用 prop.apply 将上下文 Product.prototype 设置为“this”，当我们调用它时。

使用此代码，您将以对象原型中的 get/set 属性结束，而不是问题所问的实例。

（已测试 Firefox 42、Chrome 45）

于 2015-12-11T00:13:40.943 回答
4

通过 Object.defineProperty() 方法在构造函数中指定 getter 或 setter。此方法接受三个参数：第一个参数是要添加属性的对象，第二个是属性的名称，第三个是属性的描述符。例如，我们可以为我们的 person 对象定义构造函数，如下所示：

var Employee = (function() {
    function EmployeeConstructor() {
        this.first = "";
        this.last = "";
        Object.defineProperty(
            this,
            "fullName", {
                get: function() {
                    return this.first + " " +
                        this.last;
                },
                set: function(value) {
                    var parts = value.toString().split(" ");
                    this.name = parts[0] || "";
                    this.last = parts[1] || "";
                }
            });
    }
    return
    EmployeeConstructor;
}());

使用 Object.defineProperty() 可以更好地控制我们的属性定义。例如，我们可以指定我们正在描述的属性是否可以动态删除或重新定义，它的值是否可以更改等等。

我们可以通过设置描述符对象的以下属性来进行此类约束：

  • writable：这是一个布尔值，表示属性的值是否可以更改；它的默认值为 false
  • 可配置的：这是一个布尔值，表示是否可以更改属性的描述符或可以删除​​属性本身；它的默认值为 false
  • enumerable：这是一个布尔值，指示是否可以在对象属性的循环中访问该属性；它的默认值为 false
  • value：这表示与属性关联的值；它的默认值是未定义的
于 2016-10-25T14:22:11.190 回答
2

这是一个简单的Animal → Dog继承示例，Animal具有getter和setter：

//////////////////////////////////////////
// General Animal constructor
function Animal({age, name}) {
  // if-statements prevent triggering the setter on initialization
  if(name) this.name = name
  if(age) this.age = age
}

// an alias "age" must be used, so the setter & getter can use an
// alternative variable, to avoid using "this.age", which will cause
// a stack overflow of "infinite" call stack when setting the value.
Object.defineProperty(Animal.prototype, "age", {
  get(){
    console.log("Get age:", this.name, this._age) // getting
    return this._age
  },
  set(value){
    this._age = value
    console.log("Set age:", this.name, this._age) // setting
  }
})




//////////////////////////////////////////
// Specific Animal (Dog) constructor
function Dog({age = 0, name = 'dog'}) {
  this.name = name
  this.age = age
}

// first, defined inheritance
Dog.prototype = new Animal({});

// add whatever additional methods to the prototype of Dog
Object.assign(Dog.prototype, {
  bark(woff){
    console.log(woff)
  }
})


//////////////////////////////////////////
// Instanciating
var koko = new Animal({age:300, name:'koko'})
var dog1 = new Dog({age:1, name:'blacky'})
var dog2 = new Dog({age:5, name:'shorty'})

console.log(dog1)
koko.age
dog1.age = 3;
dog1.age
dog2.age

于 2020-10-23T09:56:54.517 回答