Home  >  Article  >  Web Front-end  >  Implementation summary of private variables in ES6 (code example)

Implementation summary of private variables in ES6 (code example)

不言
不言forward
2018-11-21 11:25:491667browse

This article brings you a summary of the implementation of private variables in ES6 (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When I read "Introduction to ECMAScript 6", I saw scattered implementations of private variables, so I will summarize it here.

1. Agreement

Implementation

class Example {
    constructor() {
        this._private = 'private';
    }
    getName() {
        return this._private
    }
}

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex._private); // private

Advantages

  1. Simple writing method

  2. Easy debugging

  3. Good compatibility

Disadvantages

  1. External access and modification

  2. The language does not have a matching mechanism. For example, the for in statement will enumerate all attributes

  3. Naming conflict

2. Closure

Implementation of one

/**
 * 实现一
 */
class Example {
  constructor() {
    var _private = '';
    _private = 'private';
    this.getName = function() {return _private}
  }
}

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex._private); // undefined

Advantages

  1. No naming conflicts

  2. ##External Unable to access and modify

Disadvantages

  1. The logic of the constructor becomes complicated. The constructor should only do object initialization. Now in order to implement private variables, it must include the implementation of some methods, and the code organization is slightly unclear.

  2. Methods exist on instances, not prototypes, and subclasses cannot use super to call

  3. Construction adds a little overhead

Implementation 2

/**
 * 实现二
 */
const Example = (function() {
  var _private = '';

  class Example {
    constructor() {
      _private = 'private';
    }
    getName() {
      return _private;
    }
  }

  return Example;

})();

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex._private); // undefined

Advantages

  1. No naming conflict

  2. Cannot be accessed and modified externally

Disadvantages

  1. The writing method is a bit complicated

  2. The construction adds a little overhead

3. Symbol

Implementation

const Example = (function() {
    var _private = Symbol('private');

    class Example {
        constructor() {
          this[_private] = 'private';
        }
        getName() {
          return this[_private];
        }
    }

    return Example;
})();

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex.name); // undefined

Advantages

  1. No naming conflict

  2. Cannot be accessed and modified externally

  3. No performance loss

Disadvantages

  1. Slightly written Complex

  2. The compatibility is also good

4. WeakMap

implementation

/**
 * 实现一
 */
const _private = new WeakMap();

class Example {
  constructor() {
    _private.set(this, 'private');
  }
  getName() {
      return _private.get(this);
  }
}

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex.name); // undefined

if written like this , you may feel that the encapsulation is not enough, you can also write like this:

/**
 * 实现二
 */
const Example = (function() {
  var _private = new WeakMap(); // 私有成员存储容器

  class Example {
    constructor() {
      _private.set(this, 'private');
    }
    getName() {
        return _private.get(this);
    }
  }

  return Example;
})();

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex.name); // undefined
Advantages

  1. No naming conflicts

  2. External Unable to access and modify

Disadvantages

  1. Writing is more troublesome

  2. Compatibility is a bit problematic

  3. There is a certain performance cost

5. The latest proposal

class Point {
  #x;
  #y;

  constructor(x, y) {
    this.#x = x;
    this.#y = y;
  }

  equals(point) {
    return this.#x === point.#x && this.#y === point.#y;
  }
}

So why not use private fields directly? For example:

class Foo {
  private value;

  equals(foo) {
    return this.value === foo.value;
  }
}
To put it simply, it is too troublesome, and of course there are performance considerations...

For example, if we do not use #, but use the private keyword :

class Foo {
  private value = '1';

  equals(foo) {
    return this.value === foo.value;
  }
}

var foo1 = new Foo();
var foo2 = new Foo();

console.log(foo1.equals(foo2));
Here we create two new instances, and then pass foo2 as a parameter into the instance method of foo1.

So can we get the value of foo2.value? If we directly

foo2.value we will definitely not be able to get the value. After all, it is a private variable, but equals is a class method of Foo, so can we get it?

The answer is yes.

In fact, this is the same in other languages, such as Java and C.

Member functions of a class can access private variables of instances of the same type. This is because privateness is for implementation "External" information is hidden within the class itself. There is no need to prohibit access to private variables. You can also understand that the restrictions on private variables are based on the class, not the object. In addition, this can also provide users with Bring convenience.

Since it is possible to get the value, the printed result should be true, but what if the value we pass in is not an instance of Foo, but another object?

var foo1 = new Foo();

console.log(foo1.equals({
  value: 2
}));
Of course the code here can run normally, but for the compiler, it is a little troublesome, because the compiler does not know whether value is a normal property or a private property of foo, so the compiler needs to do Judgment, first determine whether foo is an instance of Foo, and then obtain the value.

This also means that such a judgment needs to be made for every attribute access, and the engine has been highly optimized around attribute access and is too lazy to change, and it also reduces the speed.

But in addition to this work, there are some other things that need to be considered, such as:

  1. You must encode the private key into each lexical environment

  2. for in Can it be traversed through these properties?

  3. When private attributes and normal attributes have the same name, who will block whom?

  4. How to prevent the name of private attributes from being detected.

For more discussion about using # instead of private, please refer to this Issue.

Of course these problems can be solved, but they are a little troublesome.

And if you choose #, the implementation method will have nothing to do with JavaScript object properties. It will use the

private slots method and use a new slot search syntax. In short, it will be better than The implementation of private is much simpler.

The above is the detailed content of Implementation summary of private variables in ES6 (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete