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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
jQuery实现倒计时功能完整示例
Jun 01 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
Yii调试SQL的常用方法
2014/07/09 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
Three.js基础学习教程
2017/11/16 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
Vue 进阶之路(三)
2019/04/18 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python实现归并排序算法
2018/11/22 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python如何实现异步调用函数执行
2019/07/08 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
浅谈Python3中print函数的换行
2020/08/05 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
大学毕业登记表自我鉴定
2013/10/09 职场文书
物理力学求职信
2014/02/18 职场文书
出纳会计岗位职责
2014/03/12 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
体育馆的标语
2014/06/24 职场文书
法制宣传标语集锦
2014/06/25 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书