登录  /  注册
首页 > web前端 > js教程 > 正文

利用原始方法和工厂方法来创建javascript对象实例代码详解

伊谢尔伦
发布: 2017-07-24 15:28:05
原创
1120人浏览过

js中并没有类的概念, 但我们可以利用js的语法特征,以类的思想来创建对象。 

原始方法 

<script type="text/javascript"> 
var obj = new Object(); 
obj.name = "Koji"; //为对象添加属性 
obj.age = 21; 
obj.showName = function(){ //为对象添加方法 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

obj.showName(); //Koji 
obj.showAge(); //21 

</script>
登录后复制

上面的方式通过new关键字生成一个对象,然后根据JS是动态语言的特性添加属性和方法,构 造一个对象。其中的this是表示调用该方法的对象。 这种方式的问题是如果需要多次创建对象,则需要重复代码多次,不利于代码的复用。

工厂方法

<script type="text/javascript"> 
function createObj(){ 
var obj = new Object(); //创建对象 

obj.name = "Koji"; 
obj.age = 21; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj(); 
var obj2 = createObj(); 

obj1.showName(); //Koji 
obj2.showAge(); //21 

</script>
登录后复制

这种方式提高了代码重用率,还可以改变工厂方法,传入参数赋值。

<script type="text/javascript"> 
function createObj(name, age){ //构造对象时可以传入初始化参数 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = function(){ 
alert(this.name); 
} 
obj.showAge = function(){ 
alert(this.age); 
} 

return obj; //返回对象 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script>
登录后复制

上面的方式虽然可以提高代码的复用率,但和面向对象中类的概念相比有一个很大的缺陷。面相对象强调对象的属性私有,而对象的方法是共享的。而上面的工厂方法创建对象的时候要为每个对象创建各自私有的方法。同时由于为每个对象都创建逻辑相同的方法,浪费内存。改进如下

<span style="font-size:14px;">
<script type="text/javascript"> 

function createObj(name, age){ 
var obj = new Object(); //创建对象 

obj.name = name; 
obj.age = age; 
obj.showName = showName; 
obj.showAge = showAge; 

return obj; //返回对象 
} 

function showName(){ //函数也是一个对象 
alert(this.name); 
} 

function showAge(){ 
alert(this.age); 
} 

var obj1 = createObj("Koji", 22); 
var obj2 = createObj("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script></span>
登录后复制

上面通过定义连个函数对象,解决了不同对象持有函数对象的私有问题。现在所有对象的方法都持有上面两个函数的引用。

以上就是利用原始方法和工厂方法来创建javascript对象实例代码详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号