Simple use of JavaScript class class encapsulation based on ECMAScript 6, ECMAScript 2015

Source: Internet
Author: User

Simple use of JavaScript class class encapsulation based on ECMAScript 6, ECMAScript 2015

Article source blog.csdn.net/joyous/article/details/79102169

Create a JS file test.js

In the following example, we first define a class named Polygon, and then inherit it to create another class named Square. Note that the super () used in the constructor can only be used in the constructor and must be invoked before the This keyword is used.

And then define two functions fun1 and fun2 in the class of Polygon, and output constructs the parameters passed in.

/**
 * Create two JS class and define a constructor (constructed)

/class Polygon {
  //constructor
  constructor (height, width) {
  this.name = ' Polygon ';
    this.height = height;
    This.width = width;
  }

  fun1 function
  fun1 () {
    console.log (' fun1 ', this.name, This.height, this.width);

  fun2 function
  fun2 () {
    console.log (' fun2 ', this.name, This.height, this.width);
  }

Define square class and extend Polygon
class Square extends Polygon {
  constructor (height, width) {
    super (height, WI DTH);
    this.name = ' Square ';
  }
Create an HTML page file

<! doctype>
Output results

POLYGON1.FUN1 () output
fun1 Polygon

//polygon1.fun2 () output
fun2 Polygon

//polygon2.fun1 () output 
  FUN1 Polygon

//polygon2.fun2 () output
fun2 Polygon/

/square.fun1 () output
fun1 square

SQUARE.FUN2 () output
fun2 Square 35 36

The above test is based on Google Chrome Ver63, we can see the JavaScript class exactly as expected to run, the correct display of polygon fun and Square fun, this definition and c++/Java class set The semantic approach is very similar, conforming to the class encapsulation concept that the back-end programmer can use JavaScript entirely with class, and no longer feels that the previous JavaScript syntax is slightly inappropriate (from a C++/java syntax perspective), for C++/java programmers need to take into account The JavaScript program is simply the gospel. Article source blog.csdn.net/joyous/article/details/79102169

Q Group discussion: 236201801


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.