JavaScriptプロトタイプ プロトタイプの詳しい解説（基礎講座）

プロトタイプは JavaScript の中でも特に重要な概念であり、しっかりと理解していなければ基本的に js を使いこなしたり学習したりすることはできません。また、この概念は少し難しく、初心者にとっては難しいかもしれません。私の友達には少し難しいので、コード例を通してプロトタイプの使い方を簡単に紹介しましょう

JavaScript のプロトタイプの簡単な紹介:
プロトタイプ プロトタイプは JavaScript の特に重要な概念であり、マスターする必要があります。 js をよく理解していない、基本的に js をさらに使用したり学習したりすることは不可能であり、この概念は少し難しく、初心者にとっては少し難しいかもしれません。プロトタイプの使い方をコードを通して簡単に紹介しましょう。例。

1. 基本概念:

すべての関数にはプロトタイプ属性があります。
この属性はオブジェクトを指すことができるポインターであり、このオブジェクトはコンストラクターによって作成されたオブジェクト インスタンスによって共有されます。つまり、このオブジェクトは継承されます。
概要: プロトタイプが指すオブジェクトは、コンストラクターによって作成されたオブジェクト インスタンスによって共有されます。
作成されたオブジェクト インスタンスには内部プロパティ [[Prototype]] があり、これはコンストラクター プロトタイプ (プロトタイプ) が指すオブジェクトへのポインターです。
まずコードを見てください:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
antzone.prototype.getName=function(){
 return this.webname;
}
var oantzone=new antzone("PHP中文网",10);
console.log(oantzone.getName());
</script>

II コード例:
例 1:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
var oantzone=new antzone("PHP中文网",10);
antzone.prototype=obj;
console.log(oantzone.address);

上記のコードを見て、多くの友人は出力値が「徐州、江蘇省」ですが、実際の出力内容は未定義です。これは、コンストラクターを使用してオブジェクト oantzone を作成するときに、oantzone オブジェクトの内部属性 [[Prototype]] が、 antzone() コンストラクター、その後 antzone.prototype=obj が繰り返されます。 コンストラクターのプロトタイプを設定します。oantzone の組み込みプロパティ [[Prototype]] は、依然として元のオブジェクトを指します。当然、oantzone.address は未定義です。
例 2:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype=obj;
var oantzone=new antzone("PHP中文网",10);
console.log(oantzone.webname+oantzone.address);
</script>

このコードと前のコードの違いは、8 行目と 9 行目が入れ替わっているだけなので、「江蘇省徐州市」を出力できることです。これは難しくありません。オブジェクト インスタンスはプロトタイプをリセットした後に作成されるためです。
例 3:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype.add=obj;
var oantzone=new antzone("PHP中文网",10);
console.log(oantzone.add.address);

上記のコードは、オブジェクトのプロトタイプを変更するだけであり、リセットしません。

上記は私があなたのためにまとめたものです。

関連記事:

JSでJSONデータを取得するための簡単な呼び出しについて(コードは添付されていますが、単純かつ粗雑です)

JSでのEL式の使用方法の詳細な紹介

Entry-レベルのビデオ。js使用上の注意 (コードが添付されています)

以上がJavaScriptプロトタイプ プロトタイプの詳しい解説（基礎講座）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。