JavaScript：プロトタイプチェーンの継承とオブジェクトの偽装の継承およびES6構文の解決
- ES5文法にはクラスの概念はなく、継承は特別な方法でのみ実現できます。
- ネイティブのjs継承を学習する過程で、2つの継承モードの特徴に遭遇しました。これにより、次のレビューのためにそれを記録します。
1.プロトタイプチェーンの継承
-
プロトタイプチェーン継承は継承できコンストラクタとのプロパティとメソッドプロトタイプチェーンが、サブクラスのインスタンスを作成する際には、親クラスにパラメータを渡すことができません。
function Father(name,age){ this.name = name; this.age = age; this.info = function(){ console.log(this.name + ',' + this.age); } } // 静态方法 Father.prototype.work = function(){ console.log('work'); } function Son(){ // 属性和方法 } Son.prototype = new Father(); // 实例化子类 let son = new Son('张三',18); son.info(); // undefined,undefined son.work(); // work
2.オブジェクトの偽装と継承
-
継承を装ったオブジェクトはコンストラクターのメソッドを継承できますが、プロトタイプチェーンのメソッドを継承することはできません。
function Father(name,age){ this.name = name; this.age = age; this.info = function(){ console.log(this.name + ',' + this.age); } } Father.prototype.work = function(){ console.log('work'); } function Son(name,age){ // 对象冒充继承 Father.call(this,name,age) } // 实例化子类 let son = new Son('张三',18); son.info(); // 张三,18 son.work(); // Uncaught TypeError: son.work is not a function
3.ES6文法のクラス
-
ES6文法で、クラスクラスの概念を追加します。クラスの導入により、jsオブジェクト指向開発が容易になります。
// 定义父类 class Father{ // 构造函数 constructor(name,age){ this._name = name; this._age = age; } getName(){ console.log(this._name); } setName(name){ this._name = name; } // 静态方法 static work(){ console.log('work'); } } // 静态方法和属性 Father.sleep = function(){ console.log('sleep'); } let f = new Father('马云',50); f.getName(); // 马云 f.setName('马化腾'); f.getName(); // 马化腾 -
ES6の継承メソッドもJava-extendsに似ています。この継承メソッドは、上記の2つの継承メソッドの利点を考慮に入れることができます。つまり、静的メソッドとコンストラクターのプロパティとメソッドを継承できます。サブクラスがインスタンス化されるときにも指定されます。親はパラメーターを渡します。
// 定义父类 class Father{ // 构造函数 constructor(name,age){ this._name = name; this._age = age; } getName(){ console.log(this._name); } setName(name){ this._name = name; } // 静态方法 static work(){ console.log('work'); } } // 静态方法和属性 Father.sleep = function(){ console.log('sleep'); } // 子类继承父类 class Son extends Father{ constructor(name,age,sex){ super(name,age); this._sex = sex; } getSex(){ console.log(this._sex); } } // 实例化 let s = new Son('allen',19,'male'); s.getName(); // allen s.getSex(); // male Son.work(); // work Son.sleep(); // sleep
4.ES6のシングルトン
-
実際のアプリケーションシナリオでは、データベース操作など、特定の操作を複数のインスタンス化で実行するだけでよい場合があります。
-
シングルトン以外の場合にインスタンス化するとどうなるか見てみましょう。
class Db{ constructor(){ this.connect(); } connect(){ console.log('连接数据库'); } find(){ console.log('查询数据库'); } } let db1 = new Db(); let db2 = new Db(); // 执行结果 连接数据库 连接数据库 -
上記の例は、シングルトン以外の場合に複数回インスタンス化すると、データベースに複数回接続する方法を実行することを明確に示しています。これにより、多くの時間とスペースのリソースが発生します。
-
シングルトンの実装は非常に単純で、静的メソッドを作成するだけです。
class Db{ static getInstance(){ if(!Db.instance){ Db.instance = new Db(); } return Db.instance; } constructor(){ this.connect(); } connect(){ console.log('连接数据库'); } find(){ console.log('查询数据库'); } } let db1 = Db.getInstance(); let db2 = Db.getInstance(); let db3 = Db.getInstance(); db3.find(); db2.find(); // 执行结果 连接数据库 查询数据库 查询数据库 -
すべてのインスタンスは、シングルトンと呼ばれるインスタンスを共有します。特定のシナリオで不要なリソースの浪費を節約できるシングルトンモードをうまく活用することを強くお勧めします。