ホームページ > 記事 > ウェブフロントエンド > 3 つの JavaScript シミュレーション実装のカプセル化方法とその記述方法の違いを共有する

3 つの JavaScript シミュレーション実装のカプセル化方法とその記述方法の違いを共有する

小云云オリジナル: 2018-01-20 13:43:281477ブラウズ

継承とは、サブクラスを使用して別の親クラスを継承することで、サブクラスは親クラスのすべてのプロパティとメソッドを自動的に持つことができます。このプロセスは継承と呼ばれます。 JS で継承を実装する方法はたくさんありますが、今日はそのうちの 3 つを紹介します。この記事を使用して、js シミュレーションを通じてカプセル化する 3 つの方法について学びましょう。必要な方はぜひ参考にしてください。

1. Object クラスに拡張メソッドを追加します

//声明一个父类
function Person(name){
 this.name=name;
 this.age=age;
 this.say=function(){
   alert("我叫"+this.name);
 }
}
//声明一个子类 
function Student(){
 this.no=no;
 this.study=function(){
  alert("我在学习！");
 }
}
// 通过循坏，将父类对象的所有属性和方法，全部赋给子类对象
Object.prototype.extend=function(parent){
 for(var i in parent){
   this[i].parent[i];
 }
}
var p=new Person("张三",12);
var s=new Student("1234567");
//子类对象调用这个扩展方法
s.extend()
console.log(s);

前述の継承の原則:

ループを通じて、親クラスオブジェクトのすべてのプロパティとメソッドを子クラスオブジェクトに割り当てます。ポイントは for-in ループです。Object を拡張しなくても、単純なループで実装できます。

しかし、このメソッドを使用して継承を実装する場合には、いくつかの欠点があります:

①1 回のインスタンス化を通じて完全なサブクラスオブジェクトを直接取得することはできません。最初に親クラスのオブジェクトとサブクラスのオブジェクトを取得してから、それらを手動でマージする必要があります

② Object を拡張する継承メソッドは、サブクラスのオブジェクトにも保持されます。

継承を実装する 2 番目の方法を見てみましょう~

2. プロトタイプ継承を使用します

この方法を紹介する前に、プロトタイプオブジェクトとプロトタイプという 2 つの概念について説明します

1。

①プロトタイプを持つのは関数のみであり、すべての関数にはプロトタイプが必要です

②プロトタイプ自体もオブジェクトです！

③プロトタイプは現在の関数の参照アドレスを指します!

2. __proto__: オブジェクトのプロトタイプ!

①オブジェクトのみが__proto__を持ち、すべてのオブジェクトが__proto__を持たなければなりません

②__proto__もオブジェクトなので、独自の__proto__も持ちます。この線に沿って検索する順序がプロトタイプチェーンです。

③ 関数と配列は両方ともオブジェクトであり、独自の __proto__ を持ちます

//声明父类
function Person(name,age){
   this.name=name;
   this.age=age;
   this.say=function(){
    alert("我叫"+this.name);
   }
}
//声明子类   
function Student(no){
   this.no=no;
   this.study=function(){
    alert("我在学习！我叫"+this.name+"今年"+this.age");
   }
}
//将父类对象赋给子类的prototype  
Student.prototype=new Person("张三",14);
//拿到子类对象时，就会将父类对象的所有属性和方法，添加到__proto__
var s=new Student(); 
s.study();

プロトタイプ継承の原則を使用します:

親クラスのオブジェクトを子クラスのプロトタイプに代入すると、親クラスのオブジェクトの属性とメソッドがサブクラスのプロトタイプに出現します。次に、サブクラスをインスタンス化するときに、サブクラスのプロトタイプがサブクラスオブジェクトの __proto__ に含まれます。最後に、親クラスオブジェクトの属性とメソッドがサブクラスオブジェクトの __proto__ に表示されます。

この種の継承の特徴:

①サブクラス自体のすべての属性はメンバー属性であり、親クラスから継承された属性はプロトタイプ属性です。

② ワンステップインスタンス化では完成したサブクラスオブジェクトをまだ取得できません。

継承を実装する 3 番目の方法:

call()、apply()、および binding() これら 3 つのメソッドは非常に似ており、パラメーターを渡す点のみが異なります。

function Person(name,age){
  this.name=name;
  this.age=age;
  this.say=function(){
    alert("我叫"+this.name);
    }
}
function Student(no,name,age){
  this.no=no;
  this.study=function(){
    alert("我在学习！");
  }
//将父类函数的this,指向为子类函数的this
Person.call(this,name,age);
}
var s=new Student(12,"张三",24);
console.log(s);

3 つの関数の唯一の違いは、func のパラメーターリストを受け取る方法です。それ以外には、機能に違いはありません。

3つの関数の記述方法(違い):

call記述メソッド: func.call(funcのthisが指すobj, funcパラメータ1, funcパラメータ2,...);

apply記述メソッド: func; .apply(this が指す func obj, [func パラメータ 1, func パラメータ 2,...]);

bind 記述方法: func.bind (func の this が指す obj) (func パラメータ 1, func パラメータ2,...) ;

3 つの JavaScript シミュレーション実装のカプセル化方法とその記述方法の違いを共有する

関連記事