この記事は、JavaScript のプロトタイプとプロトタイプ チェーンを理解するのに役立ちます。

プロトタイプとプロトタイプチェーンはJavaScriptにおいて難しく重要なポイントです。プロトタイプとプロトタイプチェーンを理解するには、次の記事が役立ちます。

プロトタイプとプロトタイプ チェーンについての理解がまだ非常に浅くて曖昧な段階にある場合は、私のこの記事を読んでみてください。少しでもお役に立てましたら、いいね、コメント、転送をお願いいたします。ご質問や疑問がございましたら、コメント欄にメッセージを残していただければ、できるだけ早く返信させていただきます。私の記事に知識の誤りがあると思われる場合は、お知らせください。間違っていることは理解できます。物事を正しいものに変えることは、私たちの業界にとって有益ですが、それは致命的です。

これまで面接でプロトタイプについてよく質問していましたが、常に知識の浅い曖昧な段階に留まり、忘れてしまうことも多かったです（これは誰でも同じだと思います、笑）。正月休みに（やっとキーボードを触った）、ステーションBのビデオを見て関連知識を取得し、ようやく全体を理解しました。ここではそれらを整理してまとめてみました。

わあ、ここで誓います、来週どんなに忙しくても、この記事を見直す必要があります。
otherwise
otherwise
ナゲッツには常にバグがあります。

まずは対応関係を知る

prototype：プロトタイプ
__proto__：プロトタイプチェーン（リンクポイント）

• 所属関係

  • プロトタイプ: 関数の属性->複雑に考えないでください、実際には普通のことですオブジェクト{}
  • __proto__: オブジェクトの属性 -> あまり複雑に考えないでください。実際には普通のオブジェクトです。{}

• object __proto__ はオブジェクトのコンストラクターを保持します。prototype

• 関数は特別なオブジェクトであるため、 __proto__ は関数でも使用されています。これは存在しており、function

##人々が見落としたり忘れたりしがちなことの 1 つ:

Object はメソッド (コンストラクター)、new Object はインスタンス オブジェクトです。 ！ ！

console.log(Object) //typeof Object ==='function'
console.log(new Object) //typeof new Object ==='object'

constructor

constructor は、インスタンス化されたオブジェクト

//test.constructor -> 实例化test对象的构造函数 Test
console.log(test.constructor===Test) //true

//这里个人理解为永无止境的自身调用自身，求解，没找到相关文章。
console.log(test.constructor.prototype.constructor===Test) //true
console.log(test.constructor.prototype.constructor.prototype.constructor===Test) //true
//constructor允许更改
function Test2() {
    this.a=123
}
test.constructor=Test2
console.log(test)

Prototype

function Test(){}
let test=new Test() //new完之后 test是个实例对象了
console.log(test.__proto__===Test.prototype) //根据上面的对应关系表 可以知道结果为true
//Test.prototype也是一个对象，所以他必须也得有__proto__
//Test.prototype.__proto__已经到达终点了,终点是什么，终点就是Object构造函数，所以下面结果为ture
console.log(Test.prototype.__proto__.constructor===Object)
//且 按照上面对应关系中的规则和上条的结果，下条结果也是ture
console.log(Test.prototype.__proto__===Object.prototype) // 
//终点为null
console.log(Object.prototype.__proto__) //null

# のコンストラクターです。 ##プロトタイプ チェーンについて説明していただけますか。

オブジェクトの

__proto__

は、オブジェクトのコンストラクターの prototype を保持します。prototype もまた、オブジェクトなので、独自の __proto__ もあり、これはエンドポイント Object.__proto__ を行き来し、したがって __proto__ とのリンク ポイントを形成します。 key ) value は、コンストラクター メソッドの prototype オブジェクトのチェーン (プロトタイプ チェーン) です。 <pre class='brush:php;toolbar:false;'>//__proto__ test{ b:333, a:1, __proto__:Test.prototype={ c:222, b:2, __proto__:Object.prototype={ c:3, __proto__:null } } }</pre>

特別な関数オブジェクト

キー ポイント: JS では、関数は特別なオブジェクトです。 ！ ！

記事冒頭の対応表を覚えておいてください

//函数是特殊对象 所以__proto__是存在的，且是个function
console.log(Test.__proto__) //function
console.log(Test.prototype) //object

Test

関数なので、最下層も new Function# で実装する必要があります##, then

//对象的__proto__保存着对象的构造函数的prototype
console.log(Test.__proto__===Function.prototype) //true 这里是不是和关系表对应上了，能正常理解

const obj={}
const obj2=new Object()

console.log(Object) //function
console.log(typeof Object) //'function'

Function

これはコンストラクターなので、

__proto__ と prototype も必要です。はい、ただし、ここでの特別なポイントを覚えておく必要があります。 基礎となるルールは、Function.__proto__===Function.prototype

が等しく、両方とも関数を返すことを規定しています。私の理解では、

Function 自体が構築されています。

//正常来说函数的Test.prototype应该是个object，
//Function.prototype是个function,这也是一个特殊的点
typeof Test.prototype==='object' //true

console.log(Function.__proto__) // 一个function
console.log(Function.prototype) // 一个function
//Function既然是函数对象_，那么他的_proto__就指向他的构造函数的prototype，也就是
//Function.__proto__===Function.prototype，自己调自己，这样理解是不是也没毛病。
console.log(Function.__proto__===Function.prototype) //true

//Object既然是个构造方法，那么底层也是new Function
console.log(Object.__proto__===Function.prototype) //true

// 因为Function.__proto__===Function.prototype 所以下面代码是成立的
(Object.__proto__===Function.__proto__)===true

hasOwnProperty と in

hasOwnProperty

#hasOwnProperty

は、オブジェクトであるかどうかを判断するために使用されます。それ自体のプロパティ (非プロトタイプ チェーンから継承)

let test={
    a:1,
    b:2
}
Object.prototype.c=3
console.log(test.hasOwnProperty('a')) //true
console.log(test.hasOwnProperty('b')) //true
console.log(test.hasOwnProperty('c')) //false

in

##in は、オブジェクトに次のものが含まれているかどうかを確認するために使用されます。特定の属性 (プロトタイプ チェーンの属性を含む)

console.log('a' in test) //true
console.log('b' in test) //true
console.log('c' in test) //true
console.log('toString' in test) //true
console.log('d' in test) //false

[関連する推奨事項: JavaScript 学習チュートリアル

]

以上がこの記事は、JavaScript のプロトタイプとプロトタイプ チェーンを理解するのに役立ちます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。