JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】


Posted in Javascript onApril 01, 2017

本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下:

Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引入了Class这个概念,作为对象的模板。通过class关键字,可以定义类。ES6入门:http://es6.ruanyifeng.com/)。

但是在项目开发中,经常用到JS面向对象开发,这就需要我们去用JS创建类,从而去实例化一些对象。接下来我们介绍一下在JS中创建类的几种方式:

1.工厂方式:

//通过工厂方式创建对象,先定义一个工厂方法
function createObj(){
  var obj = new Object();
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
//调用工厂方法创建对象:
var obj1 = createObj();
//也可以用这种形式
function createObj(){
  var obj = {}; //这样生成对象
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
var obj1 = createObj();

这种方式的问题是每一次通过工厂方法去创建一个对象,这个对象的属性name和方法say都必须重新创建一次,浪费内存。

2.构造器方式:

//创建一个构造器,构造函数首字母大写
function Obj(){
  this.name="xxx";
  this.say=function(){
    alert("我是xxx");
  };
}
//利用构造器,通过new关键字生成对象
var obj1=new Obj();

这是最基本的方式,但是也存在和工厂方式一样的毛病。

3.原型方式:

//用空函数创建一个类
function Obj(){
}
//在类的原型链上添加属性和方法
Obj.prototype.name="xxx";
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1=new Obj();

这个方式的缺点是,当有引用属性时,改变一个对象的这个属性也会改变其他对象的这个属性。因为一个引用属性,都是指向的同一个地方。

4.原型/构造联合方式

//用构造函数定义对象的非函数属性
function Obj(name){
  this.name=name;
  this.arr=new Array('a','b');
}
//用原型方式定义对象的方法
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1 = new Obj('xxx');

这种是目前用的最多的创建类和对象的方式,将方法和属性用不同的方式封装。

5.动态原型方式

//动态原型方式和原型/构造混合方式的原理相似,唯一的区别就是赋予对象方法的位置
function Person(name, sex) {
  this.name = name;
  this.sex = sex;
  if (typeof this.say != "function") {
    Person.prototype.say = function () {
      alert(this.name);
    }
  }
}
var man =new Person ("凯撒", "男");
man.say();//凯撒

动态原型模式是将所有的信息都封装到构造函数中,构造函数中,只用say不存在的情况下,才会将它添加到原型中。这段代码只有在初次调用时才会执行。

实例化obj对象有三步:

1. 创建obj对象:

obj=new Object();

2. 将obj的内部__proto__指向构造他的函数Obj的prototype,同时,obj.constructor===Obj.prototype.constructor,从而使得obj.constructor.prototype指向Obj.prototype(obj.constructor.prototype===A.prototype)。obj.constructor.prototype与的内部_proto_是两码事,实例化对象时用的是_proto_,obj是没有prototype属性的,但是有内部的__proto__,通过__proto__来取得原型链上的原型属性和原型方法。

3. 将obj作为this去调用构造函数Obj,从而设置成员(即对象属性和对象方法)并初始化。

当这3步完成,这个obj对象就与构造函数Obj再无联系,这个时候即使构造函数Obj再加任何成员,都不再影响已经实例化的obj对象了。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JS实现图片拖拽交换效果
Nov 30 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
Vue.js实战之Vuex的入门教程
Apr 01 #Javascript
AngularJS页面传参的5种方式
Apr 01 #Javascript
vue2.0构建单页应用最佳实战
Apr 01 #Javascript
vue货币过滤器的实现方法
Apr 01 #Javascript
javascript 中的try catch应用总结
Apr 01 #Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 #Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php框架Phpbean说明
2008/01/10 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
vue做网页开场视频的实例代码
2017/10/20 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python中bisect的使用方法
2019/12/31 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
2014年国庆节活动总结
2014/08/26 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
青年教师个人总结
2015/02/11 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
Java线程的6种状态与生命周期
2022/05/11 Java/Android