原型链应用场景浅见

 

 当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层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__调用父类原方法。