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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
JS数组方法concat()用法实例分析
Jan 18 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
第三节--定义一个类
2006/11/16 PHP
文件系统基本操作类
2006/11/23 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python实现数据图表
2017/07/29 Python
Django框架验证码用法实例分析
2019/05/10 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
实习护士自我鉴定
2013/10/13 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP