一首先先简单解释一下三个单词的意思
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>
对代码有不理解的小伙伴可以直接留言,我会一一解答的