本文实例讲述了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错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]