シリーズ記事ディレクトリ
| コンテンツ | リンク |
|---|---|
| 2023 年のフロントエンドインタビューメモ | HTML5 |
| 2023 年のフロントエンドインタビューメモ | CSS3 |
記事ディレクトリ
序文
面向对象编程プロトタイプとプロトタイプ チェーンを理解することは、JavaScript の実装をより深く理解するのに役立ちます属性和方法的共享和继承。同時に、プロトタイプとプロトタイプ チェーンの知識を習得することは、JavaScript を深く学ぶための鍵でもあります。
1. プロトタイプとは何ですか?
JavaScript では、每个对象（除了 null 和 undefined）都有一个原型对象（prototype）。プロトタイプ オブジェクトは、共有プロパティとメソッドを含む通常のオブジェクトです。
現在、クラス A があり、クラス A に基づいて拡張可能なクラス B を作成したいと考えています。B のプロトタイプを A と呼びます。
class Student {
constructor(name, score) {
this.name = name;
this.score = score;
}
introduce() {
console.log(`我是${
this.name}，我考了${
this.score}分`);
}
}
const student = new Student("张三", 99);
Student クラスとそのインスタンス化されたオブジェクト Student が存在します。当你在student身上使用了它不存在的属性或方法，就会去隐式原型对象__proto__上找
__proto__=> (Student インスタンス化されたオブジェクトのプロトタイプを指します => Student クラス)
Student のインスタンス化されたオブジェクトには導入メソッドはありませんが、暗黙のプロトタイプ オブジェクト __proto__ にこのメソッドがあるため、使用できます。__proto__ がこのメソッドを持つ理由は、このメソッドが Student クラス オブジェクトのプロトタイプを指しているためです。プロトタイプ オブジェクトには、
オブジェクトの暗黙的プロトタイプ オブジェクトと全等于Student クラスの明示的プロトタイプ オブジェクトをインスタンス化するための導入メソッド Student があります。
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.saying = function () {
console.log("你好呀，我是person显示原型对象上的saying函数");
};
person.prototype.work = "前端开发工程师";
const p1 = new person("前端百草阁", 21);
ここでは、saying メソッドは p1 のプロトタイプにハングされていますが、person コンストラクターにハングすることもできますが、問題が発生します。コンストラクターが呼び出されるたびに、新しいオブジェクトに対して新しいメソッドが作成されます。これがメモリ使用量の増加につながる可能性がある場合は、より一般的となり、有多个对象实例，它们将各自拥有自己的方法。場合によっては推奨されます。方法定义在构造函数的原型上
function person(name, age) {
this.name = name;
this.age = age;
this.saying = function () {
console.log("");
};
}
const p1 = new person("前端百草阁", 21);
2. プロトタイプチェーンとは何ですか?
2.1 プロトタイプチェーンのあらゆる側面の分析
上図に示すように、インスタンス自身がアクセスできないプロパティやメソッドについては、独自のプロトタイプ ( proto ) を探します。
独自のプロトタイプが見つからない場合は、先頭が見つかるまでプロトタイプを探します。 （物体）
function person(name, age) {
this.name = name;
this.age = age;
}
person.prototype.saying = function () {
console.log("你好呀，我是person显示原型对象上的saying函数");
};
person.prototype.work = "前端开发工程师";
const p1 = new person("前端百草阁", 21);
class Person {
constructor(name) {
this.name = name;
}
drink() {
console.log("每个人都会喝水");
}
}
const person = new Person("普通人");
class Teacher extends Person {
constructor(name, subject) {
super(name);
this.subject = subject;
}
teach() {
console.log("每个老师都会教书");
}
}
const teacher = new Teacher("哈基米老师", "猫猫课");
ここでのプロトタイプチェーンでは、教師がインスタンス化したオブジェクトに対してドリンクメソッドを使用すると、オブジェクト自体にはドリンクメソッドがありませんが、プロトタイプチェーンを通じて見つけることができ、このメソッドを持っている人は誰でもそれを取得して使用できます。
hasownproperty メソッドはプロトタイプ チェーンの最上位にある Object のメソッドであり、誰もがアクセスできるため、誰でも使用できます。
如果指定的属性是对象的直接属性——即使值为 null 或者 undefined，hasOwnProperty() 方法也会返回 true。如果属性是继承的，或者根本没有声明该属性，则该方法返回 false。与 in 运算符不同的是，该方法不会在对象原型链中检查指定的属性。
ここに添付されているのは、私が自分で描いたプロトタイプのチェーン継承図です。図を見るとより明確になります。
Teacher.prototype.__proto__ === Person.prototype // true
2.2 なぜコンストラクターもプロトタイプを持っているのでしょうか?
p1 のプロトタイプはコンストラクターです。私と同じように混乱している友人がいるかどうかはわかりません。オブジェクトが独自のプロトタイプを持つのは普通のことです。なぜコンストラクターにも独自のプロトタイプがあるのでしょうか?
- 関数 - JavaScript で最も重要な概念
関数は であり第一类对象（first-class object）、 と呼ばれます一等公民。関数とオブジェクトは共存しており、関数を他のクラスのオブジェクトと考えることもできます。ということがわかります对象有的功能，函数也会拥有。
函数也是对象，唯一不同的地方在于，函数是可以调用的（invokable），也就是说函数会被调用以便执行某些动作。
要約する
要約すると、属性はプロトタイプ オブジェクトを构造函数指しprototype、プロトタイプ オブジェクトには が含まれ共享的属性和方法、对象实例属性原型链(__proto__ 属性はプロトタイプ オブジェクトを指す) は継承されます原型对象的属性和方法。constructorプロパティを通じて、オブジェクト インスタンスまで遡ることができます构造函数。これらの概念が合わさって JavaScript が構成されます原型继承机制。