面接のJS編-プロトタイプとプロトタイプの鎖

本論文のテーマ

オブジェクトを作成するにはいくつかの方法があります.

プロトタイプ、構造関数、インスタンス、プロトタイプチェーンの関係

instance of原理

実例問題(考察)

オブジェクトを作成するいくつかの方法

//      
const obj1 = { name: 'guodada' }
const obj11 = new Object({ name: 'guodada' })

//       
function Pershon() {
  this.name = 'guodada'
}
const obj2 = new Pershon()

// Object.create
const obj3 = Object.create({ name: 'guodada' })

プロトタイプ、構造関数、インスタンス、プロトタイプチェーンの関係
ここではプロトタイプ、コンストラクション、実例、プロトタイプチェーンの関係を重点的に話します.これも面接の常問であり、紛らわしい点です.
構造関数とnewは何をしましたか?
関数がnewキーワードで呼び出された時は構造関数です.newキーワードの内部実装機構(例):

function Person(name) {
  this.name = name
}

const person = new Person('guodada')

は新しいオブジェクトを作成し、彼はPerson.prototypeを継承します.

コンストラクションPersonが実行され、対応するパラメータが入力され、コンテキスト(this)がこの新しい例に指定される.

は、コンストラクタ内のコードを実行します.

は、新しいオブジェクト

に戻る.

var obj = {} //        
obj.__proto__ = constructor.prototype //   __proto__   ，         prototype   。
constructor.call(this) //   this
return obj

(見てから戻ってきてnewオペレータが何をしたか見てください.)
プロトタイプ
各関数にはプロトタイプの属性があります.この属性は関数のプロトタイプオブジェクトを指します.

Person.prototype // {constructor: Pershon(),__proto__: Object}

__proto__実例と実例の原型はどう表しますか?
各JavaScriptオブジェクト(nullを除いて)が持つ属性は、__proto__と呼ばれ、この属性はオブジェクトのプロトタイプを指します.

person.__proto__ === Person.prototype // true

トラック
例のオブジェクトと構造関数がプロトタイプに向けられるなら、プロトタイプは構造関数またはインスタンスに向けられていますか?

Person.prototype.constructor === Person

コンストラクタ、インスタンスプロトタイプ、実例との関係をまとめます.

Person.prototype //     ['prototype']       
person.__proto__ === Person.prototype //   ['__proto__']       
Person.prototype.constructor === Person //     ['constructor']       

原型チェーン
各例は、プロトタイプオブジェクトを指す__proto__ポインタを含み、この関係に依存して、段階的に進行すると、インスタンスとプロトタイプのチェーンが形成される.

function Person() {}

Person.prototype.name = 'Kevin'

var person = new Person()

person.name = 'Daisy'
console.log(person.name) // Daisy

delete person.name
console.log(person.name) // Kevin

この例では、person属性を例のオブジェクトnameに追加し、person.nameを印刷すると自然にDaisyになる.
しかし、personのname属性を削除した場合、person.nameを読み、personオブジェクトからname属性が見つからないとpersonのプロトタイプ、つまりperson.__proto__から調べられます.幸いにもPerson.prototypeの属性を見つけました.結果はnameです.
プロトタイプの終点はKevinです.nullにはnull属性がないからです.
リレーションマップは、次のように更新されてもよい.
ちなみに、図中の相互関連のプロトタイプからなるチェーン構造はプロトタイプチェーン、つまり青いラインです.
instance ofの原理
jsの基本的なタイプはproto、String、Undefined、Boolean、Number、Nullです.

typeof 1 === 'number'
typeof function() {} === 'function'
typeof null === 'object' //   ！

//       
typeof {} === 'object'
typeof [] === 'object'

引用タイプの判断は、インスタンスが他のオブジェクトの参照であるかどうかを判断するためにSymbolによって行われる.

person instanceof Person // true

原理としては、実例['proto'==構造関数['prototype]]が、typeofがプロトタイプチェーンを通して探し続けていることに注目したい.

person instanceof Object // true

person.__proto__ === Person.prototype // true
person.__proto__.constructor === Person // true

経典の実例は次の通りです.

function A() {
  B = function() {
    console.log(10)
  }
  return this
}

A.B = function() {
  console.log(20)
}

A.prototype.B = function() {
  console.log(30)
}

var B = function() {
  console.log(40)
}

function B() {
  console.log(50)
}

A.B()
B()
A().B()
B()
new A.B()
new A().B()
//           

上記の問題の答えはどれぐらいですか?試してみてもいいです.見てください(psという問題は実行文脈の概念にも関連しています.関数宣言と関数表現を考察しました.)
答えは前に書いた文章の中で一つの面接問題を通して原型/プロトタイプチェーン-関数宣言/関数式を勉強しました.
考え終わって答えを出す

instanceof=>Aプロトタイプオブジェクトにinstanceof answer 20

が見つかりました.

A.B()=>同じ名前の関数表現と関数宣言が同時に存在する場合、常に式answer 40

を実行します.

A.B = function() { console.log(20) }

B()実行関数A=>1.変数B再割当関数2.thisを返す

A().B()が大域的に実行したB関数は既に再割当されているので、出力10

が出力される.

A()=>上のコードはA関数を実行しました.このとき、大域的にB関数出力10

が出力されます.

.B()=>newはB()

を実行しました.

new A.B()

A.B = function () {console.log(20)};は、構造関数A=>new A().B()

を実行します.

newはAのプロトタイプオブジェクトの中でBを検索する.objA.__proto__ = A.prototypeインジケータ関数のプロトタイプオブジェクト

.B()出力30

A.B() // 20
B() // 40
A().B() // 10
B() // 10
new A.B() // 20
new A().B() // 30

間違ったところがあれば、指摘してください.
JavaScriptを参考にして深く入るのは原型から原型の鎖までです.