面试题：JavaScript 操作符与原型链关系探究

Question

自定义一个构造函数 `MyConstructor`，并在其原型上定义属性和方法。然后通过 `new` 操作符创建实例对象 `myInstance`。阐述 `myInstance` 在访问属性和方法时，JavaScript 操作符（如点操作符 `.`）与原型链之间的具体交互原理，包括查找过程、如何确定属性是实例自身的还是原型上的，以及如果存在同名属性在不同层次（实例、原型、原型的原型等）时的优先级顺序等。请用代码示例辅助说明。

Answer 1

代码实现

function MyConstructor() {
    // 实例属性
    this.instanceProperty = 'This is an instance property';
}

// 原型属性
MyConstructor.prototype.prototypeProperty = 'This is a prototype property';

// 原型方法
MyConstructor.prototype.prototypeMethod = function() {
    return 'This is a prototype method';
};

// 创建实例对象
const myInstance = new MyConstructor();

交互原理

1. 查找过程：当使用点操作符（.) 访问 myInstance 的属性或方法时，JavaScript 首先在实例对象自身上查找。如果找不到，就会沿着原型链向上查找，直到找到匹配的属性或方法，或者到达原型链的顶端（null）。
2. 确定属性来源：如果在实例对象自身找到了属性，那么该属性就是实例自身的。如果在实例对象自身没有找到，而是在原型上找到的，那么该属性就是原型上的。
3. 优先级顺序：实例自身的属性优先级高于原型上的属性。如果存在同名属性，实例属性会覆盖原型属性。

示例说明

// 访问实例属性
console.log(myInstance.instanceProperty); 
// 输出: This is an instance property

// 访问原型属性
console.log(myInstance.prototypeProperty); 
// 输出: This is a prototype property

// 访问原型方法
console.log(myInstance.prototypeMethod()); 
// 输出: This is a prototype method

// 在实例上添加同名属性覆盖原型属性
myInstance.prototypeProperty = 'Override prototype property';
console.log(myInstance.prototypeProperty); 
// 输出: Override prototype property

// 验证原型上的属性未改变
console.log(MyConstructor.prototype.prototypeProperty); 
// 输出: This is a prototype property

通过上述代码和说明，可以清晰看到 myInstance 在访问属性和方法时，JavaScript 操作符与原型链之间的交互原理。