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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
jquery 插件学习(六)
2012/08/06 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
OpenCV实现人脸识别
2017/04/07 Python
Python遍历numpy数组的实例
2018/04/04 Python
python 检查文件mime类型的方法
2018/12/08 Python
python 元组和列表的区别
2020/12/30 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
护林员个人总结
2015/03/04 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS