カプセル化を実現するための JavaScript シミュレーションの 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: オブジェクトのプロトタイプ!

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

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

③関数と配列はオブジェクトであり、独自のプロトを持っています

//声明父类
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();

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

親クラスのオブジェクトを子クラスのプロトタイプに割り当て、次に親クラスのプロパティとメソッドを割り当てますobject サブクラスのプロトタイプに表示されます。次に、サブクラスをインスタンス化するときに、サブクラスのプロトタイプがサブクラス オブジェクトのプロトに含まれます。最後に、親クラス オブジェクトの属性とメソッドがサブクラス オブジェクトのプロトに表示されます。

この種の継承の特徴:

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

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

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

call()、apply()、bind()、これら 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, funcパラメータ1, funcパラメータ2,...のthisが指すobj); apply 書き込みメソッド: func .apply(func の this が指す obj, [func パラメータ 1, func パラメータ 2,...]);

bind 書き込みメソッド: func.bind (func の this が指す obj) ( func パラメータ 1、func パラメータ 2、...);

概要

以上がカプセル化を実現するための JavaScript シミュレーションの 3 つの方法とその違いの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。