Detailed explanation of the application examples of ES6 CLASS in WeChat applets

Basic usage of ES6 CLASS

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

 toString() {
  return '(' +  + ', ' +  + ')';
 }
}

1.1 constructor method

The constructor method is the default method of the class. This method is automatically called when an object instance is generated through the new command. A class must have a constructor method. If not explicitly defined, an empty constructor method will be added by default.

class Point {
}

// Equivalent toclass Point {
 constructor() {}
}

In the above code, an empty class Point is defined, and the JavaScript engine will automatically add an empty constructor method to it.

Class 1.2 Example

The way to write an instance of a generated class is exactly the same as ES5, and it also uses the new command. As mentioned earlier, if you forget to add new and call Class like a function, an error will be reported.

class Point { // ...
} // Report an errorvar point = Point(2, 3); // correctvar point = new Point(2, 3);

1.3 Value function (getter) and value storage function (setter)

Like ES5, you can use the get and set keywords inside the "class" to set the value storage function and the value acquisition function for a certain attribute to intercept the access behavior of the attribute.

class MyClass {
 constructor() {
  // ...
 }
 get prop() {
  return 'getter';
 }
 set prop(value) {
  ('setter: '+value);
 }
}

let inst = new MyClass();

 = 123;
// setter: 123


// 'getter'

1.4 This point

If this is included in the class method, it points to the instance of the class by default. However, you must be very careful that once you use this method alone, you may report an error.

class Logger {
 printName(name \= 'there') { (\`Hello ${name}\`);
 }

 print(text) {
  (text);
 }
}

const logger \= new Logger();
const { printName } \= logger;
printName(); // TypeError: Cannot read property 'print' of undefined

In the above code, this in the printName method points to an instance of the Logger class by default. However, if this method is extracted and used separately, this will point to the environment where the method is running (because class is strictly internal, this actually points to undefined), resulting in an error that cannot be found.

ES6 CLASS application example in WeChat applet

//

import {Card} from './Card/'; //Quoteconst app = getApp()
Page({
 //Initialize the data data: {
  cards:{},
 },
 onLoad: function () {
  var url = "https://app.******.com/submit_ajax.ashx?action=APP_GetCardslist";
  var param = {uid:'37906'};
  var carcard = new Card(url,param);

  var that = this;
  //If the callback is synchronous, you can use the following method to directly get the value  // var cardData = ();
  ((data)=&gt;{
   //Judge the data source   if ( == '1') {
    ({
     cards: 
    })
    ();
   } else {
    ({
     title: ,
     icon:'none'
    })
   }
  })
 },
 
})

var util = require("../../../utils/");
//Create Card objectclass Card {
 //Constructor, here two parameters are provided constructor(url,parameter) {
   = url;
   = parameter;
 }
 
 getCardData(cb) {
   = cb;
  (,,"POST",(this));
 }

 processCarCardData(data) {
  if (!data) {
   return;
  }
  (data);
 }

}
//The class object is a module, use export to output the objectexport {Card}

//

function http(url,parameter,method, callback) {
 ({
  url: url,
  method: method,
  data:{parameter},
  header: { "Content-type": "application/json" },
  success: function (res) {
   callback();
  },
  fail: function () {
   ("error");
  }
 });
}

 \= {
 http:http
}

This is the article about the detailed explanation of the application examples of ES6 CLASS in WeChat applets. For more related applets, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!