Ausführliche Erläuterung der Anwendungsfälle der Klassenfunktion von es6-js-Tutorial-php.cn

Dieses Mal werde ich Ihnen die Anwendungsfälle der Klassenfunktion von es6 ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Klassenfunktion von es6? In der

JavaScript-Sprache erfolgt die Generierung von Instanzobjekten traditionell über den Konstruktor, der sich von herkömmlichen objektorientierten-Sprachen unterscheidet (wie C++ und Java) sind sehr unterschiedlich. ES6 bietet eine Schreibmethode, die den traditionellen Sprachen näher kommt und das Konzept der Klasse als Vorlage für Objekte einführt. Klassen können über das Schlüsselwort class definiert werden.

Der objektorientierte Unterschied zwischen der Klasse ES6 und der Klasse ES5:

1. Die Schreibmethode ist unterschiedlich, verwenden Sie das Schlüsselwort Klasse

2. Wenn eine Instanz neu ist, gibt es standardmäßig eine Konstruktormethode, und das Instanzobjekt (dieses) wird standardmäßig zurückgegeben. Es kann auch ein anderes Objekt zurückgeben

3. Alle Methoden der Klasse sind auf dem Prototyp-Attribut, aber sie sind nicht aufzählbar und das Semikolon kann nicht am Ende jeder Methode verwendet werden

4. Die Klasse muss über eine neue Instanz aufgerufen werden und die Klasse verwendet standardmäßig den strikten Modus

5. Es gibt keine Variablenheraufstufung, sie muss zuerst deklariert werden, dann aufrufen

diese von 6. Klasse zeigt standardmäßig auf die statische Methode der aktuellen Klasse

7 .class, verwenden Sie das Schlüsselwort static, es ist kein neues erforderlich, rufen Sie

direkt über die Klasse 8 auf. So schreiben Sie Instanzattribute und statische Attribute mithilfe der Gleichung (=) direkt in die Klasse. oder sie können in der Konstruktormethode geschrieben werden, fügen Sie einfach das Schlüsselwort static vor dem Instanzattribut hinzu

9. Der Vererbungsmechanismus unterscheidet sich völlig von es5

Das Vererbungsprinzip von es5: Zuerst das Instanzobjekt this der Unterklasse neu erstellen und dann die Methoden und Attribute der übergeordneten Klasse hinzufügen. Dazu hinzufügen (parents.call(this)).

Das Vererbungsprinzip von Es6: Erstellen Sie zuerst das Instanzobjekt this der übergeordneten Klasse. Wenn Sie also den Konstruktor () verwenden möchten, um mithilfe von this auf die Eigenschaften der übergeordneten Klasse zuzugreifen, müssen Sie zuerst super aufrufen ()-Methode; und verwenden Sie dann den Konstruktor() der Unterklasse, um dies zu ändern

10． Die Klassenvererbung kann den nativen Konstruktor erben, es5 jedoch nicht. Einige Funktionen können mit ES5 erreicht werden

Hinweis: Das Wesentliche der Klasse ist immer noch eine Funktion, und die Klasse selbst zeigt auf den Konstruktor.

//一.ES5写法：
function Animate(name){
  this.name = name;
}
Animate.prototype.getname = function(){
  console.log(this.name)
}
var p =new Animate("lity");
p.getname();
//二.ES6,面向对象的写法,calss,
class Person{
  //constructor()：构造方法是默认方法，new的时候回自动调用，如果没有显式定义，会自动添加
  //1.适合做初始化数据
  //2.constructor可以指定返回的对象
  constructor(name,age){
  　　 this.name = name;
  　　 this.age = age;
　　}
  getval(){
    console.log(`你是${this.name},${this.age}岁`);
  }
}      
var c1 = new Person("lity",20); 
c1.getval();

Nach dem Login kopieren

Wir verwenden einige Eigenschaften oder Methoden von Object, um das in es6 geschriebene Instanzobjekt zu erkennen

typeof Person  //function
Person === Person.prototype.constructor // true

Nach dem Login kopieren

