构造函数中的 getter/setter

Question

我最近了解到可以在 JavaScript 中定义 getter/setter 的事实。这似乎非常有用 - setter 是一种“助手”，它可以在实际设置之前首先解析要设置的值。

例如，我目前有以下代码：

var obj = function(value) {
    var test = !!value; // 'test' has to be a boolean
    return {
        get test() { return test },
        set test(value) { test = !!value }
    };
};

var instance = new obj(true);

此代码始终将 value 转换为布尔值。因此，如果您编写 instance.test = 0 代码，则 instance.test === false。

但是，要使其正常工作，您必须实际返回一个对象，这意味着新实例不是obj类型，而只是一个普通对象。这意味着更改 obj 的原型对实例没有影响。例如，这不起作用 - instance.func未定义：

obj.prototype.func = function() { console.log(this.value); };

因为instance不是obj类型。为了让原型函数工作，我想我不应该返回一个普通对象，而是不返回任何东西，这样 instance 就只是 obj 类型，就像常规构造函数一样作品。

那么问题是如何实现 getter/setter 呢？我只能找到描述如何将它们添加到对象中的文章，而不是作为自定义类型的构造函数的一部分。

那么如何在构造函数中实现 getter/setter 以便能够既使用 getter/setter 又扩展原型呢？

Answer 1

你不能那样做。

不过，您可以为对象的属性设置 setter/getter。我建议你使用 ES5 Object.defineProperties 。当然这仅适用于现代浏览器。

var obj = function() {
    ...
    Object.defineProperties(this, {
        "test": {
             "get": function() { ... },
             "set": function() { ... }
        }
    });
}

obj.prototype.func = function() { ... }

var o = new obj;
o.test;
o.func();

Answer 2

通常您需要类方法。 @Raynos 在 2011 年 5 月 7 日的回答完成了工作，但它定义了一个实例方法，而不是类方法。

下面说明了一个类定义，其中 getter 和 setter 是该类的一部分。这个定义很像@Raynos 的答案，但代码中有两个不同之处：(1) “defineProperties()”操作已移出构造函数。 (2)“defineProperties()”的参数从实例对象“this”更改为构造函数的原型对象。

function TheConstructor(side) {
  this.side = side;
}

Object.defineProperties(TheConstructor.prototype, {
        area: {
             get: function()    { return this.side * this.side; }
            ,set: function(val) { this.side = Math.sqrt(val);   }
        }
});

// Test code:

var anInstance = new TheConstructor(2);
console.log("initial  Area:"+anInstance.area);
anInstance.area = 9;
console.log("modified Area:"+anInstance.area);

这会产生以下结果：

initial  Area:4
modified Area:9

尽管通常类与实例之间存在区别
定义只是风格问题，有一个目的
良好的风格，并且在某些情况下，区别很重要：
记忆化的吸气剂。记忆吸气剂的目的是
此处描述：Smart/self-overwriting/lazy getters

当存储的值是时，在类级别定义 getter
与整个班级有关。例如，一个配置文件
应该只读一次；然后应应用结果值
在该计划的持续时间内。以下示例代码
在类级别定义一个记忆化的 getter。

function configureMe() {
  return 42;
}

Object.defineProperties(TheConstructor.prototype, {
    memoizedConfigParam: {
        get: function() {
            delete TheConstructor.prototype.memoizedConfigParam;
            return TheConstructor.prototype.memoizedConfigParam = configureMe();
        }
        ,configurable:  true
    }
});

// Test code:

console.log("memoizedConfigParam:"+anInstance.memoizedConfigParam);

产生：

memoizedConfigParam:42

如示例所示，记忆化吸气剂具有
getter 函数会删除自身的特征，
然后将其自身替换为一个简单的值
（大概）永远不会改变。
请注意，“可配置”必须设置为“true”。

当存储值时，在实例级别定义 getter
取决于实例的内容。定义移动
在构造函数内部，关注的对象是“this”。

function TheConstructorI(side) {

  this.side = side;

  Object.defineProperties(this, {
    memoizedCalculation: {
        get: function() {
            delete this.memoizedCalculation;
            return this.memoizedCalculation = this.expensiveOperation();
        }
        ,configurable:  true
    }
  });
}

TheConstructorI.prototype.expensiveOperation = function() {
  return this.side * this.side * this.side;
}

//Test code:

var instance2 = new TheConstructorI(2);
var instance3 = new TheConstructorI(3);

console.log("memoizedCalculation 2:"+instance2.memoizedCalculation);
console.log("memoizedCalculation 3:"+instance3.memoizedCalculation);

