DDR爱好者之家 Design By 杰米
Javascript oop设计模式 面向对象编程
最初我们写js代码的时候是这么写
function checkName(){ //验证姓名 } function checkEmail(){ //验证邮箱 } function checkPassword(){ //验证密码 }
这种方式会造成全局变量的严重污染,再过渡到
var checkObject = { checkName : function(){}; checkEmail: function(){}; checkPassword: funcion(){}; } //也可如此写 var checkObject = {} // || function(){} checkObject.checkName = function(){}; checkObject.checkEmail = function(){}; checkObject.checkPassword = function(){}; //以上这两种写法不能复制一份,也就是说在new 方法创建新的对象的时候,新对象不能继承这些方法
以上是直接使用,而不是新建对象复制一份的,复制一份的话可以这么写
var checkObject = function(){ return { checkName:function(){}, checkEmail:function(){}, checkPassword:function(){} } } //使用的时候 可以 var a = checkObject(); a.checkName();
这么写可以实现对象的复制 但是这不符合面向对象,新创建的类和checkObject 没有任何关系
于是我们可以采用构造函数的方式书写代码
var checkObject = function(){ this.checkName = function(){} this.checkEmail = function(){} this.checkPassword = function(){} } //像这样我们便可以用CheckObject 来创建新的对象了,通过new 来创建对象,创建出来的每个对象都会对this上的属性进行复制,但是这么做的话,每次都会有相对较大消耗,对于共有的方法,我们可以放在对象的原型上 var checkObject = function(){}; checkObject.prototype.checkName = function(){}; //... //这样写要将prototype 书写很多遍 ,所以我们可以这么写,并实现链式调用,将this返回 var checkObject = function(){}; checkObject.prototype={ checkName:function(){ //验证姓名 return this; }, checkEmail:function(){ //验证邮箱 return this }, checkPassword:function(){ //验证密码 return this; } } // 这两种方式不可混用,否则后边会覆盖前边,此时我们调用只需 new checkObject().checkName().checkEmail().checkPassword();
下面再来介绍一下面向对象和面向过程两种编程方式 .page 10
多个function 书写的方式是一种面向过程书写代码的实现方式,添加了很多全局变量而且不利于别人复用,在别人使用时你也不可修改,我们可以改用面向对象方式来重写,我们把需求抽成一个对象,这个对象称之为类,面向对象一个重要特点就是封装,将属性和方法封装在一个对象中,就像将物品放在一个旅行箱中,这样不管是使用和管理我们都方便,(虽然有时候感觉直接拿在外边摆放也很方便,但是东西一多便不利于管理)
var Book = (function () { //静态私有变量 var bookNum = 0; //静态私有方法 function checkBook() { } //返回构造函数 return function (newId, newName, newPrice) { //私有变量 var name, price; //私有方法 function checkId(id) { } //特权方法 this.getPrice = function () { }; this.getName = function () { }; this.setName = function (name) { this.name = name }; this.setPrice = function () { }; //公有属性 this.id = newId; //公有方法 this.copy = function () { }; bookNum++; if (bookNum > 100) throw new Error('oop javascript'); //构造器 实例化过程中被调用的方法 this.setName(name); this.setPrice(price); } })(); Book.prototype = { //静态公有属性 isJSBook: false, //静态公有方法 display: function () { } }; //对比Java 别被js 起的这些名字弄混了 其实Js 就模仿了一个New 其他的跟Java基本一样 类 全局变量 方法 有自己的理解比较好 以前未想明白 // java 为什么那么些
//为了看起来更像一个类 我们将原型上的方法 写到类里边
var Book = (function () { //静态私有变量 var bookNum = 0; //静态私有方法 function checkBook() { } //返回构造函数 function _Book(newId, newName, newPrice) { //私有变量 var name, price; //私有方法 function checkId(id) { } //特权方法 this.getPrice = function () { }; this.getName = function () { }; this.setName = function (name) { this.name = name }; this.setPrice = function () { }; //公有属性 this.id = newId; //公有方法 this.copy = function () { }; bookNum++; if (bookNum > 100) throw new Error('oop javascript'); //构造器 实例化过程中被调用的方法 this.setName(name); this.setPrice(price); } _Book.prototype = { //静态公有属性 isJSBook: false, //静态公有方法 display: function () { } }; return _Book; })();
下面再介绍一种创建对象的安全模式
//注意 执行new Book 方法之前 this.title 会先执行一次 var Book = function (title) { if (this instanceof Book) { alert(1); this.title = title; }else{ return new Book(title); } }; var book = new Book('js'); alert(book.title);
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年11月28日
2024年11月28日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]