js の継承は、従来の Java の継承とは異なり、プロトタイプ チェーンに基づいた継承です。 JavaScript の継承は、オブジェクトベースの継承とタイプベースの継承の 2 つのカテゴリに分類できます。js の継承について詳しく見てみましょう。
jsオブジェクトに基づく継承
オブジェクトベースの継承は、プロトタイプ継承とも呼ばれます。 JavaScript リテラルを通じて作成されたオブジェクトは Object.prototype に接続されることがわかっているため、Object.prototype を使用して継承を実装します。基本的に、クラスは放棄され、コンストラクターは呼び出されません。代わりに、Object.create() を使用して、新しいオブジェクトに古いオブジェクトのプロパティを直接継承させます。例:
var person = {
name: "Jack",
getName: function () { return this.name; }
}
var p1 = Object.create(person);
console.log(p1.getName()); //Jack コードは非常に単純で、person には 1 つの属性と 1 つのメソッドがあります。オブジェクト p1 は Object.create() を通じて継承されます。最初のパラメーターのプロトタイプは person のプロトタイプを指すため、オブジェクト p1 は person の属性とメソッドを継承します。
Object.create() は、新しいオブジェクトに追加する 2 番目のパラメーターであるデータ属性を指定することもできます。データ属性は、書き込み可能、列挙可能、構成可能な 4 つの記述子の値に設定できます。最後の 3 つの意味は、名前を見れば推測できます。指定しない場合、デフォルトは false です。この記事とはほとんど関係がないので、値の設定については説明しません。
var p2 = Object.create(person, {
name: {
value: "Zhang"
}
});
console.log(p2.getName()); //ZhangObject.create() を使用すると、新しいオブジェクトを追加してオーバーロードできます。そのプロパティとメソッド:
var person = {
name: "Jack",
getName: function () { return this.name; },
getAge: function() { return this.age; } //注意并没有age这个成员变量，依赖子类实现
}
var p3 = Object.create(person);
p3.name = 'Rose';
p3.age = 17;
p3.location = '上海';
p3.getLocation = function() { return this.location; }
console.log(p3.getName()); //Rose
console.log(p3.getAge()); //17
console.log(p3.getLocation()); //上海person には age プロパティがないため、person.getAge(); を呼び出すと unknown が返されます。ただし、オブジェクト p3 には age 属性が新たに定義されているため、基底クラスの getAge メソッドは正しく呼び出すことができます。また、サブクラスはnameの値をオーバーロードし、location属性とgetLocationメソッドを新たに定義します。結果は上に示されているため、再度の説明は省略します。
js クラスに基づく継承
型ベースの継承は、オブジェクトに依存するのではなく、コンストラクターを介してプロトタイプに依存する継承です。例:
function Person(name) {
this.name = name;
this.getName = function () { return this.name; };
}
function Student(name, age) {
Person.call(this, name);
this.age = age;
this.getAge = function () { return this.age; };
}
Student.prototype = new Person(); //需要通过new来访问基类的构造函数
var p = new Person('Cathy');
var s = new Student('Bill', 23);
console.log(p.getName()); //Cathy
console.log(s.getName()); //Bill
console.log(s.getAge()); //23Student は person から継承します。 name は基本クラス person で定義されていますが、new で person のコンストラクターを呼び出した後、これはサブクラス Student オブジェクトにバインドされるため、name は最終的にサブクラス Student オブジェクトで定義されます。結果は上に示されているため、再度の説明は省略します。
プライバシーの保護
getName や getAge などのメソッドが定義されている理由は、ユーザーが名前や年齢などの属性に直接アクセスできないようにするためです。残念ながら、上記 2 つの継承はどちらもプライバシーを保護できず、p.name や page.age などのプロパティに直接アクセスできます。これらの属性のプライバシーが非常に重要であると考え、OO 言語でプライベート属性の効果をシミュレートしたい場合は、関数のモジュール化を使用できます。
いわゆる関数のモジュール化とは、基本的に、関数内で新しいオブジェクトを作成し、新しいオブジェクトのメソッドでパラメーター オブジェクトのプロパティを使用して、新しいオブジェクトを返すことを意味します。現時点では、新しいオブジェクトはパラメータ オブジェクトの属性を持たないため、プライバシーを保護するという目的が達成されます。コードは次のとおりです:
var person = function(spec) {
var that = {}; //新对象
that.getName = function () { return spec.name; }; //使用参数的属性
that.getAge = function() { return spec.age; }; //使用参数的属性
return that; //返回新对象
}
var p4 = person({name: 'Jane', age: 20});
console.log(p4.name); //undefined
console.log(p4.age); //undefined
console.log(p4.getName()); //Jane
console.log(p4.getAge()); //20関数 person は新しいオブジェクトを返しますが、その中には name 属性と age 属性がないため、直接アクセスすると未定義になります。名前と年齢は、それによって公開される 2 つのインターフェイスを通じてのみ取得できます。
さらに多層継承を実装すると、以下のような効果があるので、詳細は割愛します:
var student = function(spec) {
var that = person(spec); //新对象继承自person
that.getRole = function() { return 'student'; }; //新对象增加方法
that.getInfo = function() {
return spec.name + ' ' + spec.age + ' ' + that.getRole();
};
return that; //返回新对象
};
var p5 = student({name:'Andy', age:12});
console.log(p5.name); //undefined
console.log(p5.getName()); //Andy
console.log(p5.getRole()); //student
console.log(p5.getInfo()); //Andy 12 studentおすすめ関連記事:
JS継承 -- プロトタイプチェーン継承とクラス継承_基礎知識
以上がjsの継承メソッドにはどのようなものがあるのでしょうか？ js継承の2つの方法の紹介（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
