javascript中的面向对象


Posted in Javascript onMarch 30, 2017

相信大家对javascript中的面向对象写法都不陌生,那还记得有几种创建对象的写法吗?相信大家除了自己常写的都有点模糊了,那接下来就由我来帮大家回忆回忆吧!

1. 构造函数模式

通过创建自定义的构造函数,来定义自定义对象类型的属性和方法。

function cons(name,age){
 this.name = name;
 this.age = age;
 this.getMes = function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}
var mesge = new cons('will',21);
mesge.getMes();

2. 工厂模式

该模式抽象了创建具体对象的过程,用函数来封装以特定接口创建对象的细节

function cons(name,age){
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.getMes = function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
 return obj;
}
var mesge = cons('will',21);
mesge.getMes();

3. 字面量模式

字面量可以用来创建单个对象,但如果要创建多个对象,会产生大量的重复代码

var cons = {
 name: 'will',
 age : 21,
 getMes: function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}
cons.getMes();

4. 原型模式

使用原型对象,可以让所有实例共享它的属性和方法

function cons(){
 cons.prototype.name = "will";
 cons.prototype.age = 21;
 cons.prototype.getMes = function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}

var mesge = new cons();
mesge.getMes();

var mesge1 = new cons();
mesge1.getMes();
console.log(mesge.sayName == mesge1.sayName);//true

5. 组合模式

最常见的方式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性,这种组合模式还支持向构造函数传递参数。实例对象都有自己的一份实例属性的副本,同时又共享对方法的引用,最大限度地节省了内存。该模式是目前使用最广泛、认同度最高的一种创建自定义对象的模式

function cons(name,age){
 this.name = name;
 this.age = age;
 this.friends = ["arr","all"];
}
cons.prototype = {
 getMes : function(){
  console.log(`my name is ${this.name},this year ${this.age}`);
 }
}
var mesge = new cons("will",21);
var mesge1 = new cons("jalo",21);
console.log(mesge.friends);
mesge.friends.push('wc'); //还可以操作数组哈O(∩_∩)O!
console.log(mesge.friends);
console.log(mesge1.friends);
mesge.getMes();
mesge1.getMes();
console.log(mesge.friends === mesge1.friends);
console.log(mesge.sayName === mesge1.sayName);

最后在告诉你个秘密,ES6引入了类(Class),让对象的创建、继承更加直观了

// 定义类

class Cons{
 constructor(name,age){
  this.name = name;
  this.age = age;
 }
 getMes(){
  console.log(`hello ${this.name} !`);
 }
}
let mesge = new Cons('啦啦啦~',21);
mesge.getMes();

在上面的代码片段里,先是定义了一个Cons类,里面还有一个constructor函数,这就是构造函数。而this关键字则代表实例对象。

而继承可以通过extends关键字实现。

class Ctrn extends Cons{
 constructor(name,anu){

  super(name); //等同于super.constructor(x)
  this.anu = anu;
 }
 ingo(){
  console.log(`my name is ${this.name},this year ${this.anu}`);
 }
}
let ster = new Ctrn('will',21);
ster.ingo();
ster.getMes();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
javascript读写json示例
Apr 11 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
详解JavaScript对象的深浅复制
Mar 30 #Javascript
js实现不提示直接关闭网页窗口
Mar 30 #Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 #jQuery
JavaScript实现弹出广告功能
Mar 30 #Javascript
JavaScript如何一次性展示几万条数据
Mar 30 #Javascript
ECMAScript6--解构
Mar 30 #Javascript
js图片放大镜效果实现方法详解
Oct 28 #Javascript
You might like
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
详解js中==与===的区别
2017/01/08 Javascript
Node.js的特点详解
2017/02/03 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
九步学会Python装饰器
2015/05/09 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
英语教师岗位职责
2014/03/16 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
护士节慰问信
2015/02/15 职场文书
经理岗位职责范本
2015/04/15 职场文书
作弊检讨书范文
2015/05/06 职场文书