产生：

memoizedCalculation 2:8
memoizedCalculation 3:27

如果你想保证（而不是假设）记忆的
值永远不会改变，“可写”属性需要
被改变。这使得代码变得有点复杂。

function TheConstructorJ(side) {

  this.side = side;

  Object.defineProperties(this, {
    memoizedCalculation: {
        get: function() {
            delete this.memoizedCalculation;
            Object.defineProperty( this, 'memoizedCalculation'
              ,{  value    : this.expensiveOperation()
                 ,writable : false
              });
            return this.memoizedCalculation;
        }
        ,configurable:  true
    }
  });
}

TheConstructorJ.prototype.expensiveOperation = function() {
  return this.side * this.side * this.side;
}

//Test code:

var instanceJ = new TheConstructorJ(2);

console.log("memoizedCalculation:"+instanceJ.memoizedCalculation);
instanceJ.memoizedCalculation = 42;  // results in error

产出：

memoizedCalculation:8
>Uncaught TypeError: Cannot assign to read only property 'memoizedCalculation' of object '#<TheConstructorJ>'

OP 的原始问题来自 2011 年 3 月 7 日，提出了基本的问题
getter 和 setter 语法，注意到它适用于对象，但是
不是关于“this”，并询问如何在其中定义 getter 和 setter
一个构造函数。除了上面所有的例子之外，还有
还有一种“廉价”的方法：在其中创建一个新对象
构造函数，就像OP所做的那样，但然后将对象分配给
成为“此”内的成员。所以，原来的代码看起来像
this：

var MyClass = function(value) {
    var test = !!value; // 'test' has to be a boolean
    this.data = {
        get test() { return test },
        set test(value) { test = !!value }
    };
};

var instance = new MyClass(true);

// But now 'data' is part of the access path
instance.data.test = 0;
console.log(instance.data.test);

产生：

false

不管你信不信，我实际上遇到过这样的情况
这个“偷袭”就是最好的解决办法。具体来说，我用的是这个
当我将多个表中的记录封装在其中时的技术
一个类，并且想要呈现一个统一的视图，就像
它们是一个称为“数据”的单一记录。

玩得开心。

IAM_AL_X

Answer 3

ES6 更新 - 查看 Alex Rauschmayer 的书 探索 ES6 的第 19.3.1 节 http://exploringjs.com/es6/ch_maps-sets.html#sec_weakmaps-private-data 演示了如何使用带有 getter 和 setter 的 WeakMap 来保存私有数据。结合第 16.2.2.3 节 http://exploringjs.com/es6 /ch_classes.html#leanpub-auto-getters-and-setters 会导致类似的结果

# module test_WeakMap_getter.js
var _MyClassProp = new WeakMap();
class MyClass {
    get prop() {
        return _MyClassProp.get( this ); 
    }
    set prop(value) {
        _MyClassProp.set( this, value );
    }
}
var mc = new MyClass();
mc.prop = 5 ;
console.log( 'My value is', mc.prop );

$ node --use_strict test_WeakMap_getter.js 
My value is 5

Answer 4

function Obj(value){
    this.value = !!value;
}

Obj.prototype = {
    get test () {
        return this.value;``
    },
    set test (value) {
        this.value = !!this.value;
    }
};
var obj = new Obj(true);

Answer 5

我知道这可能已经很晚了，但我想出了一种不同的方法来完成你想要的事情，并且为了像我这样的人，在这里搜索这个问题的答案。

function Constructor(input){
     this.input = input;
}
Object.__defineGetter__.call(Constructor.prototype, "value", function(){
    return this.input * 2;
});

var test = new Constructor(5);
alert(test.value) // 10

我已经在 chrome、safari、mobile safari、firefox 中对此进行了测试，它们都可以工作（当然是最新版本）

Answer 6

@Alex，我认为这是更多的选择和更多的力量，编程是艺术，@Nat 与我们分享他的发现，为此我感谢他。也许有人想这样做。

我确信 setter 版本是相同的，但只是将 g 更改为 s。

ig：

function Constructor(input){
     this.input = input;
}

Object.__defineGetter__.call(Constructor.prototype, "value", function(){
    return this.input * 2;
});

Object.__defineSetter__.call(Constructor.prototype, "bar", function(foo){
    return this.input *= foo;
});

var test = new Constructor(5);
console.log(test.value); // 10
test.bar = 5;
console.log(test.input); //25

话虽如此，此功能已被弃用，建议不要在生产编码中使用。