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.Form 异步提交表单的简单实例
Mar 03 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
基于react项目打包css引用路径错误解决方案
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
php分页示例代码
2007/03/19 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
Python中的并发编程实例
2014/07/07 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
python 编码规范整理
2018/05/05 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
劲霸男装广告词改编版
2014/03/21 职场文书
吨的认识教学反思
2014/04/27 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
详解Vue3使用axios的配置教程
2022/04/29 Vue.js