es6のクラス機能のユースケースを詳しく解説-jsチュートリアル-php.cn

今回はes6のクラス機能の活用事例について詳しくご説明します es6のクラス機能を利用する際の注意点について、実際の事例をご紹介します。

JavaScript 言語では、インスタンスオブジェクトを生成する従来の方法はコンストラクターを使用します。これは、従来のオブジェクト指向言語 (C++ や Java など) とは大きく異なります。伝統的な言語に近く、オブジェクトのテンプレートとしてクラス（クラス）の概念が導入されています。クラスは class キーワードを通じて定義できます。

es6 クラスと es5 のオブジェクト指向の違い:

1. さまざまな書き込みメソッド、キーワード class を使用します

2. インスタンスを新規作成する場合、デフォルトでコンストラクターメソッドがあり、インスタンスオブジェクト(this) はデフォルトで返されますが、別のオブジェクトを返すこともできます

3. クラスのすべてのメソッドはプロトタイプ属性にありますが、列挙可能ではなく、各メソッドの末尾にセミコロンを使用することはできません

4クラスへの呼び出しは new のインスタンスを渡す必要があり、クラス Strict モードがデフォルトで内部で使用されます

5. 変数の昇格はなく、最初に宣言してから呼び出す必要があります

6. this のクラスのポイントデフォルトで現在のクラスの静的メソッドに追加されます

7. クラス、キーワード static を使用します。新規は必要ありません。クラスを通じて直接呼び出されます。

8. インスタンス属性と静的属性の記述方法インスタンス属性は、を使用して直接記述されます。静的属性は、クラス内に方程式 (=) を記述するか、インスタンス属性の前にキーを追加するだけで済みます。クラスの継承では、キーワード extends を使用します。 es5 とは全く異なります。

es5 の継承原理は、まずサブクラスのインスタンスオブジェクト this を新規作成し、次に親クラスのメソッドと属性をサブクラスの On this に追加します (parents.call(this))。

Es6 の継承原則: 最初に親クラスのインスタンスオブジェクト this を作成します。そのため、constructor() を使用して this を使用して親クラスのプロパティにアクセスしたい場合は、最初に super() メソッドを呼び出す必要があります。次に、サブクラス

10のconstructor()を通じてこれを変更します。クラス継承はネイティブコンストラクターを継承できるが、es5は継承できない

1. 一般的な書き方（es5と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();

ログイン後にコピー

ES6のクラスは単なる糖衣構文とみなすことができ、その機能のほとんどはES5で実現できます

注: クラスの本質は依然として関数であり、クラス自体はコンストラクターを指します。

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

ログイン後にコピー

es6で記述されたインスタンスオブジェクトを検出するためにObjectの一部のプロパティやメソッドを使用します

//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. 式の記述メソッド

//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. クラスのプライベートメソッド（ES6には記述メソッドがありません）とプライベートプロパティ（これもありません）書き込みメソッドを提供する) 、提案は #) で識別されます

いわゆるプライベートメソッドとプライベートプロパティは、クラス内でのみ使用でき、クラス外から呼び出すことはできないことを意味します

4.ES6 では、Class クラスが次のように規定されています静的プロパティは持たず、静的メソッドのみを持ちます: static

いわゆる Static、オブジェクトをインスタンス化する必要はなく、

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

ログイン後にコピー

5.new.target 属性を直接呼び出します

new はコンストラクターでインスタンスを生成するコマンドですES6 は new に .target 属性を提供し、

は新しいコマンドを通じてインスタンスオブジェクトを返します。クラス (コンストラクター) は通常クラス内で使用されます

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

ログイン後にコピー

6.this が指す

クラスのメソッドに this が含まれている場合、それはデフォルトではクラスのインスタンスを指します。ただし、このメソッドを単独で使用すると、次のようなエラーが報告される可能性があるため、this.print() メソッドは実行できないため、十分に注意する必要があります。見つけられた。

このポインティングの問題を解決するには、

(1)。es6 のアロー関数 () =>{}

(3) を使用します。 proxy

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

ログイン後にコピー

7.class の get() メソッドと set() メソッド

は、「class」内で get キーワードと set キーワードを使用して、特定の属性のストレージ関数と値関数を設定できます。そして属性のアクセス動作をインターセプトします。

rreee

8.相続

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中文网其它相关文章！