プロトタイプ、__ proto__、コンストラクター、およびそれらのチェーンを写真で扱います

JavaScriptコードがあります:
  1. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  2. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  3. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  4. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  5. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  6. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  7. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  8. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  9. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  10. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  11. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
  12. var A = function ( ) { } ; A. prototype . b = 100 ; var a = new A ( ) ; A. prototype . c = 101 ; a. c = - 100 ; A. prototype = { } ; A. prototype . b = 536 ; /* 1 */ console. log ( a.__proto__. constructor . prototype . b === 536 ) ; var b = new A ( ) ; /* 2 */ console. log ( a.__proto__.__proto__. constructor === a.__proto__. constructor . prototype . constructor ) ; /* 3 */ console. log ( b instanceof A ) ; /* 4 */ console. log ( ! ( a instanceof Object ) ) ;
質問 式1〜4は何を返し、その理由は何ですか

答えるのが難しい?
次に、カットの下に行く必要があります;-)(次の600 Kbの大きな画像)


そのため、このトピックに興味のある多くの人がjavascriptのマニュアルやスマートブックを一度も読んだことがあると思いますが、頭の中では、言語の疑似OO(つまりプロトタイプベース)部分の基本を無視することはできません。 この記事では、乾燥した事実やマニュアルは見つかりません。レビューを読んだ後、すべてがシンプルで明確になります。

どんな回路?
図の右側は現在実行されているコードで、左側はオブジェクトの状態です。 黒い矢印-オブジェクトへのリンク。 矢印上のキャプション-参照によるプロパティの名前。 灰色の矢印-暗黙のプロパティ-プロトタイプのプロパティへのリンク。 グローバルjavascriptオブジェクトは赤でマークされています。 青い変数。 緑のローカルオブジェクト。 console.logsはすべてtrueを返します。

すべての画像はクリック可能です。

リーフスルーすることはできませんが、ソース(png + bmml)をダウンロードします: http ://narod.ru/disk/400270001/javascript_prototype.zip.html

スライド1





スライド2





スライド3





スライド4





スライド5





ソース(png + bmml): http ://narod.ru/disk/400270001/javascript_prototype.zip.html
ソースコード: pastebin.com/wBchEpxq

私の記事がお役に立てば幸いです。また、図は明確です:)

PS __proto__プロパティはJavaScript 1.8.1から非推奨になりましたが、代わりにObject.getPrototypeOf(オブジェクト)を使用する価値がありますが、Crashが書いたように、CrockfordはgetPrototypeOfを使用しないように求めます。

Source: https://habr.com/ru/post/J108915/


All Articles