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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
通用JS事件写法实现代码
Jan 07 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
mysql_escape_string()函数用法分析
2016/04/25 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python django集成cas验证系统
2014/07/14 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python回调函数用法实例详解
2015/07/02 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python3实现购物车功能
2018/04/18 Python
Python装饰器原理与用法分析
2018/04/30 Python
详解Python用户登录接口的方法
2019/04/17 Python
python制作微博图片爬取工具
2021/01/16 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
协议书模板
2014/04/23 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
python lambda 表达式形式分析
2022/04/03 Python