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 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
vue登录以及权限验证相关的实现
Oct 25 Javascript
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
yii2超好用的日期组件和时间组件
2016/05/05 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
js+css在交互上的应用
2010/07/18 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
详细介绍Python中的偏函数
2015/04/27 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
2014年创卫实施方案
2014/02/18 职场文书
银行委托书范本
2014/04/04 职场文书
经济管理专业求职信
2014/06/09 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2014年业务工作总结
2014/11/17 职场文书
师范生见习自我总结
2015/06/23 职场文书
入党自传范文2015
2015/06/26 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js