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代码
Mar 16 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP 七大优势分析
2009/06/23 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
原生js生成图片验证码
2020/10/11 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
高中校园广播稿
2014/01/11 职场文书
战友聚会邀请函
2014/01/18 职场文书
经典婚礼主持词
2014/03/13 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android