Explication détaillée de l'utilisation des fonctionnalités de classe dans es6

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des fonctionnalités de classe dans es6. Quelles sont les précautions pour utiliser les fonctionnalités de classe dans es6. Voici des cas pratiques, jetons un coup d'œil. Dans le langage

javaScript, la manière traditionnelle de générer des objets d'instance consiste à utiliser un constructeur, ce qui est différent des langages orientés objet traditionnels (comme C++ et Java) sont très différents. ES6 propose une méthode d'écriture plus proche des langages traditionnels et introduit le concept de classe comme modèle pour les objets. Les classes peuvent être définies via le mot-clé class.

La différence entre la classe es6 et l'orienté objet es5 :

1. La méthode d'écriture est différente, utilisez le mot-clé class

2 .Lors de la création d'une instance, il existe une méthode constructeur par défaut, et l'objet instance (this) est renvoyé par défaut. Il peut également renvoyer un autre objet

3. Toutes les méthodes de la classe sont. sur l'attribut prototype, mais ils ne sont pas énumérables. Et le point-virgule ne peut pas être utilisé à la fin de chaque méthode

4. La classe doit être appelée via une nouvelle instance, et la classe utilise le mode strict par défaut

🎜>

5. Il n'y a pas de promotion de variable, il faut d'abord la déclarer, Puis appeler

ceci de 6.class pointe par défaut vers la méthode statique de la classe actuelle

7 .class, utilisez le mot-clé static, aucun new n'est nécessaire, appelez

directement via la classe 8. Comment écrire les attributs d'instance et les attributs d'instance statiques sont écrits directement dans la classe en utilisant l'équation (=), ou ils peuvent être écrits dans la méthode constructeur. Pour les attributs statiques, ajoutez simplement le mot-clé static avant l'attribut d'instance

9. L'héritage de classe utilise le mot-clé extends. Le mécanisme d'héritage est complètement différent de es5.

Le principe d'héritage d'es5 : d'abord créer l'objet instance this de la sous-classe, puis ajouter les méthodes et attributs de la classe parent Ajouter à this de la sous-classe (parents.call(this)).

Le principe d'héritage d'Es6 : créez d'abord l'objet instance this de la classe parent, donc si vous souhaitez utiliser le constructeur() pour accéder aux propriétés de la classe parent en utilisant this, vous devez d'abord appeler le super () ; puis utilisez le constructeur() de la sous-classe ) pour modifier ceci

10． L'héritage de classe peut hériter des constructeurs natifs, mais es5 ne peut pas

1. Méthode d'écriture générale (es5 et es6)

//一.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();

La classe ES6 peut être considérée comme un simple sucre de syntaxe, sa plupart des fonctions peuvent être réalisé avec ES5

Remarque : l'essence de la classe est toujours une fonction et la classe elle-même pointe vers le constructeur.

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

Nous utilisons certaines propriétés ou méthodes d'Object pour détecter les objets d'instance écrits en es6

//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;

2. Écriture d'expression

//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();

3. méthodes (ES6 ne fournit pas de méthode d'écriture) et attributs privés (ne fournit pas non plus de méthode d'écriture, la proposition est identifiée par #)

Les méthodes dites privées et les attributs privés ne peuvent être utilisés qu'à l'intérieur du classe, pas dans la classe Appels externes

4.ES6 stipule que la classe Class n'a pas d'attributs statiques, seulement des méthodes statiques : static

Le soi-disant statique n'a pas besoin d'instancier l'objet , appelez simplement directement

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

5 attribut .new.target

new est une commande pour générer une instance dans le constructeur ES6 fournit un attribut .target pour new. 🎜> renvoie la classe (constructeur) de l'objet instance via la nouvelle commande Généralement utilisée à l'intérieur de la classe

6 cela pointe vers

//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

Si la méthode de la classe contient ceci. , il pointe vers l'instance de la classe par défaut. Il faut cependant être très prudent. Une fois cette méthode utilisée seule, une erreur est susceptible d'être signalée

L'exemple suivant

Analyse de l'exemple ci-dessus : ceci dans le prinName. La méthode pointe vers la classe Logger par défaut, mais sera modifiée. Si la méthode est appelée seule, une erreur sera signalée vers l'environnement en cours d'exécution, donc une erreur sera signalée car la méthode this.print() ne peut pas être. trouvé.

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

Pour la méthode ci-dessus pour résoudre le problème de ce pointage :

(1) Utilisez bind(this)

(2) Utilisez la fonction de flèche es6 () =. >{ }

(3). Utiliser le proxy proxy

7. Les méthodes get() et set() de class

//1.bind()方法
class Logger {
 constructor() {
  this.printName = this.printName.bind(this);
 }
 // ...
}
//2.箭头函数 （）=>{}
class Logger {
 constructor() {
  this.printName = (name = 'there') => {
   this.print(`Hello ${name}`);
  };
 }
 // ...
}
//3. Porxy()
.................

sont les mêmes que celles d'ES5. , dans la "classe", vous pouvez utiliser les mots-clés get et set en interne pour définir la fonction de stockage de valeur et la fonction de valeur pour un certain attribut afin d'intercepter le comportement d'accès de l'attribut.

8. Héritage

class MyClass {
 constructor() {
  // ...
 }
 get prop() {// 使用 get 拦截了该方法的返回值
  return 'getter';
 }
 set prop(value) {//当对该方法赋值时能获取到该赋值
  console.log('setter: '+value);
 }
}
let obj = new MyClass();
obj.prop = 123;
// setter: 123
inst.prop
// 'getter'

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")

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

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

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

推荐阅读：

React Form组件封装步骤详解

Vue数组变异实现详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!