详解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属性

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

关于ES6中的箭头函数超详细梳理
箭头函数可以说是es6的一大亮点,使用箭头函数,可以简化编码过程,是代码更加的简洁,下面这篇文章主要给大家介绍了关于ES6中箭头函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
前端深入理解Typescript泛型概念
这篇文章主要介绍了前端深入理解Typescript泛型概念，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
flash调用js中的方法,让js传递变量给flash的办法及思路
前几天发表了将FlashVars写在JS函数中，实现与后台的实时变量更新，但是仅支持 IE，随后与 Luckyer 进行了交流，发现用 SetVariable 可以很方便的实现多浏览器兼容。举例如下。
2013-08-08
Three.js中网格对象MESH的属性与方法详解
三维开发渲染最多的对象大概是网格mesh了，Webgl开发三维也不例外，下面这篇文章主要给大家介绍了关于Three.js中网格对象MESH的属性与方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
Json实现传值到后台代码实例
这篇文章主要介绍了Json实现传值到后台代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
javascript实现九宫格相加数值相等
这篇文章主要介绍了javascript实现九宫格相加数值相等的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-02-02
11款基于Javascript的文件管理器
11款基于JavaScript的文件管理器，大多数免费开源，功能并不逊色于那些专业的文件管理程序。
2009-10-10
js实现不提示直接关闭网页窗口
本文主要介绍了js实现不提示直接关闭网页窗口的方法。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
JavaScript实现经典排序算法之插入排序
这篇文章主要为大家详细介绍了JavaScript实现经典排序算法之插入排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
javascript中的new使用
javascript是基于原型(Prototype based)的面向对象的语言，这点不同于我们熟悉的.NET，Java语言，是基于类模式(Class based)。
2010-03-03