Les cours Es6 sont-ils en mode strict ?

est le mode strict. En interne, les classes et modules es6 sont par défaut en mode strict, il n'est donc pas nécessaire d'utiliser « use strict » pour spécifier le mode d'exécution tant que le code est écrit dans la classe ou le module, seul le mode strict est disponible ; Étant donné que tout le code futur s'exécutera en fait dans des modules, ES6 met en fait à niveau l'ensemble du langage en mode strict.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Explication détaillée de la classe Class dans es6

syntaxe de base de la classe

Dans le langage JavaScript, la manière traditionnelle de générer des objets d'instance consiste à utiliser le mode de combinaison du constructeur et du prototype. ES6 fournit une méthode qui est. plus proche des langages traditionnels​​(java), introduit le concept de classe comme modèle pour les objets. Les classes peuvent être définies via le mot-clé class.

class point{ 
   
	constructor(x,y){ 
   
        this.x=x;
        this.y=y;
    }
    play(){ 
   
        console.log("我会玩");
    }
}

La classe ES6 peut être considérée comme un simple sucre syntaxique. La plupart de ses fonctions peuvent être réalisées par ES5. La nouvelle méthode d'écriture de classe ne fait que rendre la méthode d'écriture de prototype d'objet plus claire et plus proche de la syntaxe de la programmation orientée objet.

Remarque : « Sucre syntaxique » : est un terme inventé par l'informaticien britannique Peter J. Landin, qui fait référence à une certaine syntaxe ajoutée aux langages informatiques qui n'a pas d'impact sur les fonctions du langage, mais qui est plus pratique. pour les programmeurs à utiliser.

Plusieurs points essentiels à noter concernant les classes ES6 et les méthodes d'écriture ES5 : Le constructeur Point de ES5 correspond à la méthode constructeur de la classe Point de ES6. Toutes les méthodes d'une classe sont définies sur l'attribut prototype de la classe. Lors de la définition d'une méthode "classe", il n'est pas nécessaire d'ajouter le mot-clé function devant celle-ci, il suffit d'y mettre directement la définition de la fonction. Il n'est pas nécessaire de séparer les méthodes par des virgules. Si elles sont ajoutées, une erreur sera signalée. La méthode d'utilisation de la classe ES6 est exactement la même que celle du constructeur de l'ES5

//类的所有方法都定义在类的prototype属性上面。
class piont{ 
   
    constructor(){ 
   
		//
    }
    play(){ 
   
        
    }
}
//上述代码等价于
point.prototype={ 
   
    constructor() { 
   },
    play(){ 
   };
}

//在类的实例上面调用方法，其实就是调用原型上的方法。
class Ba{ 
   
	//
}
let b=new Ba();
b.constructor===Ba.prototype.constructor//true

De plus : le constructeur Point de l'ES5 correspond au constructeur de la classe Point de l'ES6.

Les méthodes de la classe étant définies sur l'objet prototype, de nouvelles méthodes de la classe peuvent être ajoutées sur l'objet prototype. La méthode Object.assign facilite l'ajout simultané de plusieurs méthodes à une classe.

class ponit{ 
   
    constructor(){ 
   
        
    }
}
Object.assign(Point.prototype,{ 
   
	play(){ 
   };
})
//Class直接定义的方法之间不需要逗号分隔，加了会报错. 但是这里是Object.assign的方法格式, 这里面需要往Point.prototype里面添加的方法就需要符合对象的默认格式

Toutes les méthodes définies à l'intérieur de la classe ne sont pas énumérables. Méthodes ajoutées au prototype de la classe via la méthode Object.assign, le constructeur n'est pas énumérable, d'autres peuvent être énumérés

Constructeur de la syntaxe de base de Class

La méthode constructeur est la méthode par défaut de la classe, et la L'instance d'objet est générée via la nouvelle commande, cette méthode est automatiquement appelée. Une classe doit avoir une méthode constructeur Si elle n'est pas explicitement définie, une méthode constructeur vide sera ajoutée par défaut.

La méthode constructeur renvoie l'objet instance (c'est-à-dire ceci) par défaut, et vous pouvez spécifier de renvoyer un autre objet (Les paramètres doivent être définis lors de la création de la classe. Une fois la classe créée, la valeur de retour du constructeur ne peut pas être modifiée via Object.assign).

La syntaxe de base de Class et d'autres méthodes d'appel

La classe doit être appelé en utilisant new, sinon une erreur sera signalée. C'est une différence majeure avec les constructeurs ordinaires (les constructeurs ordinaires peuvent être utilisés comme fonctions ordinaires), qui peuvent être exécutés sans new.

La syntaxe de base de la classe : getter et setter

