ECMAScript6 getting started Class Object example

This article mainly introduces the introduction of ECMAScript6-Class object, which is quite good for small editors. Now I will share it with you and give you a reference. Let's take a look at this article with a look at the introduction of ECMAScript6-Class object. I think this article is quite good. Now I will share it with you and give you a reference. Let's take a look at it with xiaobian.

Object-oriented languages have a flag, that is, they all have the concept of classes. Through classes, you can create any number of objects with the same attributes and methods.

ECMAScript5 does not have the class concept, so its object is different from the object in the class-based language.

The traditional method for generating objects using Javascript is implemented through constructor.

function Person(name, age){  this.name = name;  this.age = age;  this.sayHello = function(){    return "Hello "+ this.name;  }}var person = new Person("dahan",18);person.sayHello();//Hello dahan

The above method is the same as the method declared in Javascript, so the distinction between objects and methods is not obvious and can easily cause confusion.

ES6 introducedClass(Class). When we create an object through ES6 syntax, we can use keywords like Java syntax.classTo define the class. Of course, this syntax function can also be implemented through ES5, which only makes the class definition clearer and easier to understand.

// Class definition class Person {// ES6 constructor (name) {this. name = name;} // instance method sayName () {console. log ("My name is" + this. name) ;}}// class inheritance class Programmer extends Person {constructor (name) {// directly call the parent class constructor to initialize super (name);} program () {cosnole. log ("this is my location") ;}// run the test var person = new Person ('lingxiao'); var coder = new Programmer ('CODER'); person. sayName (); // my name is lingxiaocoder. sayName (); // my name is codercoder. program (); // This is my website

The following describes the syntax in the above Code.

Constructor

constructorIs the default method of the class, just like the main method in Java, each class must haveconstructorMethod.

InnewWhen an object is instantiated, it is automatically called.constructorMethod.constructorReturned value.constructorThe instance object of the current class is returned by default.（this）But we can also specify another object. Of course, this will lead to the instantiated object, not the instance of the current class.

class Person {  constructor(){    var ob = new Object();    return Ob;  }  sayHello(){    return "Hello World"  }}var person = new Person();person.sayHello();//Uncaught TypeError: person.sayHello is not a function

When we instantiate an object, ES6 requires that I use the new Keyword. If we call it directly, it will be called as a function.

class Person {  constructor(name){    this.name = name;  }};var person = Person("dahan");//Uncaught TypeError: Class constructor Person4 cannot be invoked without 'new'

This

In the initial code, we saw this, which points to the instance itself in the class, But if we use this in the class method, when we call this method separately, an error occurs.

class Person{  constructor(name){    this.name = name;  }  sayHello() {    return "Hello "+this.name  }}var person = new Person("dahan");var sayHello = person.sayHello;sayHello();//Uncaught TypeError: Cannot read property 'name' of undefined

For this, we can easily bind it to the constructor.this

class Person{  constructor(name){    this.name = name;    this.sayHello = this.sayHello.call(this);  }  sayHello() {    return "Hello "+this.name  }}

Inherit extend

We want to extend some attributes on a class, but we don't want to modify the original class, so we use inheritance.

// Class inheritance class Programmer extends Person {constructor (name, age) {this. age = age; // error // directly call the parent class constructor to initialize super (name);} program () {cosnole. log ("this is my website ");}}

When using inheritance, you must usesuperKeyword to call the parent class,super(name)Just stay forced. Call the parent class.constructorMethod.

In addition, when we use inheritance,superThe keywords also changed.thisSo we must callsuperMethod before you can usethis. ES6 requires that the subclass constructor must be executed once.superFunction. Otherwise, an error is returned.

Last

classThe emergence of keywords also makes Javascript look more like an object-oriented language. May Javascript become better and easier to use.

The above is a detailed description of the instance of the Class Object for getting started with ECMAScript6. For more information, see other related articles in the first PHP community!