做网站话术,上海推广服务,主题猫-wordpress,网站制作公司价格深入面向对象
编程思想 面向过程#xff1a;多个步骤 解决问题 性能较高#xff0c;适合跟硬件联系很紧密的东西#xff0c;如单片机 但代码维护成本高#xff0c;扩展性差 面向对象#xff1a;问题所需功能分解为一个一个的对象#xff08;分工合作#xff09;多个步骤 解决问题 性能较高适合跟硬件联系很紧密的东西如单片机 但代码维护成本高扩展性差 面向对象问题所需功能分解为一个一个的对象分工合作 接口 明确分工灵活代码可复用容易维护和开发适合大型软件项目 但性能较低 [!NOTE] 前端面向过程的代码较多 构造函数实现封装 存在浪费内存问题【若属性方法相同则多存一个实例化对象就会多浪费内存空间】 function Pig(name, age) {this.name name;this.age age;};const jogh new Pig(jogh, 10);console.log(jogh.name);console.log(jogh.age);原型对象 prototype
构造函数.prototype.方法名 function(){...}
相当于构造函数中的一个属性
解决构造函数相同的成员造成的空间浪费
图解 let that;function Pig(name, age) {this.name name;this.age age;that this;console.log(that);};Pig.prototype.eat function () {console.log(eat food);that this;console.log(that);}const jogh new Pig(jogh, 10);jogh.eat();[!IMPORTANT] 构造函数和prototype的this都指向实例化对象 给数组扩展方法
通过原型prototype来拓展数组方法
//通过原型prototype来拓展数组方法//最大值Array.prototype.max function () {return Math.max(...this);}//求和Array.prototype.sum function () {return this.reduce((pre, cur) pre cur, 0);}//技巧this就是指向实例对象的所以不需要在把数组传进去方法中去//测试能否正常调用const arr1 [1, 2, 3, 4, 5];const arr2 [1, 5, 8, 3, 2];console.log(arr1.max());console.log(arr1.sum());console.log(arr2.max());console.log(arr2.sum());constructor属性及其应用 指向构造函数 【prototype中的一个属性】
应用
当对prototype整体赋值时会丢失指向构造函数的路径需用constructor来重新指向构造函数
function Pig(name, age) {this.name name;this.age age;};console.log(Pig.prototype);Pig.prototype {sing: function () {console.log(sing);},dance: function () {console.log(dance);}};console.log(Pig.prototype);图解 对象原型 __proto__
每个实例化对象都有的属性只读 指向构造函数中的原型对象
注意
JS非标准属性[prototype]和__proto__意义相同也有constructor属性指向构造函数
因为有了对象原型实例化对象才可以直接调用原型对象中的方法 function Pig(name, age) {this.name name;this.age age;};console.log(Pig.prototype);const jogh new Pig(jogh, 10);console.log(jogh.__proto__);console.log(jogh.__proto__.constructor);console.log(Pig.prototype.constructor);
图解 原型继承
通过原型对象来继承一个实例化对象中的内容本质是创建一个需要被继承的实例化对象然后原型对象保存了指向这个空间的地址最后需要将constructor重新指向对应的构造函数
//如果是通过一个实例化对象进行继承的话如果继承的对象后续想给自己的原型对象中加点属性或方法会导致所有的继承对象的原型对象都发生变化//原因每个继承的对象的原型对象指向的是同一个实例化对象也就是在栈中保存的是相同的地址//男人和女人function Man() {}//通过原型对象进行继承Man.prototype new Person();//得重新指向构造函数Man.prototype.constructor Man;Man.prototype.sing function () {console.log(sing);}console.log(Man.prototype);console.log(new Man().__proto__.constructor);function Woman() {}//通过原型对象进行继承Woman.prototype new Person();//得重新指向构造函数Woman.prototype.constructor Woman;Woman.prototype.born function () {console.log(baby);}console.log(Woman.prototype);console.log(new Woman().__proto__.constructor);原型链 面试常考 由于原型对象的继承使得不同构造函数的原型对象关联在一起 关系酷似链式解构因此得名 [!IMPORTANT] 一种查找规则当调用一个对象的成员时先找自身 找不到则找自身的原型对象找不到则找自身原型对象的对象原型 一直找到Object.prototype为止 instanceof
判断某个实例化对象或者一个构造函数是否在Object的原型链上
function Person() {this.eyes 2;}console.log(Person.prototype.__proto__ Object.prototype);console.log(new Person().__proto__.__proto__ Object.prototype);console.log(Person instanceof Object);console.log(Person instanceof Array);console.log([1, 2, 3] instanceof Array);console.log(Array instanceof Object);综合案例
通过面向对象的方法实现提示框的功能 同个提示框的功能可以给其他按钮复用只需更改参数 一个构造函数创建一个标签多样化通过实参进行传入在原型对象prototype上挂载open和close close在body中删除这个标签open先判断是否已经由同类型标签有则移除添加对象到body中绑定关闭事件
3.按钮点击实例化调用open
!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.设置构造函数modal创建一个divfunction Modal(title , msg ) {this.modal document.createElement(div);this.modal.className modal;this.modal.innerHTML div classheader${title} ix/i/divdiv classbody${msg}/div}//2.封装打开函数到prototype中Modal.prototype.open function () {const box document.querySelector(.modal)box box.remove();document.querySelector(body).appendChild(this.modal);//绑定点击关闭事件this.modal.querySelector(i).addEventListener(click, () {this.close();})}//3.封装关闭函数到prototype中Modal.prototype.close function () {document.querySelector(body).removeChild(this.modal)}document.querySelector(#delete).addEventListener(click, () {const del new Modal(温馨提示, 您没有删除权限操作);del.open();})document.querySelector(#login).addEventListener(click, () {const login new Modal(友情提示, 您还没有登录欧);login.open();})/script
/body/html