Identique à ES5, vous pouvez utiliser les mots-clés get et set à l'intérieur de la "classe" pour définir la fonction de stockage et la fonction de valeur pour un certain attribut , intercepte le comportement d'accès de cet attribut.

  class demo{ 
   
            constructor(age){ 
   
                this.age=agie;
                this._age=age;
            }
            get age(){ 
   
                return this._age;
            }
            set age(value){ 
   
                this._age=value;
                console.log("年龄"+value);
            }
        }
        let kevin=new demo(9);
        kevin.age=18;
        console.log(kevin.age);

Syntaxe de base de la classe et autres noms d'attributs

Dans le code ci-dessus, le nom de la méthode getArea de la classe Square est obtenu à partir de l'expression.

Points particuliers à noter sur la syntaxe de base de Class

(1) Mode strict

Les éléments internes des classes et des modules sont en mode strict par défaut, il n'est donc pas nécessaire d'utiliser use strict pour spécifier le mode d'exécution . Tant que votre code est écrit dans une classe ou un module, seul le mode strict est disponible. Étant donné que tout le code futur s'exécutera en fait dans des modules, ES6 met en fait à niveau l'ensemble du langage en mode strict.

(2) Il n'y a pas de promotion

new foo（）；
class foo{}；

Dans le code ci-dessus, la classe Foo est utilisée en premier et définie plus tard. Cela provoquera une erreur car ES6 ne promouvra pas la déclaration de classe en tête du code.

(3) attribut name

class point{
}
point.name//point

Étant donné qu'en substance, les classes ES6 ne sont qu'un wrapper pour les constructeurs ES5, de nombreuses fonctionnalités de la fonction sont héritées par Class, y compris l'attribut name.

(4) Si cela pointe vers la méthode de la classe

, s'il contient ceci, il pointera vers l'instance de la classe par défaut. Cependant, vous devez être très prudent, car cette méthode peut provoquer des erreurs si elle est utilisée seule.

printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境（由于 class 内部是严格模式，所以 this 实际指向的是undefined），从而导致找不到print方法而报错。

解决办法：

一个比较简单的解决方法是，在构造方法中绑定this，这样就不会找不到print方法了。

另一种解决方法是使用箭头函数。箭头函数位于构造函数内部，它的定义生效的时候，是在构造函数执行的时候。这时，箭头函数所在的运行环境，肯定是实例对象，所以this会总是指向实例对象。

class Logger{ 
   
    constructor(){ 
   
        this.printName=this.printName.bind(this);
        //但是请注意bind之后返回的函数里面的this就永久锁死了问题:!!! !!! 坚决别用 
    }
}
//箭头函数
class Obj{ 
   
    constructor(){ 
   
        this.getThis=()=>this;
    }
}
let o=new Obj();
o.getThis()===o//true

Class的静态属性和方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

 class Person{ 
   
            static sum=0;
            constructor(){ 
   
                this.add();
            }
            add(){ 
   
                Person.sum++;
            }
        }
        let kaiwen=new Person();
        console.log("当前的聊天室人数为："+Person.sum);
        //作用：当没有实例化的时候，我们可以通过静态的属性和方法去获取一些信息
 // 注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。静态方法可以与非静态方法重名。

父类的静态方法，可以被子类继承静态方法也是可以从super对象上调用的。

 class Person{ 
   
            constructor(name){ 
   
                this.name=name;
                this.sex="男";
            }
        }
        class Student extends Person{ 
   
            constructor(name,age){ 
   
                super(name);
                this.age=age;
            }
        }
        let s=new Student("张三",11);
        console.log(s.name);
        console.log(s.age);
        console.log(s.sex);

Class的私有方法和私有属性

私有方法和私有属性:是只能在类的内部访问的方法和属性，外部不能访问。 这是常见需求，有利于代码的封装，但 ES6 不提供，只能通过变通方法模拟实现。

_bar方法前面的下划线，表示这是一个只限于内部使用的私有方法。但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法

下面代码中的写法不仅可以写私有属性，还可以用来写私有方法

 class Cat{ 
   
            #eyes="眼睛";
            static pai(){ 
   
                console.log("凯文");
            }
            say(){ 
   
                Cat.pai();
                console.log("猫有一双大大的"+this.#eyes);
            }
        }
        let kate=new Cat();
        kate.say();

私有属性也可以设置 getter 和 setter 方法。

私有属性不限于从this引用，只要是在类的内部，实例也可以引用私有属性。

构造函数的新属性

ES6 为new命令引入了一个new.target属性，该属性一般用在构造函数之中，返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。

私有属性也可以设置 getter 和 setter 方法。

私有属性不限于从this引用，只要是在类的内部，实例也可以引用私有属性。

【相关推荐：javascript视频教程、编程视频】

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!