Shulou(Shulou.com)06/03 Report--

This article will explain in detail how the new class grammar tab in jses6 is, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

In fact, many of the object-oriented principles and mechanisms of es6 are still ES5, but the syntax is similar to the object-oriented syntax in the old back-end languages of php and java.

First, encapsulate a basic class with es6

Class Person {constructor (uName) {this.userName = uName;} sayName () {return this.userName;}}

Whether it is very similar to the classes in php and java, in fact, the essence is still the prototype chain, we'll see.

First of all, let's talk about the grammar rules:

Person in class Person is the class name, which can be customized.

Constructor is the constructor. This is the keyword. When an object is instantiated, this constructor is called automatically.

Let oP = new Person ('ghostwu'); console.log (oP.sayName ()); / / ghostwu console.log (oP instanceof Person); / / true console.log (oP instanceof Object); / / true console.log (typeof Person); / / function console.log (typeof Person.prototype.sayName); / / function console.log (oP.__proto__ = Person.prototype); / / true console.log (' sayName' in oP); / / true console.log (Person.prototype)

Lines 1 and 2 instantiate and invoke methods the same as es5

Lines 4 and 5 determine whether the object is an instance of a class (Person) and Object, and the result is the same as es5. At this time, we must wonder whether the essence of Person is a function.

Line 7 completely validates our idea that the Person class is essentially a function.

Line 8 shows that the function sayName is actually added to the prototype object of Person.

Line 9 also verifies the prototype chain characteristics of es5: the implicit prototype of the object points to the prototype object of the constructor.

Line 10 verifies that the oP object finds the sayName method through the prototype chain lookup

This kind of grammar, called grammatical sugar, is essentially a prototype chain.

Second, use the basic class usage to encapsulate an addition operation

Class Operator {constructor (N1 = 1, N2 = 2) {this.num1 = N1; this.num2 = N2;} add (N1 = 10, N2 = 20) {let num1 = N1 | | this.num1, num2 = N2 | | this.num2; return num1 + num2;}} var oper = new Operator (); console.log (oper.add (100,200))

Third, use the basic class syntax to encapsulate the classic tabs

Css Code:

# tab div {width: 200px; height: 200px; border: 1px solid # 000; display: none;} # tab div:nth-of-type (1) {display: block;} .active {background: yellow;}

Html Code:

1 2 3 4

Javascript Code:

_ window.onload = () = > {class Tab {constructor (context) {let cxt = context | | document; this.aInput = cxt.querySelectorAll ("input"); this.aDiv = cxt.querySelectorAll ("div");} bindEvent () {let targetId = null; this.aInput.forEach ((ele, index) = > {ele.addEventListener ("click", () = > {targetId = ele.dataset.target) This.switchTab (ele, targetId);});} switchTab (curBtn, curId) {let oDiv = document.querySelector (curId); this.aDiv.forEach ((ele, index) = > {ele.style.display = 'none'; this.an input [index] .className =';}); curBtn.className = 'active'; oDiv.style.display =' block' }} new Tab (document.querySelector ("# tab")). BindEvent ();} about how the new class syntax tab in jses6 is shared here. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.