JavaScript プロトタイプとプロトタイプチェーンの知識ポイントの詳細な説明-jsチュートリアル-php.cn

この記事は、javascript に関する関連知識を提供します。主に、プロトタイプの概念、関数プロトタイプのコンストラクター属性、プロトタイプチェーンの理解など、プロトタイプとプロトタイプチェーンに関連する問題を整理しています。、以下で見てみましょう。皆さんの参考になれば幸いです。

JavaScript プロトタイプとプロトタイプチェーンの知識ポイントの詳細な説明

[関連する推奨事項: JavaScript ビデオチュートリアル、Web フロントエンド]

1. プロトタイプ

1. 概念

JavaScript では、関数はプロパティとメソッドを含む Function 型のオブジェクトです。プロトタイプ (Prototype) は、Function 型オブジェクトの属性です。

prototype 属性は関数の定義時に含まれ、その初期値は空のオブジェクトです。 JavaScript の関数にはプロトタイプの型が定義されていないため、プロトタイプは任意の型にすることができます。

プロトタイプは、オブジェクトの共有プロパティとメソッドを保存するために使用されます。プロトタイプのプロパティとメソッドは、関数自体のプロパティとメソッドには影響しません。

// Function类型的属性->所有函数都具有的属性
console.log(Function.prototype);//[Function]

// 定义函数
function fn() {
    console.log('this is function');
}

//原型的默认值是空对象
console.log(fn.prototype);//fn {}

// 函数包含构造函数 ——> 所有引用类型其实都是构造函数
console.log(Number.prototype); //[Number: 0]

console.log(Object.prototype);//{}

ログイン後にコピー

2. プロトタイプの取得

共有プロパティとメソッドを設定する次の 2 つの方法でオブジェクトのプロトタイプを取得できます:

prototype 属性を通じて

getPrototype(obj) メソッドを通じて。 #

function fn() {
    console.log('this is function');
}

//使用访问对象的属性语法结构
console.log(fn.prototype);//fn {}
console.log(fn['prototype']);//fn {}

//Object类型提供getPrototypeOf（）方法
console.log(Object.getPrototypeOf(fn));//[Function]

ログイン後にコピー

#3. 関数プロトタイプのコンストラクター属性を理解する

Object.getOwnPropertyDescriptors()

メソッドは次のとおりです。オブジェクト自身のすべてのプロパティの記述子を取得するために使用されます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var result = Object.getOwnPropertyDescriptor(Object.prototype,'constructor'); console.log(result) //输出结果如下： //{ // value: [Function: Object], // writable: true, // enumerable: false, // configurable: true // }</pre><div class="contentsignin">ログイン後にコピー</div></div>

コンストラクターは関数の作成時に自動的に追加され、コンストラクター自体を指します
4. プロパティとメソッドを設定します。プロトタイプ

プロトタイプのプロパティとメソッドは、次の 2 つの方法で設定できます。

##プロトタイプのプロパティとメソッドは個別に定義されます。

构造函数.prototype.属性名 = 属性值 ;构造函数.prototype.方法名 = function(){} ;

ログイン後にコピー

プロトタイプに新しいオブジェクトを直接定義します。

プロトタイプに多くの属性を追加する必要がある場合、何度も記述するのは面倒なので、

Constructor.prototype.Attribute name

を直接変更できます。
prototype<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">构造函数.prototype = { 属性名：属性值, 方法名：function(){}}</pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function foo () {}foo.prototype = { constructor: foo, name: 'jam', age: 18, address: '北京市'}var fn = new foo()console.log(fn.address) // 北京市</pre><div class="contentsignin">ログイン後にコピー</div></div>5.isPrototypeOf() メソッド

すべてのオブジェクトには、To を使用する

isPrototypeOf()

メソッドがあります。オブジェクトが別のオブジェクトのプロトタイプであるかどうかを判断します。

示例代码如下：
// 通过初始化器方式定义对象
var obj = {
    name:'jam'
}
// 定义构造函数
function Hero() {}
// 将对象obj赋值给构造函数Hero的原型
Hero.prototype = obj;
// 通过构造函数创建对象
var hero = new Hero();

// isPrototypeOf()方法判断指定对象是否是另一个对象的原型
var result = obj.isPrototypeOf(hero);
console.log(result);//true

