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 相关文章推荐
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
javascript实现拖放效果
Dec 16 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
微信小程序纯文本实现@功能
Apr 08 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
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
限制文本字节数js代码
2007/03/06 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
js数组去重的方法总结
2019/01/18 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python中私有函数调用方法解密
2016/04/29 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python实现图片处理和特征提取详解
2017/11/13 Python
python3人脸识别的两种方法
2019/04/25 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
使用Tkinter制作信息提示框
2020/02/18 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
党支部书记岗位责任制
2014/02/11 职场文书
质量承诺书格式
2014/05/20 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书