ここに画像の説明を挿入

JS-プロトタイプとプロトタイプチェーン

1知識ポイント

1.1.1コンストラクターとコンストラクター-拡張

1）

function Foo(name, age) {
    
    
    this.name = name
    this.age = age
    this.class = 'class-1'
    // return this  //默认有这一行
}
var f = new Foo('zhangsan', 20)

2）

var a = {}実際、それはvar a = new Object( )糖衣構文です
var a = []実際、それはvar a = new Array( )糖衣構文です
function Foo(){...} 実は var Foo = new Function(...)
instanceofを使用して、関数が変数コンストラクター//変数instanceofArrayであるかどうかを判別します

1.1.2プロトタイプルールとインスタンスおよびプロトタイプ、コンストラクター、インスタンス、およびプロトタイプチェーンとの関係

1）
5つのプロトタイプルール:(プロトタイプルールはプロトタイプチェーンを学習するための基礎です）
①すべての参照タイプ（配列、オブジェクト、関数）はオブジェクト特性を持ち、プロパティを自由に拡張できます（「null」を除く）
。②すべて参照タイプには_proto_があります。プロパティ（暗黙のプロトタイプ）であり、プロパティ値は通常のオブジェクトです。③すべての
関数にはプロトタイプ（プロトタイプの表示）プロパティがあり、プロパティ値も通常のオブジェクトです
。④すべての参照タイプ（配列、オブジェクト、関数）、proto__属性valueは、そのコンストラクターの「prototype」属性値を指し
ます。⑤オブジェクトの特定の属性を取得しようとしたときに、オブジェクト自体にこの属性がない場合は、そのオブジェクトに移動します。__proto（つまり、そのプロトタイプ）を調べます。コンストラクタ）;

参照型（「オブジェクトプロパティ」、protoを使用）
関数（「オブジェクトプロパティ」、プロトタイプを使用）
参照型__proto__は、コンストラクターのプロトタイプを指します

2）
ここに画像の説明を挿入

1.1.3プロトタイプチェーン

オブジェクトfのプロパティを取得しようとしたときに、オブジェクト自体にこのプロパティがない場合は、オブジェクトの_proto_（つまり、コンストラクターのプロトタイプ）obj._proto_に移動して、
objがない場合に検索します。 _protoの場合、obj._proto.proto（つまり、objコンストラクターのプロトタイプのコンストラクターのプロトタイプ）を検索します。
ここに画像の説明を挿入

1.1.4原則のインスタンス

ここに画像の説明を挿入
参照型が属するコンストラクター/
テストオブジェクトの__proto__とコンストラクターのプロトタイプを決定するために使用されるメソッドは、同じプロトタイプを参照します/
テストコンストラクターのプロトタイプがオブジェクトのプロトタイプチェーンのどこかにあるかどうか。/
instanceofを使用して、オブジェクトのコンストラクターを確認します

1.1.5新しい原則とプロセス

1）

newの原理：
①新しいオブジェクトを作成し、
コンストラクタFooのプロトタイプオブジェクトFoo.prototypeを継承します; ②コンストラクタFooが実行され、実行中に対応するパラメータが渡され、これが新しいインスタンスとして指定されます;
③かどうかを判断します。インスタンスはObjectです。はいの場合はオブジェクトを返し、そうでない場合はコンストラクタを返します。

ここに画像の説明を挿入
2）

新しいプロセス：
①新しいオブジェクトを作成する
②これはこの新しいオブジェクトを指す
③コードを実行する、つまり
これに値を割り当てる④これを返す

function Foo(name, age) {
    
    
    this.name = name
    this.age = age
    this.class = 'class-1'
    // return this  // 默认有这一行
}
var f = new Foo('zhangsan', 20)
// var f1 = new Foo('lisi', 22) // 创建多个对象

2 Q＆A

トピック：
*変数が配列型であると正確に判断する方法;
*プロトタイプチェーン継承の例を書く;
*新しいオブジェクトのプロセスと原理を説明する;（答えについては上記の知識ポイントを参照）
*方法は何ですかオブジェクトを作成するには;（上記の知識ポイントを参照）
*プロトタイプチェーンとは;（回答
については上記の知識ポイントを参照）*原則のインスタンス;（回答については上記の知識ポイントを参照）
*方法は何ですか継承？長所と短所は何ですか？

2.1変数が配列型であるかどうかを正確に判断する方法

arr instanceof Array

2.2プロトタイプチェーン継承の例を書く

例1：

function Elem (id) {
    
    
    this.elem = document.getElementById (id)
}

Elem.prototype.html = function (val) {
    
    
    var elem = this.elem
    if (val) {
    
    
        elem.innerHTML = val;
        return this
    } else {
    
    
        return elem.innerHTML
    }
}

Elem.prototype.on = function (type, fn) {
    
    
    var elem = this.elem
    elem.addEventListener(type, fn)
}

var div1 = new Elem('detail-page')
// console.log(div1.html())
div1.html('<p>hello imooc</p>')
div1.on('click', function( ) {
    
    
    alert('clicked')
})

例2：

子のプロトタイプを
親のインスタンスとして設定します-スーパークラス（または親クラス）からその動作
を継承する最初のステップAnimal ：Animal Object.create（Animal.prototype）のインスタンスを作成します
2番目のステップ：サブタイプを与える（またはサブクラス）プロトタイプを設定し
ますDog.prototype =…継承されたコンストラクタープロパティをリセットします-Dog.prototype.constructor = Dog;

function Animal() {
    
     }
Animal.prototype = {
    
    
  constructor: Animal,
  eat: function() {
    
    
            console.log("nom nom nom");
  }
};

function Dog() {
    
     }
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog;

let beagle = new Dog();
beagle.eat();  // 应该输出 "nom nom nom"
beagle.constuctor;  //返回 function Dog( ) { }