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 相关文章推荐
javascript对象之内置对象Math使用方法
Apr 16 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
vue组件系列之TagsInput详解
May 14 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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
推荐一篇入门级的Class文章
2007/03/19 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
超实用的 30 段 Python 案例
2019/10/10 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python中upper是做什么用的
2020/07/20 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
教师年终个人自我评价
2013/10/04 职场文书
晚宴邀请函范文
2014/01/15 职场文书
信访工作汇报材料
2014/10/27 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
领导欢迎词范文
2015/01/26 职场文书
裁员通知
2015/04/25 职场文书
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS