JavaScript系列 -- Array详解

155 阅读2分钟

一直不理解ArrayArray.prototype的区别,学习了JavaScript系列 -- 原型、原型链、new、构造函数、继承,对这两块有了比较好的理解:

  • Array可以看成是一个构造函数,用于创造实例
var arr = new Array()
console.log(arr) // []

其中包含了 arr.__proto__ = Array.prototype 的过程

  • Array.prototype称为Array的原型,用于给实例属性/方法
arr.concat([1,2,3])
console.log(arr.length) // 3
console.log(arr) // [1,2,3]

为什么arr可以生来就有length属性和concat()方法,我们先在控制台打印一下 Array.prototype:

image.png

此时我们发现诶,这里面就有length属性(没截到)和concat()方法,于是乎我们可以大胆猜想就是这里来的。然后JavaScript中万物皆对象,也就是说我们刚刚创建的arr也是一个对象(arr和concat()之间用.连接这一点可以证明),对象的属性不仅包括自身属性还有一个叫__proto__的属性(也是一个对象)。要是在自身属性找不到的话会去__proto__对象里面找,再结合arr.__proto__ = Array.prototype,综上,arr可以使用concat()方法就是这个原理(继承机制)。同时也表明了Array.prototype的作用所在

所以,官方要是新增了Array方法,就是在Array.prototype里面添加就行。那模仿这种思想,我们也可以自己添加一些新的方法,举个例子:

Array.prototype.duplicator = function() {
 let s = this.concat(this) 
   return s
 }
 let t = [1,2,3,4,5].duplicator()
 console.log(t) // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

这里看到,我们新增了一个duplicator()方法,作用是拷贝自身然后接在后面。很明显的看到,这个新的方法是Array.prototype的一个属性,所以我们才能用

那官方给的Array的方法有哪些呢?有一篇文章 全面介绍JavaScript数组方法 可做参考

这里面包括Array这个实例本身就有的属性/方法,以及Array.prototype提供给所有实例的方法(可以通俗地称其为库函数)

image.png

我们可以借助Object.getOwnPropertyNames()方法来看看ArrayArray.prototype都有哪些属性和方法:

image.png

参考文章

Array和 Array.prototype 的定义