详解js产生对象的3种基本方式（工厂模式，构造函数模式，原型模式）
更新时间：2017年01月09日 09:18:09 作者：三十亿少女的梦
本篇文章主要介绍了js产生对象的3种基本方式（工厂模式，构造函数模式，原型模式） ，具有一定的参考价值，有兴趣的可以了解一下
1.工厂模式
工厂模式是软件工程领域一种广为人知的设计模式，而由于在ECMAScript中无法创建类，因此用函数封装以特定接口创建对象。其实现方法非常简单，也就是在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可。
function a(name){
var b = new object();
b.name = name;
b.say = function(){
alert(this.name);
}
return b
}
函数内部产生b对象并返回。
2.构造函数模式
function Person(name, url) { //注意构造函数名第一个字母大写
this.name = name;
this.url = url;
this.alertUrl = alertUrl;
}
function alertUrl() {
alert(this.url);
}
因为每构造一个对象就会生成一个alertUrl方法，这样太浪费资源空间，所以把alertUrl这个方法写在全局以节省空间，但这样写就违背了面向对象编程的初衷，下面的原型模式就更好一些。
3.原型模式
我们创建的每个函数都有prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性及方法。
function Person(){
}
Person.prototype.name = "bill";
Person.prototype.address = "GuangZhou";
Person.sayName = function (){
alert(this.name);
}
var person1 = new Person();
var person2 = new Person();
//测试代码
alert(person1.name); // bill
alert(person2.name); // bill
person1.sayName(); //bill
person2.sayName(); //bill
person1.name = "666";
alert(person1.name); // 666
alert(person2.name); // bill
person1.sayName(); //666
person2.sayName(); //bill
我们创建的每个函数都有prototype（原型）属性，这个属性其实是一个指针，指向一个对象。
当构造一个person对象例如person1之后，它的默认name属性就是bill。如果要改name值的话就要对person1.name操作。这只是改了这个对象的name属性。alert(person1.prototype.name)依然是弹出bill，即原型上的name属性
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
浅谈javascript中的prototype和__proto__的理解
这篇文章主要介绍了浅谈javascript中的prototype和__proto__的理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要给大家介绍了关于uniapp实现tabs切换(可滑动)效果的相关资料,tabs切换无论是在app端还是小程序或者H5页面都是很常见的功能,文中通过实例代码介绍的很详细,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了js实现无缝滚动双图切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了如何使用Lottie制作动画,包括创建动画文件.json、实现效果、在Git仓库中保存和共享、运行动画以及在动画天堂下载和显示JSON动画,文中通过代码及图文介绍的非常详细,需要的朋友可以参考下2025-02-02
下面小编就为大家带来一篇浅谈JS中json数据的处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了JavaScript框架(iframe)操作,介绍了种情况下的操作方法,需要的朋友可以参考下2014-04-04
回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数,下面这篇文章主要给大家介绍了关于如何利用JS判断整数x是否是回文数的相关资料,需要的朋友可以参考下2022-01-01
js实现的点击超链显示隐藏层...2007-05-05
下面小编就为大家带来一篇JS只能输入正整数的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了JS实现仿雅虎首页快捷登录入口及导航模块效果,涉及JavaScript响应鼠标事件遍历页面元素的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
最新评论