OOP Javascript - Getter & Setter

Posted 2023-02-23

【中文标题】OOP Javascript - Getter & Setter

【英文标题】：s

【发布时间】：2019-01-31 22:37:27

【问题描述】：

我一直在研究 javascript 中的一些 oop 原理，但是我遇到了一些与我的代码限制有关的问题。在 C# 和 Java 中，我们可以轻松地执行这种限制并查看结果，但在 javascript 中，我不完全理解幕后发生的事情。

无论如何，我正在尝试创建一个人们基本上无法在外面更改的代码。这就是为什么我知道我们应该使用局部变量而不是创建对象属性，并且通过使用 getFunction 作为我们可以从外部读取的方法。

另一种方法是使用 "Object.defineProperty"（Getters & Setters）

所有这些都非常适合原始类型，但我想我们有一些问题。我不能限制我的代码只读。由于引用类型特性，我可以在不编写任何 setter 方法的情况下更改值。那么我该如何解决这个问题呢？

// Abstraction
function Circle(radius) 

this.radius = radius;

let defaultLocation =  x: 0, y: 0 ;
let color = 'red';

this.getDefaultLocation = function() 
    return defaultLocation;


this.draw = function()
    for (let key in defaultLocation) 
        console.log(key, defaultLocation[key]);
    
    console.log('drawn');
;

// This can be changed from outside without set()
Object.defineProperty(this, 'defaultLocation', 
    get()
        console.log('get function');
        return defaultLocation;
    
);

// This needs set() to be changed
Object.defineProperty(this, 'color', 
    get()
        console.log('get function');
        return color;
    ,
    set(value)
        color = value;
    
);


const circle = new Circle(10);

【参考方案1】：

如果您只想要一个 get() 函数，您可以使用构造函数（不是最新的 ECMAScript 语法），将块作用域 (let) 变量作为私有实例变量。关键是不要使用this 关键字。

function Circle(r = 0) 

    // Private
    let raduis = r


    // Public
    this.getRaduis = function() 

      return raduis
    



let circle = new Circle(1)

console.log(circle.getRaduis())
console.log(circle.raduis)

输出：

1
undefined

您可以向defineProperty 添加另一个选项。这有效地创建了一个final static 常量。只需设置writeable = false。

Object.defineProperty(Circle, 'constants', 

  value : 

    constant  : 0,
    operation : () => 

      console.log('Some non-primitive')
    
  ,

  writable     : false,
  enumerable   : false,
  configurable : false
);

Circle.constants.operation()

输出：

Some non-primitive

请参阅documentation 的“可写属性”部分。

【参考方案2】：

你说

我正在尝试创建一个人们基本上无法在外部更改的代码。

请参阅another stack overflow question。你可以使用 ES6 类语法，像这样

class Circle 
    constructor(radius) 
        this.radius = radius;
    

    get defaultLocation() 
        return  x: 0, y: 0 ; // Read-only
    
    get color() 
        return 'red'; // Read-only
    


let test = new Circle(2);
console.log(test.defaultLocation); // x: 0, y: 0
test.defaultLocation = 10; // No error but won't do anything
console.log(test.defaultLocation); // x: 0, y: 0