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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
详解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
linux下编译安装memcached服务
2014/08/03 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
yii2安装详细流程
2018/05/23 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
浅谈react前后端同构渲染
2017/09/20 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
Python操作SQLite简明教程
2014/07/10 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
对Python3中的input函数详解
2018/04/22 Python
django框架cookie和session用法实例详解
2019/12/10 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
关爱残疾人标语
2014/06/25 职场文书
水电维修专业推荐信
2014/09/06 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers