Implementation of JavaScript private attributes and comparison explanations

1. Use Closure

Closures are a classic way to implement private properties in JavaScript. With closures, we can create variables inside the function, which are invisible to the outside.

Sample code:

function Person(name) {
    let _name = name; // Private attributes 
     = function() {
        return _name;
    };
 
     = function(newName) {
        _name = newName;
    };
}
 
const person = new Person("Alice");
(()); // Output: Alice(person._name); // Output: undefined (Can't access directly)

advantage:

• Good compatibility and works on all JavaScript environments.
• Simple to implement and easy to understand.

shortcoming:

• Each instance creates a separate method, which can lead to memory waste.
• The code structure is not intuitive enough, especially for complex classes.

2. Use Symbol

Symbol is a unique identifier introduced by ES6 that can be used as the attribute name of an object, thereby implementing private attributes.

Sample code:

const _name = Symbol('name');
 
class Person {
    constructor(name) {
        this[_name] = name;
    }
 
    getName() {
        return this[_name];
    }
}
 
const person = new Person("Bob");
(()); // Output: Bob(person[_name]); // Available to access，But you need to know Symbol value

advantage:

• The attribute name is unique to avoid naming conflicts.
• The code structure is clear and suitable for ES6 and above.

shortcoming:

• passThe Symbol property is still accessible, not really private.
• Additional management of Symbol variables is required.

3. Use WeakMap

WeakMap is a key-value pair collection introduced by ES6. The key must be an object and can be used to store private properties.

Sample code:

const _name = new WeakMap();
 
class Person {
    constructor(name) {
        _name.set(this, name);
    }
 
    getName() {
        return _name.get(this);
    }
}
 
const person = new Person("Charlie");
(()); // Output: Charlie(person._name); // Output: undefined (Can't access directly)

advantage:

• It truly implements private attributes and cannot be accessed externally.
• Memory management is more efficient, WeakMap does not prevent garbage collection.

shortcoming:

• The code structure is slightly complicated.
• An additional WeakMap instance is required to store the properties.

4. Use # Syntax (ES2022)

ES2022 has introduced#Syntax, private attributes can be defined directly in the class.

Sample code:

class Person {
    #name; // Private attributes 
    constructor(name) {
        this.#name = name;
    }
 
    getName() {
        return this.#name;
    }
}
 
const person = new Person("David");
(()); // Output: David(person.#name); // Report an error: Unable to access private properties

advantage:

• The grammar is concise, intuitive and easy to use.
• It truly implements private attributes and cannot be accessed externally.

shortcoming:

• Only supports ES2022 and above environments, and poor compatibility.
• For old projects, you may need to use tools such as Babel for translation.

Method comparison summary

Practical advice

1. Compatibility priority: If you need to run in an old environment, it is recommended to use closures or Symbol.
2. Simplicity is preferred: If the project supports ES2022, it is recommended to use#grammar.
3. Safety priority: If you need truly private attributes, it is recommended to use WeakMap or#grammar.

Conclusion

There are many ways to implement private attributes in JavaScript, and developers can choose appropriate solutions based on project needs and environment. With the development of language,#Syntax will become the mainstream way in the future, but in the transition stage, other methods still have their application scenarios. I hope this article can help you better understand and apply private attributes.

The above is the detailed content of the implementation method and comparison of JavaScript private attributes. For more information about JavaScript private attributes, please pay attention to my other related articles!