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 相关文章推荐
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
使用vuex的state状态对象的5种方式
Apr 19 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
element-ui点击查看大图的方法示例
Dec 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 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
python实现维吉尼亚算法
2019/03/20 Python
学习Python爬虫的几点建议
2020/08/05 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
未婚证明书模板
2014/10/08 职场文书
师德师风整改措施
2014/10/24 职场文书
教师群众路线心得体会
2014/11/04 职场文书
公司借条范本
2015/05/25 职场文书
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers