原型和原型链

【前端八股文】原型和原型链_哔哩哔哩_bilibili

prototype原型对象

每个函数，都会天生自带一个prototype属性，这个属性是一个对象，称为原型对象。

作用：存放一些属性和方法、实现继承

const arr=newArray(1,2,3)
arr.reverse(); // 反转
arr.sort(); // 排序

思考：reverse和sort方法哪来的？ 在Array.prototype上面！

const arr = new Array(1,2,3)
arr.reverse(); // 反转
arr.sort(); // 排序

console.log(Array.prototype);

Array.prototype (Array) - JavaScript 中文开发手册 - 开发者手册 - 腾讯云开发者社区-腾讯云 (tencent.com)

// 会改变自身的方法
// 下面的这些方法会改变调用它们的对象自身的值：
Array.prototype.copyWithin()在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值。
Array.prototype.fill()将数组中指定区间的所有元素的值，都替换成某个固定的值。
Array.prototype.pop()删除数组的最后一个元素，并返回这个元素。
Array.prototype.push()在数组的末尾增加一个或多个元素，并返回数组的新长度。
Array.prototype.reverse()颠倒数组中元素的排列顺序，即原先的第一个变为最后一个，原先的最后一个变为第一个。
Array.prototype.shift()删除数组的第一个元素，并返回这个元素。
Array.prototype.sort()对数组元素进行排序，并返回当前数组。
Array.prototype.splice()在任意的位置给数组添加或删除任意个元素。
Array.prototype.unshift()在数组的开头增加一个或多个元素，并返回数组的新长度。

// 不会改变自身的方法
// 下面的这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。
Array.prototype.concat()返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。
Array.prototype.includes()判断当前数组是否包含某指定的值，如果是返回true，否则返回false。
Array.prototype.join()连接所有数组元素组成一个字符串。
Array.prototype.slice()抽取当前数组中的一段元素组合成一个新数组。
Array.prototype.toSource()返回一个表示当前数组字面量的字符串。遮蔽了原型链上的Object.prototype.toSource()方法。
Array.prototype.toString()返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的Object.prototype.toString()方法。
Array.prototype.toLocaleString()返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的Object.prototype.toLocaleString()方法。

// 遍历方法
// 在下面的众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。
Array.prototype.entries()返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。
Array.prototype.every()如果数组中的每个元素都满足测试函数，则返回true，否则返回false。
Array.prototype.some()如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。
Array.prototype.filter()将所有在过滤函数中返回true的数组元素放进一个新数组中并返回。
Array.prototype.find()找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回undefined。
Array.prototype.findIndex()找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 - 1。
Array.prototype.keys()返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。
Array.prototype.map()返回一个由回调函数的返回值组成的新数组。
Array.prototype.reduce()从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。
Array.prototype.reduceRight()从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。
Array.prototype.values()返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。
Array.prototype[@@iterator]()和上面的values() 方法是同一个函数。

也就是说Array.prototype上挂载了这么多的方法，所有的数组arr实例，都可以使用这些方法！

** proto **

每个对象(普通的对象、实例、prototype......)也天生自带一个属性proto，属性值是当前实例所属类的原型(prototype)。

const arr = new Array(1,2,3)
arr.reverse(); // 反转
arr.sort(); // 排序

console.log(Array.prototype);
console.log(arr.__proto__);
// [constructor: ƒ, at: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, …]
// [constructor: ƒ, at: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, …]

console.log(Array.prototype === arr.__proto__); // true

实例原型中有一个属性constructor, 它指向函数对象，即构造函数。

通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果没有则会去原型对象中寻找，直到找到Object对象的原型，Object对象的原型，如果在Object原型中依然没有找到，则返回undefined。

原型链的终点：object.prototype=null