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 相关文章推荐
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 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
phpfans留言版用到的install.php
2007/01/04 PHP
php生成无限栏目树
2017/03/16 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
Javascript面向对象编程
2012/03/18 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python爬取天气数据的实例详解
2020/11/20 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
战友聚会邀请函
2014/01/18 职场文书
个人简历中自我评价
2014/02/11 职场文书
护理专业求职信
2014/06/15 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
上课迟到检讨书
2015/05/06 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
单位计划生育责任书
2015/05/09 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server