// 本小节主要引出一个小问题，通过这个问题去引出另一个知识点。
function Person(a,n){// 由于每个对象的属性数据不同，所以不写死，动态传递this.age = athis.name = n// 由于每个对象方法代码一般都是相同的，所以直接写死this.say = function(){// 无论当前构造函数，new出多少个对象，同一个方法内的代码是相同的，}
}let oa = new Person(20,'zhangsan')
let ob = new Person(22,'lisi')console.log(oa);
console.log(ob);console.log(oa.say === ob.say); // false
3、原型对象
3.1、简介
原型对象
在JS中只要有一个函数存在，JS就会创建一个与之对应的对象。这个对象就是原型对象。
这个对象只有一个属性 constructor
原型对象的访问
原型对象不可以直接访问，只能通过函数或实例对象间接访问。
函数.prototype
实例对象.proto
示例代码
function Fn(){}
console.log(Fn.prototype);let obj = new Fn();
console.log(obj.__proto__);
// 默认：函数的原型对象是系统创建的，这个原型对象是可以被修改。
function Person(){}Person.prototype.a = 20;let oa = new Person();
console.log(oa.a);let abc = {}// ------------ 修改prototype的指向(让prototype属性指向另一个对象)
Person.prototype = abc// 修改之后，实例化另一个对象
let ob = new Person();console.log(ob.a);
console.log(oa.a);
4.2、原型继承
👉 在JS中继承的方法有很多，这里我们只了解一种常用的 原型继承
原型继承
原型继承也称之为替换原型继承。
主要思想是 使用父的实例对象来替换子的原型对象。
代码实现：
// 继承：
// 一个对象使用另一个对象上的成员// 使用父的实例(实例对象)，来替换子的原型function A(){ // 父this.x = 100;this.y = 200;}let oA = new A() // 这是父的一个实例对象function B(){ // 子} // 使用父的实例(实例对象)，来替换子的原型
B.prototype = oAlet oB = new B()
console.log(oB.x);
console.log(oB.y);/*
小结：JS中继承实现有很多种，使用父的实例，来修改子的原型。*/
function Person(){}// Person.prototype.n = 10;
Person.prototype.__proto__.n = 20;let oa = new Person();
console.log(oa.n);
5.3、instanceof 运算符
语法：
对象 instanceof 函数
说明：
作用于判断构造函数与实例对象的关系，
依据是构造函数对应的原型对象是否在以实例为起点的原型链上。
示例代码
function Human(){}function Person(){}let oa = new Person();
console.log(oa instanceof Person); // true
console.log(oa instanceof Human); // false
console.log(oa instanceof Object); // true
6、面向对象-模态弹窗
6.1、封装构造函数
面向对象思想分析
采用面向对象思想，先找对象，我们将弹窗当成一个对象。
构造函数体现面向对象代码体现，通过构造函数可以得到对象。
对象设计
弹窗标题 与 弹窗内容，可以看作是弹窗相关的数据，使用属性保存
弹窗需要一个html标签来显示页面效果，这个标签也看作弹窗的属性
弹窗要显示，所以弹窗需要具有显示的方法。
实现
function Modal(t, c) {this.title = tthis.content = cthis.el = document.createElement('div')this.el.className = 'modal'this.el.innerHTML = `
${this.title} x
${this.content}
`this.show = function () {document.body.appendChild(this.el)}
}// 测试：删除按钮事件
document.querySelector('#delete').addEventListener('click', function(){let oM = new Modal('温馨提示','您无权删除')oM.show()
})// 测试：登陆按钮事件
document.querySelector('#login').addEventListener('click', function(){let oM = new Modal('登陆成功', '正在为您跳转')oM.show()
})
6.2、实现模态弹窗
分析
同一时刻只能出现一个弹窗，这种就是模态弹窗
弹窗显示时，先获取页面获取弹窗用到的标签，如果有则不显示第2个，如果没有才显示
实现
function Modal(t, c) {this.title = tthis.content = cthis.el = document.createElement('div')this.el.className = 'modal'this.el.innerHTML = `
${this.title} x
${this.content}
`this.show = function () {// -------- 判断页面上是否有 弹窗存在if (!document.querySelector('.modal')) {document.body.appendChild(this.el)}}
}// 测试：删除按钮事件
document.querySelector('#delete').addEventListener('click', function(){let oM = new Modal('温馨提示','您无权删除')oM.show()
})// 测试：登陆按钮事件
document.querySelector('#login').addEventListener('click', function(){let oM = new Modal('登陆成功', '正在为您跳转')oM.show()
})
6.3、实现关闭
分析
为关闭按钮注册事件，
事件内从body标签中将弹窗删除
实现
function Modal(t, c) {this.title = tthis.content = cthis.el = document.createElement('div')this.el.className = 'modal'this.el.innerHTML = `
${this.title} x
${this.content}
`this.show = function () {// 判断页面上是否有 弹窗存在if (!document.querySelector('.modal')) {document.body.appendChild(this.el)// -------- 为 关闭按钮 注册事件，document.querySelector('.modal .header i').addEventListener('click', function(){// -------- 在事件内将 .modal 元素从页面里移除即可document.body.removeChild(document.querySelector('.modal'))})}}
}// 测试：删除按钮事件
document.querySelector('#delete').addEventListener('click', function(){let oM = new Modal('温馨提示','您无权删除')oM.show()
})// 测试：登陆按钮事件
document.querySelector('#login').addEventListener('click', function(){let oM = new Modal('登陆成功', '正在为您跳转')oM.show()
})
