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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
node.js +mongdb实现登录功能
Jun 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php桌面中心(二) 数据库写入
2007/03/11 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
python求解水仙花数的方法
2015/05/11 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
机电职业生涯规划书范文
2014/03/08 职场文书
联谊会主持词
2014/03/26 职场文书
工作岗位职责范本
2015/02/15 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL