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 相关文章推荐
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
jquery实现动态画圆
Dec 04 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 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
php抓取页面与代码解析 推荐
2010/07/23 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
JS 跳转页面延迟2种方法
2013/03/29 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
2017/04/13 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
详解Python之unittest单元测试代码
2018/01/24 Python
python-str,list,set间的转换实例
2018/06/27 Python
python调用百度语音REST API
2018/08/30 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书