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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
jquery提示效果实例分析
Nov 25 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
微信JS接口大全
2016/08/25 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python编程中的反模式实例分析
2014/12/08 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
小学生期末自我鉴定
2014/01/19 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
《雨点》教学反思
2014/02/12 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python