2. Private Methode der Klasse (ES6 Nr Schreibmethode wird bereitgestellt) und private Attribute (es wird keine Schreibmethode bereitgestellt, der Vorschlag wird mit # gekennzeichnet)

Die sogenannten privaten Methoden und privaten Attribute können nur innerhalb der Klasse verwendet und nicht außerhalb aufgerufen werden Klasse

4.ES6 legt fest, dass die Class-Klasse keine statischen Attribute hat, sondern nur statische Methoden: static

Die sogenannte Statik muss das Objekt nicht instanziieren, sondern nur

//1.查看实例对象c1的proto是否指向Person的原型(Person.prototype)
 console.log(c1.proto==Person.prototype)//true
 console.log(c1.proto)//原型对象的所有方法
 //2.isPrototypeOf:检测实例对象是否是某个函数的原型
  console.log(Person.prototype.isPrototypeOf(c1));//true
//3.constructor:查看某个对象的构造函数
   console.log(c1.constructor);
 //4.hasOwnProperty:检测某个属性是否是自己的属性；不是原型对象上的属性和方法
   console.log(c1.hasOwnProperty("name"))//true;
 //5.in：通过in可以检测属性是否在自己中(this)或者是原型中存在
    console.log("getval" in c1)//原型上存在，true
    console.log("name" in c1)//constructor(自己上存在)，true
 //6.自定义检测属性是否是存在
    function hasproperty(attr,obj){
       return obj.hasOwnProperty(attr)&&(attr in obj);
    }
    console.log(hasproperty("name",c1));//true;

Nach dem Login kopieren

aufrufen 5.new.target attribute

new ist ein Befehl, der eine Instanz im Konstruktor generiert. ES6 stellt ein Attribut für new bereit.

gibt die Klasse (Konstruktor) des zurück Instanzobjekt durch den neuen Befehl, der im Allgemeinen intern innerhalb der Klasse verwendet wird

//class表达式
const Myclass = class Me{//这里的Me是没有作用的
  constructor(name,jog){
    this.name = name;
    this.jog = jog;
  }
  getval(){
    console.log(`name is ${this.name},job is a ${this.jog}`);
  }
}
 var obj1 = new Myclass("lylt","teacher");
 obj1.getval();

Nach dem Login kopieren

6.dies zeigt auf

Wenn die Methode der Klasse dies enthält, zeigt sie auf die Instanz der Klasse standardmäßig. Sie müssen jedoch sehr vorsichtig sein, sobald diese Methode alleine verwendet wird.

Das folgende Beispiel

class Foo {
   static classMethod() {
      return 'lity';
    }
 }
 console.log(Foo.classMethod()) // 'hello'

Nach dem Login kopieren

Analyse des obigen Beispiels: Dies in den prinName-Methodenpunkten standardmäßig zur Klasse Logger, ändern Sie die Methode jedoch separat. Beim Aufruf wird ein Fehler gemeldet, der auf die laufende Umgebung verweist, sodass ein Fehler gemeldet wird, da die Methode this.print() nicht gefunden werden kann.

Für die obige Methode, um das Problem dieses Zeigens zu lösen:

(1) Verwenden Sie bind(this)

(2). >{ }

(3). Verwenden Sie den Proxy-Agenten

//ES5：原始写法对象
function objtarge(name){
  if(new.target==undefined){
    throw new Error("必须实例化对象");
  }else{
    this.name = name
  }
}
var targets = new objtarge("litys");
console.log(targets.name);//litys
//es6写法:class内部使用new.target，返回当前的calss
class caltartget{
  constructor(name){
    console.log(new.target==caltartget);//true
    if(new.target!==caltartget){
      throw new Error("实例化对象不是caltrget");
    }else{
      this.name = name;
    }
  }
}
var caltart = new caltartget("lity");
console.log(caltart.name);//lity

Nach dem Login kopieren

7. Die Methoden get() und set() der Klasse

Sie können die verwenden get- und set-Schlüsselwörter zum Festlegen der Wertspeicherfunktion und der Wertfunktion für ein bestimmtes Attribut, um das Zugriffsverhalten des Attributs abzufangen.

class Logger {
 printName(name = 'there') {
  this.print(`Hello ${name}`);
 }
 print(text) {
  console.log(text);
 }
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

Nach dem Login kopieren

8. Vererbung

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

//es5 的继承
//父类
function Person(name,sex){
  this.name = name;//属性
  this.sex = sex;//属性       
}
//定义一个原型方法
Person.prototype.show = function(){
  console.log("我的姓名是"+this.name+"==="+"我的性别是"+this.sex)
}
//子类
function Worker(name,sex,job){      
  //构成函数伪装：使用call()方法绑定this，伪装继承父级的属性
  Person.call(this,name,sex);
  this.job = job;
}
//继承父类的原型方法：（介绍三种方法）
//写法一：通过遍历父级的原型一个个赋给子级的原型(es5 的原型是可枚举的，es6的不可以枚举)
(var i in Person.prototype){
  Worker.prototype[i] = Person.prototype[i];
}
//写法：重新new一个父级对象赋给子级的原型
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
//写法三：创建一个原型对象赋给子级的原型；(es5 推荐)
Worker.prototype = Object.create(Person.prototype);
Worker.prototype.constructor = Worker;
var workers = new Worker("小明","男","job")
//es6 的继承
class Person{
  constructor(name,sex){
    this.name = name;//属性
  　　 this.sex = sex;//属性
   }
}
class Worker extends Person{
   constructor(name,sex,job){
     super();
     this.job =job;
   }
}
var workers = new Worker("小明","男","job")

Nach dem Login kopieren

8.1:super关键字：在子类中不同情况用法不同,既可以当作函数使用，也可以当作对象使用。

(1)：super作为函数，只能在constructor中使用:代表父类，返回子类的this

(2)：super作为对象，在普通函数中，cuper指向父类的原型对象，可以访问原型对象的属性和方法,注意，父类的实例的属性和方法是访问不了的

(3)：super作为对象，在静态方法中，cuper指向的是父类，不是父类的原型对象

示例分析如下：

//父类
class Aniamte{
  constructor(){
    if(new.target == Aniamte){
      throw new Error("本类不能实例化，只能有子类继承");
    }
  }
  //静态方法
  static getval(mgs){
    console.log("父类的static",mgs)
  }
  //普通方法      
  setname(){
    console.log("该方法有子类重写")
  }      
}
//子类
class Dog extends Aniamte{
  constructor(){
    super();//调用此方法,this才用可以用,代表父类的构造函数，返回的却是子类
    //super() ==父类.prototype.constructor.call(子类/this)
    console.log(this)//Dog {}
    this.age = 20;
    }
  //静态方法,super在静态方法中作为对象使用，指向父类；
  static getval(mgs){
    super.getval(mgs)//父类的static niceday
    console.log("子类的static",mgs)//子类的static niceday
  }
  setname(name){
    //普通方法，super作为对象使用，指向父类的原型对象，父类.prototype;
    super.setname();//该方法有子类重写
    this.name = name;
    return this.name
  }
};
Dog.getval("niceday");//静态方法，直接调用
//var parAni = new Aniamte();//报错
var dogs = new Dog();//new 一个示例对象
dogs.setname("DOYS");////DOYS

Nach dem Login kopieren

8.2.原生构造函数的继承，ES5不支持，ES6利用extend可以继承原生构造函数

//ESMAScript的构造函数有以下几种
/* Boolean()
* Unmber()
* String()
* Array()
* Date()
* Function()
* RegExp()
* Error()
* Object()
*/
//实例一：自定义类Myarray 继承了原生的数组的构造函数，拥有原生数组的属性和方法了
class Myarray extends Array{
  constructor(){
  super();
  console.log(this.constructor.name)//Myarray
  }
}
var myarr = new Myarray();
console.log(Object.prototype.toString.call(myarr));//[object Array]
myarr.push(1,2,1);
console.log(myarr.length)//3

Nach dem Login kopieren

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！