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 相关文章推荐
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
Node.js实现断点续传
Jun 23 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python检测服务器端口代码实例
2019/08/31 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
危货运输企业安全生产责任书
2014/07/28 职场文书
初中团委工作总结
2015/08/13 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python