JavaScript构造函数实例属性与原型属性优先级问题咨询

首先明确JS原型链属性查找的核心规则：访问某个对象的属性时，会优先匹配该对象本身的自有属性，只有当自有属性不存在时，才会逐级向上查找该对象原型链上的同名属性。

第一种写法的运行逻辑 #

你最初的代码如下：

function Member(){
  this.x="hello";
};
var test = new Member();
Member.prototype.x = "test";
console.log(test.x);
//hello

运行逻辑：

• 执行new Member()创建实例test时，构造函数内部的this指向新生成的test实例，this.x = "hello"会直接给test添加自有属性x，值为hello
• 后续Member.prototype.x = "test"是给构造函数的原型对象添加x属性，并不会修改test实例的自有属性
• 打印test.x时，优先匹配到test的自有属性x，值为hello，不会再向上查找原型链的属性，所以输出hello

第二种写法的运行逻辑 #

改写后的代码如下：

function Member(){
  Member.x="hello";
};
var test = new Member();
Member.prototype.x = "test";
console.log(test.x);
//test

运行逻辑：

• 构造函数内的Member.x = "hello"是给Member这个构造函数本身添加静态属性x，和Member的实例、Member的原型对象都没有关联，不会给实例test添加任何自有属性
• 执行new Member()生成的test实例本身没有x属性
• 后续给Member.prototype.x赋值为test后，打印test.x时，test自身没有对应属性，就会向上查找原型链，匹配到Member.prototype上的x属性，值为test，所以输出符合预期

核心差异总结 #

• 第一种写法的this.x是绑定到实例的自有属性，会直接屏蔽原型链上的同名属性
• 第二种写法的Member.x是绑定到构造函数的静态属性，和实例无关，实例访问同名属性时会正常触发原型链查找

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