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 相关文章推荐
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue中改变滚动条样式的方法
Mar 03 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
Python书单 不将就
2017/07/11 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
django定期执行任务(实例讲解)
2017/11/03 Python
浅谈python数据类型及类型转换
2017/12/18 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
Django model序列化为json的方法示例
2018/10/16 Python
详解python itertools功能
2020/02/07 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
python 简单的调用有道翻译
2020/11/25 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
优秀食品类广告词
2014/03/19 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
新闻稿怎么写
2015/07/18 职场文书
预备党员表决心的话
2015/09/22 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
javascript实现计算器功能详解流程
2021/11/01 Javascript
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android