Table of Contents
1. Agreement
Implementation
Advantages
Disadvantages
2. Closure
Implementation of one
Home Web Front-end JS Tutorial Implementation summary of private variables in ES6 (code example)

Implementation summary of private variables in ES6 (code example)

Nov 21, 2018 am 11:25 AM
es6 javascript front end

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
Copy after login

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
Copy after login

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
Copy after login

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
Copy after login

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
Copy after login

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
Copy after login
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;
  }
}
Copy after login

So why not use private fields directly? For example:

class Foo {
  private value;

  equals(foo) {
    return this.value === foo.value;
  }
}
Copy after login
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));
Copy after login
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
}));
Copy after login
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 of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1665
14
PHP Tutorial
1269
29
C# Tutorial
1249
24
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

PHP and Vue: a perfect pairing of front-end development tools PHP and Vue: a perfect pairing of front-end development tools Mar 16, 2024 pm 12:09 PM

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Is Django front-end or back-end? check it out! Is Django front-end or back-end? check it out! Jan 19, 2024 am 08:37 AM

Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

Exploring Go language front-end technology: a new vision for front-end development Exploring Go language front-end technology: a new vision for front-end development Mar 28, 2024 pm 01:06 PM

As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces

Django: A magical framework that can handle both front-end and back-end development! Django: A magical framework that can handle both front-end and back-end development! Jan 19, 2024 am 08:52 AM

Django: A magical framework that can handle both front-end and back-end development! Django is an efficient and scalable web application framework. It is able to support multiple web development models, including MVC and MTV, and can easily develop high-quality web applications. Django not only supports back-end development, but can also quickly build front-end interfaces and achieve flexible view display through template language. Django combines front-end development and back-end development into a seamless integration, so developers don’t have to specialize in learning

Questions frequently asked by front-end interviewers Questions frequently asked by front-end interviewers Mar 19, 2024 pm 02:24 PM

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

See all articles