3分でJSの原型を理解します

一.りろんきそ
1.一般オブジェクトと関数オブジェクト
JavaScriptでは、万物が対象です!ただし,オブジェクトにも違いがあり,一般オブジェクトと関数オブジェクトに分けられる.

function F(){}; //F：    
var f = new Function(); //f:     
var o = new Object(); //o:     

Object,Functionはjsが持つ関数オブジェクトである.
2.コンストラクタ
ほとんどのオブジェクト向け言語とは異なり、JavaScriptにはクラス(class)の概念は導入されていないが、JavaScriptは依然としてオブジェクトを大量に使用しており、オブジェクト間のつながりを保証するためにJavaScriptにはプロトタイプとプロトタイプチェーンの概念が導入されている.Javaとは異なり、JavaScriptのnewオペレータの後ろにはクラス名ではなく関数名が付いており、JavaScriptはクラスではなく直接コンストラクション関数によってインスタンスを作成します.

function Dog(name, color) {
    this.name = name
    this.color = color
    this.bark = () => {
        console.log('wangwang~')
    }
}

const dog1 = new Dog('dog1', 'black')
const dog2 = new Dog('dog2', 'white')

上記のコードでは、独自のプロパティを持つ2つのインスタンスが作成されていますが、barkメソッドは同じですが、コンストラクション関数でインスタンスを作成する場合は、各インスタンスがこのメソッドを作成する必要があります.なぜこのメソッドを別の場所に配置し、すべてのインスタンスにアクセスできるようにしないのですか?
3.コンストラクション関数と一般関数
コンストラクション関数と一般的な関数には、主に次の違いがあります.

呼び出し方式:(1)コンストラクション関数はnew演算子呼び出しを使用する必要があり、パラメータがない場合はカッコを省略することができ、例えばnew Object(2)一般関数の呼び出しはnew演算子を必要とせず、カッコ

が必要である.

thisが(1)コンストラクション関数を指すthisは、作成されたオブジェクトインスタンス上の(2)通常の関数を指すthisは、関数の呼び出し者

を指す.

ネーミング方式(1)コンストラクション関数名の頭文字を大文字(2)通常関数の頭文字を小文字にし、アルパカネーミング方式

を使用する
ここではプロトタイプを使う必要があります.
二.プロトタイプ

各コンストラクション関数にはprototypeプロパティがあり、プロトタイプオブジェクトを指します.このコンストラクション関数を使用してインスタンスを作成する場合、prototypeプロパティが指すプロトタイプオブジェクトは、インスタンスのプロトタイプオブジェクトです.

プロトタイプオブジェクトは、デフォルトでconstructorプロパティを持ち、そのコンストラクション関数を指します.

各オブジェクトには、同じプロトタイプオブジェクトを指すobj._proto_の非表示属性function.prototypeがあります.

プロトタイプオブジェクトは、インスタンスに共通する属性を格納するために使用されます.

オブジェクト属性にアクセスすると、オブジェクト自体の属性内で検索され、見つからない場合はオブジェクトのプロトタイプオブジェクトにジャンプして検索されます.

上記のコードを

 function Dog(name, color) {
    this.name = name
    this.color = color
}

Dog.prototype.bark = () => {
    console.log('wangwang~')
}

次に、インスタンスを作成し、barkメソッドにアクセスできます.

 const dog1 = new Dog('dog1', 'black')
dog1.bark()  //'wangwang~'

このときbarkメソッドを書き換えることもできます.

const dog2 = new Dog('dog2', 'white')
dog2.bark = () => {
    console.log('miaomiaomiao???')
}
dog1.bark()  //'wangwang~'
dog2.bark()  //'miaomiaomiao???'

以上より,書き換えbarkメソッドは,プロトタイプ内のメソッドを直接修正するのではなく,プロトタイプ内のbarkメソッドを上書きする新しいメソッドを自分に追加することであることが分かった.プロトタイプのメソッドを変更するには、次の手順に従います.

Dog.prototype.bark = () => {
    console.log('haha~')
}
dog1.bark()  //'haha~'
dog2.bark()  //'haha~'

三.締めくくり
漏れがあれば、後でまとめ続けます.
リファレンスhttps://www.jianshu.com/p/dee9f8b14771 https://juejin.im/post/5a94c0de5188257a8929d837 https://www.cnblogs.com/shayueblog/p/5813230.html http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html