JavaScript对象方法数量限制、优先级及代码失效原因问询

<p>hi</p> 
<p>hello</p> 
<p>hi</p> 
<script> 
var arr = document.getElementsByTagName("p"); 
for (var x = 0; x < arr.length; x++) { 
  arr[x].innerHTML = "Hi there"; 
} 
</script> 
<p>hi</p> 
<p>hello</p> 
<p>hi</p> 
<script> 
var arr = document.getElementsByTagName("p").length; 
for (var x = 0; x < arr; x++) { 
  arr[x].innerHTML = "Hi there"; 
} 
</script>

问题1：第二段脚本为何无法正常运行？ #

这问题核心是变量赋值出了错：
第二段脚本里，var arr = document.getElementsByTagName("p").length; 直接把arr赋值成了数字类型（也就是当前页面中<p>元素的总数量）。
接下来的循环里，你尝试用arr[x]去访问“数组元素”，但数字本身没有索引属性，arr[x]会返回undefined，之后再去读取undefined的innerHTML属性，浏览器就会抛出类型错误，直接中断脚本执行，自然没法正常运行。

要修复的话，得和第一段脚本保持一致：先把document.getElementsByTagName("p")返回的HTMLCollection对象赋值给arr，再用arr.length来控制循环的次数，而不是直接把长度值存到arr里。

问题2：单个JavaScript对象可添加的方法是否存在数量限制？若不存在，该如何对方法进行优先级排序？ #

方法数量限制 #

单个JavaScript对象能添加的方法没有官方硬性数量限制——毕竟对象本质就是键值对的集合，方法只是值为函数的键而已。只要运行环境的内存足够支撑，你可以给对象加任意多的方法（当然实际开发里没人这么干，不然代码维护起来要疯）。

方法优先级排序 #

这里的“优先级”其实就是JS引擎查找方法的规则，核心遵循这几点：

• 自身方法 > 原型链方法：如果对象自己定义了某个方法，同时它的原型（比如Object.prototype或者自定义的构造函数原型）上也有同名方法，调用时肯定优先用对象自身的方法。
• 后添加的同名方法覆盖先添加的：如果给同一个对象先后加了两个同名方法，后面的会直接覆盖前面的，调用时只会执行最后添加的那个版本。
• 原型链层级越近，优先级越高：如果原型链上有多层同名方法，JS引擎会从对象自身开始往上找，找到第一个匹配的方法就停下，所以离对象层级越近的原型方法，优先级越高。

举个直观的例子：

// 自定义构造函数
function MyObj() {}
// 给原型加方法
MyObj.prototype.sayHi = function() { console.log('原型上的sayHi') };
// 创建实例
const obj = new MyObj();
// 给实例自身加同名方法
obj.sayHi = function() { console.log('实例自身的sayHi') };
obj.sayHi(); // 输出 "实例自身的sayHi"，自身方法优先级更高

// 重新给实例加同名方法
obj.sayHi = function() { console.log('更新后的sayHi') };
obj.sayHi(); // 输出 "更新后的sayHi"，后添加的覆盖了之前的

内容的提问来源于stack exchange，提问作者IZZLIEDAT