WEB前端学习分享-JavaScript中对象属性的搜索

本文从来自牛客网的一道测试题为出发点，分享一下对JavaScript中对象属性的搜索过程的理解

测试题：以下代码执行后，a.x 和 b.x 的结果分别是？

function A(x){
    this.x = x;
}
A.prototype.x = 1;
 
function B(x){
    this.x = x;
}
 
B.prototype = new A();
var a = new A(2), b = new B(3);
delete b.x;

这道题主要涉及的知识点就是原型对象及对象属性的搜索，在分析题目之前先简单看一下相关知识点，详见《JavaScript高级程序设计》

知识点1：原型对象

每创建一个函数，解析器都会按照特定的规则为这个函数创建一个prototype 属性，这个属性实质上是一个指针，指向原型对象，原型对象会默认获得一个constructor 属性，指回与之关联的构造函数。原型对象中除了constructor 这个自带属性外，还可以自定义添加其他的属性和方法。

每次调用这个构造函数创建的新实例内部都会有一个隐含的属性[[prototype]]指向构造函数的原型对象，该构造函数的所有实例都共享原型对象中的属性和方法。

虽然在脚本语言中没有标准的方式访问[[prototype]]，但是在Firefox，Safari和Chrome中在每个对象上都支持一个属性__proto__来访问对象的原型[[prototype]]

知识点2：对象属性的访问搜索过程

在通过对象访问属性时，会按照这个属性的名称开始搜索，它会遵循以下的查找顺序

• 搜索开始于实例对象本身，如果在这个实例上发现了给定的名称，则返回该名称对应的值，不再继续搜索
• 如果没有找到这个属性，则搜索会沿着指针进入原型对象，如果在原型对象中找到了这个属性，再返回对应的值，不再继续搜索。
• 如果还没有找到，就去原型对象的原型中去找.....正常的原型链都会终止于Object的原型对象，Object的原型对象的原型是null。如果在Object对象的原型中都没有找到，就到头了，直接返回undefined.

题目分析

针对以上题目，我自己画了个草图供参考，如有错误欢迎指正！

function A(x){
    this.x = x;
}
A.prototype.x = 1; //在构造函数A的原型对象上添加变量x，并赋值为1
 
function B(x){
    this.x = x;
}
//创建构造函数A的一个实例对象，并让构造函数B的prototype属性指向这个new A()
B.prototype = new A(); 
//变量a指向new A(2),变量b指向new B(3)
var a = new A(2), b = new B(3);
delete b.x; //删除b指向的实例对象new B(3)中的属性x

查找a.x的过程：

a变量指向new A(2)对象，开始在此对象中查找属性x，找到x，直接返回值2，搜索停止。

查找b.x的过程：

b变量指向new B(3)对象，在该对象中确实曾经存在过属性x（值为3），但是在delete b.x;执行完之后存在于实例对象上的属性x就被delete操作符完全删除掉了，此时在实例中查找属性x并不存在，会继续沿指针进入构造函数B指向的原型对象new A()中，此对象中的x因为没有传入实参，赋值为undefined，因此在b.x最后在原型对象中找到了变量x，并将值undefined返回，搜索停止。

运行一下代码检验一下结果

console.log(a.x); // 2
console.log(b.x); // undefined

拓展一下

console.log(a.__proto__.x); //1
console.log(b.__proto__.__proto__.x); //1

解答此题的关键还是理解构造函数，原型对象，实例对象这3个完全不同的对象

• 构造函数通过prototype属性链接到原型对象
• 实例通过[[prototype]]链接到原型对象

以上是本人的理解，如有问题，欢迎指正~