1688黄页网免费网站,南宁网站建设哪家公司实力强,qq浏览器直接进入,建设施工合同范本1.两种面向编程思想 2.构造函数实现封装以及存在的问题 下面就引出了原型对象
3.原型对象prototype 共享原理图#xff1a; 4.数组扩展案例-求最大值和数组求和 !DOCTYPE html
html langenheadmeta charsetUTF-8 4.数组扩展案例-求最大值和数组求和 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyscript// 自己定义 数组扩展方法 求和 和 最大值 // 1. 我们定义的这个方法任何一个数组实例对象都可以使用// 2. 自定义的方法写到 数组.prototype 身上// 1. 最大值const arr [1, 2, 3]Array.prototype.max function () {// 展开运算符return Math.max(...this)// 原型函数里面的this 指向谁 实例对象 arr}// 2. 最小值Array.prototype.min function () {// 展开运算符return Math.min(...this)// 原型函数里面的this 指向谁 实例对象 arr}console.log(arr.max())console.log([2, 5, 9].max())console.log(arr.min())// const arr new Array(1, 2)// console.log(arr)// 3. 求和 方法 Array.prototype.sum function () {return this.reduce((prev, item) prev item, 0)}console.log([1, 2, 3].sum())console.log([11, 21, 31].sum())/script
/body/html
5.constructor属性以及应用 6.对象原型__proto__ 7.原型继承 8.原型链以及instanceof运算符 9.综合案例-模态框构造函数写法 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title面向对象封装消息提示/titlestyle.modal {width: 300px;min-height: 100px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);border-radius: 4px;position: fixed;z-index: 999;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);background-color: #fff;}.modal .header {line-height: 40px;padding: 0 10px;position: relative;font-size: 20px;}.modal .header i {font-style: normal;color: #999;position: absolute;right: 15px;top: -2px;cursor: pointer;}.modal .body {text-align: center;padding: 10px;}.modal .footer {display: flex;justify-content: flex-end;padding: 10px;}.modal .footer a {padding: 3px 8px;background: #ccc;text-decoration: none;color: #fff;border-radius: 2px;margin-right: 10px;font-size: 14px;}.modal .footer a.submit {background-color: #369;}/style
/headbodybutton iddelete删除/buttonbutton idlogin登录/button!-- div classmodaldiv classheader温馨提示 ix/i/divdiv classbody您没有删除权限操作/div/div --script// 1. 模态框的构造函数function Modal(title , message ) {// 公共的属性部分this.title titlethis.message message// 因为盒子是公共的// 1. 创建 一定不要忘了加 this this.modalBox document.createElement(div)// 2. 添加类名this.modalBox.className modal// 3. 填充内容 更换数据this.modalBox.innerHTML div classheader${this.title} ix/i/divdiv classbody${this.message}/div// console.log(this.modalBox)}// 2. 打开方法 挂载 到 模态框的构造函数原型身上Modal.prototype.open function () {if (!document.querySelector(.modal)) {// 把刚才创建的盒子 modalBox 渲染到 页面中 父元素.appendChild(子元素)document.body.appendChild(this.modalBox)// 获取 x 调用关闭方法this.modalBox.querySelector(i).addEventListener(click, () {// 箭头函数没有this 上一级作用域的this// 这个this 指向 m this.close()})}}// 3. 关闭方法 挂载 到 模态框的构造函数原型身上Modal.prototype.close function () {document.body.removeChild(this.modalBox)}// 4. 按钮点击document.querySelector(#delete).addEventListener(click, () {const m new Modal(温馨提示, 您没有权限删除)// 调用 打开方法m.open()})// 5. 按钮点击document.querySelector(#login).addEventListener(click, () {const m new Modal(友情提示, 您还么有注册账号)// 调用 打开方法m.open()})/script
/body/html
