instructions

  • Understand the use of es6+ classes
  • Learn about the usage of set and GET
  • Suitable for: ES6 + beginners

Use of the class ES7 class

A class extends super

  • The class declaration creates a new class with a given name based on archetypal inheritance. You can also define classes using class expressions. But unlike class expressions, class declarations do not allow you to re-declare an existing class, otherwise a type error will be thrown.

  • Declare a class, Polygon, and then Square inherits Polygon. Use super() only in constructors. And must be called before using the this keyword.

Use the extends to create a subclass/super keyword to call functions on an object’s parent.

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.'); }}class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.'); }}Copy the code

Static static method

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

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.hypot(dx, dy); }}const p1 = new Point(5.5);
const p2 = new Point(10.10);

console.log(Point.distance(p1, p2));
Copy the code

The use of GET

  • getThe syntax binds an object property to the function that will be called when the property is queried.
var obj = {
  log: ['a'.'b'.'c'],
  get latest() {
    if (this.log.length == 0) {
      return undefined;
    }
    return this.log[this.log.length - 1]; }}console.log(obj.latest);
// expected output: "c"
console.log(obj)
/ / {
// latest: "c"
// log: ["a", "b", "c"]
// }
Copy the code

  • From 👆 you can see that latest is already run at initialization, and latest is evaluated as a property of obj and displayed, finding the last value of the log array

  • Usage (automatically detects login every time you log in)

class login {
    // Token stores the key value
    static TOKEN_KEY = 'geqwrgfboiadsad';
    
    // Every time class Security is used hasLogin() is called to determine whether to log in
    get hasLogin() {
        return this.currentUser ! = =null;
    }
    
    async signup(params) {
        return await http.post(API.signup(), params, {
            noToken: true
        });
        / /!!!!!! Step1 only the invitation code is returned for registration. After adding a login, the user information is stored in localStorage}}Copy the code

Use of GET. Get can be run directly during class initialization and then used as a property of the class

Use of three sets

  • When you try to set a property, the set syntax binds the object property to the function to be called.
var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
language.current = 'FA';

console.log(language.log);
// expected output: Array ["EN", "FA"]
Copy the code
  • Set can automatically change its properties

The delete operator

delete obj.lastest
// This removes the getter
Copy the code

DefineProperty defines getters and setters on existing objects

var o = { a:0 }

Object.defineProperty(o, "b", { get: function () { return this.a + 1; }});console.log(o.b) // Runs the getter, which yields a + 1 (which is 1)

// get
// ------------
// set

var o = { a:0 };

Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; }}); o.b =10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.a) / / 5
Copy the code