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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
JavaScript函数重载操作实例浅析
May 02 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
php中apc缓存使用示例
2013/12/25 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
php intval函数用法总结
2019/04/14 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
asm.js使用示例代码
2013/11/28 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
让Vue也可以使用Redux的方法
2018/05/23 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
Python模块WSGI使用详解
2018/02/02 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python扫描线填充算法详解
2020/02/19 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
开业庆典策划方案
2014/02/18 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
企业文化建设实施方案
2014/03/22 职场文书
2014春晚主持词
2014/03/25 职场文书
担保书怎么写
2014/04/01 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
党支部评议意见
2015/06/02 职场文书
护士岗位竞聘书
2015/09/15 职场文书