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

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

赞 (0)

相关推荐

  • JavaScript 模式之工厂模式(Factory)应用介绍

    工厂模式也是对象创建模式之一,它通常在类或类的静态方法中去实现.构造对象的一种方式是使用new操作符,但使用new时正是针对实现编程,会造成"耦合"问题,与具体的类关系紧密.导致代码更脆弱,缺乏弹性,在复杂逻辑的项目中建议是面向接口编程. 先看简单工厂模式 复制代码 代码如下: Person(name, age) { var obj = {} obj.name = name obj.age = age return obj } var p1 = Person('jack', 25) v

  • JavaScript设计模式之工厂模式和构造器模式

    什么是模式 前阵子准备期末考试,劳神又伤身的,实在闲不得空来更新文章,今天和大家说说javascript中的设计模式. 首先呢,我们需要知道的是:模式是一种可复用的解决方案,而反模式呢就是针对某个问题的不良解决方案. js反模式常见例子 1.向setTimeout和setInterval传递字符串,而不是函数,这会触发eval()的内部使用. 2.在全局上下文中定义大量的变量污染全局命名空间 3.修改Object类的原型 4.以内联形式使用js,嵌入在HTML文件中的js代码是无法包含在外部单元

  • 工厂模式在JS中的实践

    工厂模式在JS中的实践

    一.   写在前面 工厂模式和抽象工厂在后台代码中的使用,相信你一定非常熟悉,所以关于概念的东西也用不着我多说.你可以用其做为类与类之间,层与层之间的解耦.工厂模式没有什么难点,在JS中其实思想也是一样的,所以废话不多说,直接上实践的场景和代码. 二.  场景描述 1.最近的项目的登陆使用了Owin认证,所以token必须找好地方进行存储,鉴于token需要在请求API资源的时候放到请求头的Authorization当中,以便在进入WebAPI前进行身份验证.所以我不想在主流浏览器中的cooki

  • js简单工厂模式用法实例

    本文实例讲述了js简单工厂模式用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <title>简单工厂模式</title> </head> <body> <script> //简单工厂模式 var BicycleShop = function(){}; BicycleShop.prototype ={ sellBicycle : function(mod

  • javascript设计模式之工厂模式示例讲解

    javaScript工厂方式原始的方式因为对象的属性可以在对象创建后动态定义,这在 JavaScript 最初引入时都会编写类似下面的代码 复制代码 代码如下: var oCar = new Object;oCar.color = "blue";oCar.doors = 4;oCar.mpg = 25;oCar.showColor = function() {  alert(this.color);}; 在上面的代码中,创建对象 car.然后给它设置几个属性:它的颜色是蓝色,有四个门,

  • javascript 模式设计之工厂模式学习心得

    模式类型:工厂模式 模式说明:常用模式之一,用来动态创建对象 适用范围:在运行期间需要在一系列可互换的子类中进行选择的类 注意事项:接口的实现,从而使不同子类可以被同等的对待,恰当的使用工厂模式,但不要拘泥与形式,理解本质. 关键点:以 函数/类/子类 构建的选择器 本质:函数作为选择器的使用 一般使用形式: 作为独立的选择器存在: 复制代码 代码如下: function FactoryMode(index){ switch(index){ case "index1" : return

  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

    在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模

  • Javascript面向对象设计一 工厂模式

    1.工厂模式抽象了创建具体对象的过程,但是在ECMAScript中无法创建类,所以就使用一种函数来封装以特定接口创建对象的细节.以一下情况为例, 有一个员工类,有姓名.年龄.职位属性, 复制代码 代码如下: function CreateEmployee(name, age, job) { var Emp = new Object(); Emp.name = name; Emp.age = age; Emp.job = job; Emp.sayName = function () { alert

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • javascript 模式设计之工厂模式详细说明

    模式类型:工厂模式 模式说明:常用模式之一,用来动态创建对象 适用范围:在运行期间需要在一系列可互换的子类中进行选择的类 注意事项:接口的实现,从而使不同子类可以被同等的对待,恰当的使用工厂模式,但不要拘泥与形式,理解本质. 关键点:以 函数/类/子类 构建的选择器 本质:函数作为选择器的使用 一般使用形式: 作为独立的选择器存在: 复制代码 代码如下: function FactoryMode(index){ switch(index){ case "index1" : return

随机推荐