原型链的基础结构和使用

一首先先简单解释一下三个单词的意思

1. prototype : 属于构造函数，指向原型对象
   作用：解决资源浪费+变量污染 
2.__proto__ : 属于实例对象，指向原型对象
   作用： 可以让实例对象访问原型中的成员
3.constructor: 属于原型对象，指向构造函数
   作用： 可以让实例对象 知道自己被哪一个构造函数创建的

二构造函数 原型对象 实例对象

三者之间存在三条线,通过两行代码来检测三者的关系是否成立

 //检查原型 : (1)先通过实例对象找构造函数
      console.log(a1.__proto__.constructor) //此时输出的应为a1的构造函数名
   //(2)构造函数和原型对象一一对应关系
      console.log(a1.__proto__ === Person.prototype)//true

三原型链的应用场景

 效果分析:当你点击按钮1或2时,会弹出文字提示框

                 当你点击按钮1或2时,会弹出图片提示框

<script>
        //title是弹窗标题  message是弹窗内容
        //创建一个文字的构造函数
        function Modal(title, message) {
            this.title = title
            this.message = message
            this.ModalBox = `
                <div class="modal">
                <div class="header">${this.title} <i>x</i></div>
                <div class="body">
                   ${this.message}
                </div>
                </div>
        `
        }
        // Modal.prototype是Model的原型对象
        // Modal.prototype.open是此原型对象内的一个方法
        Modal.prototype.open = function() {
            let div = document.createElement('div')
                // console.log(this)
            div.innerHTML = this.ModalBox
            document.body.appendChild(div)
            div.querySelector('i').onclick = function() {
                document.body.removeChild(div)
            }
        }
        document.querySelector('#btn1').onclick = function() {
            //实例对象
            let m1 = new Modal('友情提示', '登录成功')
            m1.open()
        }

        document.querySelector('#btn2').onclick = function() {
                let m2 = new Modal('友情提示', '订单详情已提交')
                m2.open()
            }
            //创建一个图片的构造函数
        function PicModal(title, src) {
            this.title = title
            this.src = src
            this.ModalBox = `
                <div class="modal">
                <div class="header">${this.title} <i>x</i></div>
                <div class="body">
                   <img src="${this.src}">
                </div>
                </div>
        `
        }
        //通过继承的属性 使图片的实例对象也可以使用文字的原型对象
        PicModal.prototype = new Modal()
        document.querySelector('#btn3').onclick = function() {
            let m3 = new Modal('友情提示', '这是一张图片')
            m3.open()
        }
        document.querySelector('#btn4').onclick = function() {
            let m4 = new Modal('友情提示', '这是另一张图片')
            m4.open()
        }
    </script>

对代码有不理解的小伙伴可以直接留言,我会一一解答的