JS Advanced:プロトタイプと__proto__、コンストラクターとプロトタイプチェーン、何が起こっているのですか?話をさせてください〜

あなた自身の言葉で興味深い知識を教えてください


みなさん、こんにちは梅巴哥er多くの人がプロトタイプチェーン、特にプロトタイプと__proto__についての感情の雲を持っているのを見てきました。これらは双子のようで、抽象的で、愚かで、不明瞭です。この記事では、ストーリーテリングの形でプロトタイプチェーンの知識について説明しますが、必ずしも包括的である必要はありません。


最初に例を書いてください:

log = console.log

function Star(name) {
    
    
    this.name = name 
}
Star.prototype.age = 18
var dili = new Star('dilireba')
log(Star.prototype)
log(dili.__proto__)
log(Star.prototype.constructor)
始める前に、まずプロトタイプがどのように作成されているかを理解しましょう。

次に、RuanYifeng先生の説明を見てみましょう:Javascript継承メカニズムの設計アイデア
簡単に言えば、

  • プロトタイプはオブジェクトであり、関数内に存在します
  • このオブジェクトは共有領域を作成できます
  • このオブジェクトは、コンストラクターのすべてのインスタンスを呼び出すことができるように、共有共有領域にプロパティとメソッドを追加できます。
  • たとえばStar.prototype.age = 18、この時点でのStarコンストラクターのインスタンスはすべて18歳です。
__proto__はどうしたの?
  • protoは、インスタンスにクエリチェーンを提供することです
  • プロトタイプを指すためにのみ使用され、使用することはできません
  • すべてのオブジェクトには__proto__があります
  • たとえば、dili.__proto__それはのポイントStar.prototypeです
コンストラクターとは何ですか?
  • プロトタイプと__proto__にはコンストラクターがあります
  • 役割は、コンストラクターのプロトタイプがコンストラクターを指すようにすることです。
  • 例えば、Star.protorype.constructorポイントへStar(){ }
理論的な知識を読んだ後、どのようにそれらを理解しますか?

物語は始まります:

XiaoMingとXiaoHuaは一緒に鍋を食べるためにレストランに行きました。辛くない鍋底を注文しました。

log = console.log

function Eat(name) {
    
    
    this.name = name 
    this.type = '不辣'
}
var ming = new Eat('小明')
var hua = new Eat('小华')
log(ming.type) // 不辣
log(hua.type) // 不辣

シャオミンは味が辛くないと感じたので、自分のボウルにスパイシーソースを入れて浸しました。

log = console.log

function Eat(name) {
    
    
    this.name = name 
    this.type = '不辣'
}
var ming = new Eat('小明')
var hua = new Eat('小华')
ming.type = '辣酱'
log(ming.type) // 辣酱
log(hua.type) // 不辣

それで、シャオミンはホットソースを食べ、シャオフアは辛くないホットソースを食べました。今、小華もホットソースを食べたいのですが、小明の丼でホットソースを食べるのが恥ずかしいのですが、どうしたらいいですか?

// 给小华也添加一份辣酱
hua.type = '辣酱'

このように、暁華もスパイシーなソースを持っていました。しかし、問題があります。このように、2人のシェアが1つにならず、多くのリソースを占有することになります。より良い方法はありますか?

そうです、鍋の底に直接ホットソースを加えるだけです!

// 现在我们来改下代码
log = console.log

function Eat(name) {
    
    
    this.name = name 
}
Eat.prototype.type = '辣酱' // 往锅里加辣酱
var ming = new Eat('小明')
var hua = new Eat('小华')
log(ming.type) // 辣酱
log(hua.type) // 辣酱

ほら、こうすれば二人ともスパイシーソースの鍋が食べられます!


上記の話を読んだ後、それはより明確ですか?次に、問題は、これらのオブジェクト間の関係は何ですか?

それからそれを撫でましょう。

当初は、お客様に鍋を提供できるお店がありました。
ここに画像の説明を挿入します
今、シャオミンとシャオフアは鍋を食べに来ます。
ここに画像の説明を挿入します
二人はホットソースを共有したかったので、鍋の底をスパイシーにするためにホットソースを鍋に加えました。
ここに画像の説明を挿入します
今はもっとはっきりしていますか?

では、コンストラクターはそれらと何の関係があるのでしょうか?

来て、物語を読み続けてください。

飽き飽きして、チェックアウトの時間です!

ウェイターがやって来て見てみました、ああ、このテーブルで食べるのはスパイシーソースの鍋ですか?

シャオミンが言ったように、私たちは透明なスープ鍋を注文しましたが、それにホットソースを追加しました。そこでシャオミンは注文メニューを取り出してウェイターに見せました。
ここに画像の説明を挿入します

共同コンストラクターの役割は、元のコンストラクターに戻ることです。XiaoMingはそれをウェイターに見せることができます。

さて、これを見ると、基本的にこれらのオブジェクト間の関係を理解することができます。では、プロトタイプチェーンはどうですか?

話を続けましょう。

XiaoMingとXiaoHuaは鍋料理店を去りました、そして彼らは今日彼らが食べたスパイシーソース鍋についてまだ話し合っています。あのホットソースはとても美味しいのですが、どこから来たのですか?

暁華さんは、老干媽さんの家で作ったホットソースに違いないと言っていました。あの店ではいろいろな種類のホットソースが出ています。今日食べたホットソースは最高です!

それで、二人はホットソースのラインに沿って老干媽の場所を見つけました。

ここに画像の説明を挿入します
シャオミンはこの時再び尋ねました、老干媽はどの会社ですか?

Xiaohuaは、老干媽が本社であり、そこには何もないと言いました!ホットソースが専門!

ここに画像の説明を挿入します
だから、この写真を手に入れました!

これがプロトタイプチェーンです!

何?終了しましたか?私はまだその話を十分に聞いていません。Xiaohua、待って!


参考記事:


上記。

おすすめ

転載: blog.csdn.net/tuzi007a/article/details/114298065