ログイン後にコピー

obj

オブジェクトが
hero オブジェクトのプロトタイプであることを確認しました 2. プロトタイプチェーン

1. プロトタイプチェーンの理解

次に、コードを使用してプロトタイプチェーンの理解を深めます:

场景：查找obj对象身上的address属性
js执行的步骤：
    1. 会触发get操作
    2. 在当前的对象中查找属性
    3. 如果没有找到，这个时候会去原型链(__proto__)对象上查找
       1. 查找到结束
       2. 没查找到一直顺着原型链查找，直到查找到顶层原型（顶层原型是什么暂时卖个关子）

ログイン後にコピー

1.1 サンプルコードは次のとおりです。

var obj = {
    name: 'jam',
    age: 19
}
/* 
    要求：查找obj对象身上的address属性
*/

// 原型链一层一层向上查找，如果一直没有找到，直到查找到顶层原型结束
obj.__proto__ = {}
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
    address: '北京市'
}

console.log(obj.address) // 北京市
console.log(obj.__proto__.__proto__.__proto__)  // { address: '北京市' }

ログイン後にコピー

1.2 メモリグラフ

JavaScript プロトタイプとプロトタイプチェーンの知識ポイントの詳細な説明最終的にアドレス属性を見つける

ここで問題が発生します。それは見つからない、それは無限に続くでしょう、それを探していますか？次に、

#2 を見てみましょう。トップレベルのプロトタイプとは何ですか?

上で述べたように、プロトタイプチェーンに沿って無限に検索するわけではなく、最上位のプロトタイプが見つかった場合、まだ見つかっていない場合は

unknown

が返されます。

それでは、トップレベルのプロトタイプとは何でしょうか?

サンプルコードは次のとおりです:

var obj = { name: 'jam' }console.log(obj.__proto__)  // {}console.log(obj.__proto__.__proto__)  // null

ログイン後にコピー

リテラルオブジェクト obj のプロトタイプは:

{}

です。
{} は最上位プロトタイプです __proto__ の出力を続けると、null 値が返されます。これは、上位層がすでに最上位プロトタイプであることを証明します
次の図は、コードの最初の部分に欠けている最上位のプロトタイプを補足したものです。 -レベルのプロトタイプは Object.prototype

3.Object のプロトタイプ (Object.prototype) JavaScript プロトタイプとプロトタイプチェーンの知識ポイントの詳細な説明

3.1 では、プロトタイプチェーンの終点はどこでしょうか?たとえば、3 番目のオブジェクトにも、prototype
__proto__ 属性がありますか?
var obj = {name:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__)  // {}
ログイン後にコピー

上記の出力結果は

空のオブジェクトであることがわかりました。{}

実際、このプロトタイプはトップレベルプロトタイプ<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var obj = { name: 'jam', age: 19 } console.log(obj.__proto__) // {} console.log(Object.prototype) // {} console.log(obj.__proto__ === Object.prototype) // true</pre><div class="contentsignin">ログイン後にコピー</div></div> Object はすべてのクラスの親クラスです

したがって、obj.__proto__ は実際には Object.prototype,

console.log(obj.__proto__ === Object.prototype) // true 結果の Object.prototype がトップレベルのプロトタイプであることがわかります。

#Object から直接作成されたオブジェクトのプロトタイプは次のとおりです。
{}

3.2 次に、次のように尋ねます:
{}
プロトタイプの何が特別ですか?
- 特殊点1：该对象有原型属性，但是它的原型属性已经指向的是null，也就是已经是顶层原型了；
```
console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null
```
  ログイン後にコピー
- 特殊点2：该对象上有甚很多默认的属性和方法；
  - 虽然打印Object.prototype的结果为空对象{}，但它不是空的，只是里面的属性不可枚举而已,例如我们就打印constructor属性看看
```
console.log(Object.prototype.constructor)  // [Function: Object]  
```
    ログイン後にコピー
  - 我们也可以通过Object.getOwnPropertyDescriptors()方法获取Object.prototype中的所有自身属性的描述符。
```
console.log(Object.getOwnPropertyDescriptors(Object.prototype)) // 如下长截图所示
```
    ログイン後にコピー
4.原型链关系内存图

【相关推荐：javascript视频教程、web前端】