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 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
Javascript 命名空间模式
Nov 01 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
分类解析jQuery选择器
Nov 23 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
vue实现文件上传功能
Aug 13 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 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
PHP实现分页的一个示例
2006/10/09 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP进程通信基础之信号
2017/02/19 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
Three.js学习之网格
2016/08/10 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
春节晚会主持词
2014/03/24 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2016年父亲节寄语
2015/12/04 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Go语言怎么使用变长参数函数
2022/07/15 Golang