当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层Object为止。Object是JS中所有对象数据类型的基类(最顶层的类)在Object.prototype上没有__proto__这个属性。 这里我们省略object ,如下图：
代码实现如下：
//简易弹框 父类
class zero {
constructor(tagName) {
this.tagName = tagName
this.nodeName = "father"
this.tag = document.getElementsByTagName(this.tagName);
}
Alert() { //弹框
this.tag[0].addEventListener("click", function() {
alert(`${this.nodeName}`);
}, false);
}
}
//新建一个插件 设置字体颜色
zero.prototype.setStyle = function(color) {
this.tag[0].style.color = color;
}
//新版弹框 重写父类Alert
class one extends zero {
nodeName = 'son'
constructor(tagName) {
super(tagName);
}
Alert(text) { //带自定义文案
this.tag[0].addEventListener("click", function() {
alert(`${this.nodeName} ${text}`);
}, false);
}
}
let newZero = new zero('div');
let newOne = new one('article');
let newTwo = new one('section');
newZero.Alert();
newOne.__proto__.__proto__.tagName = 'article';
newOne.__proto__.__proto__.tag = document.getElementsByTagName("article");
newOne.__proto__.Alert("article的文字"); //调用 one 的 alert
newOne.__proto__.__proto__.Alert(); //调用父类 father 的 alert
newTwo.nodeName = "section";
newTwo.__proto__.tag = document.getElementsByTagName("section");
newTwo.__proto__.Alert("弹出文字"); //调用父类 son 的alert
实际应用：
1，扩展插件时：可以使用 prototype 增加
2，访问父类方法：可以使用__proto__ ; 当然默认情况下JS执行过程就是如此，本身没有的就按照原型链往上查找；如果子类业务逻辑与父类不一致，可以重新该方法，重写后父类方法不受影响，即使是子类实例也可以通过__proto__调用父类原方法。