Array和Array.prototype的區別以及方法和屬性的不同

前言

　　在學習JavaScript的過程中，我們會學到很多的方法和屬性，如數組的 join方法，slice方法等等很多，但是是否有認真的思考和理解過一個問題，我們平常說的什么數組的方法，字符串的方法，數值的方法，在我們平常使用這些方法的時候，都是通過如 Array、String、Number 這些構造函數創建出它們對應的實例對象，然后再通過對象來使用這些方法。為什么不能直接以 Array.join() 的方式來使用呢？為什么數組對象的方法對 Array 這個構造函數本身不適用呢？我們平常用的數組的方法，真的是數組這個構造函數本身的方法嗎？

　　所以，我想就此來總結一下JS內置的構造函數如 Array、Object 等和它們的原型（Array.prototype）的區別以及它們的方法和屬性的不同。

 

Array 和 Array.prototype 的區別

　　Array 是 JS 內置的構造函數（內置對象），通俗地講，它是創建數組的構造函數，它的本質是函數，所以它不是一個數組

　　Array.prototype 是 Array的一個屬性，叫做原型，這個原型的值是一個對象，對象里面保存着數組對象的方法和屬性。

 

JS內置的對象（構造函數）

　　String、Number、Boolean、Array、Object、Function 等等都是 JS 內置的構造函數。在 JS 中，由於一切皆接對象，所以它們也可以稱為內置對象。

　　由於構造函數的特點，它們可以通過 new 關鍵字來創建對應的實例對象。所以創建出來的實例對象都有構造函數原型的屬性和方法。

 

　　為什么不能 Array.join(），因為Array 不是一個數組對象，它是一個全局對象，一個構造函數，它本身並沒有 join（）方法，而 join、slice、sort 等等相關的方法都是保存在 Array.prototype 這個屬性值中的

　　下面，我們來看看實例

　　Object.getOwnPropertyNames(obj) 方法 返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數組
　　var res = Object.getOwnPropertyNames(Array)

　　console.log(res)　　//　["length", "name", "prototype", "isArray", "from", "of"]

　　var res1 = Object.getOwnPropertyNames(Array.prototype)

　　console.log(res1)　　//　 ["length", "constructor", "concat", "copyWithin", "fill", "find", "findIndex", "lastIndexOf", "pop", "push", "reverse", "shift", "unshift", "slice", "sort", "splice", "includes", "indexOf", "join", "keys", "entries", "values", "forEach", "filter", "flat", "flatMap", "map", "every", "some", "reduce", "reduceRight", "toLocaleString", "toString"]

 

　　根據上面的實例，我們可以看出

　　　　數組實例對象的所有方法都來自於 Array.prototype，而 Array 對象只有屬性 length、name、prototype 和 方法 isArray、from、of。這些屬性和方法才是 Array 對象（這個構造函數）自身的方法。

 

總結：

　　正確區分JS內置對象（構造函數）和它們對應的實例對象。

　　正確區分 String、Number、Boolean、Array、Object、Function 這些構造函數本身的屬性和方法與它們對應的原型（prototype）的屬性和方法！