<!DOCTYPE html>
<html>
<head>
<title>工厂模式和构造函数</title>
<meta charset = "utf-8">
</head>
<body>
<script type="text/javascript">
//工厂模式跟构造函数
//在js中创建一个对象，然后在创建一个对象，将旧对象赋给新对象并修改新对象中的元素时旧对象中的元素也会随着改变，解决办法单独创建新的对象在逐一赋值。这样的话就会出现代码量大不方便。然后我们可以利用两种方法工厂模式跟构造函数，实现快速创建相同的对象名字不同。

//原有的样子
/*
var box = new Object();
//var box = { //不知道为啥这边创建对象的时候没有创建成功
// name:"XXX",age:20,sex:"nan" 出现问题：自己多大了两个分号
//};
box.name = "XXX";
box.age = 20;
box.sex = "nan";
box.run = function(){
return this.name + this.age+this.sex; //出现问题：自己忘记打了return将他们返回
};
alert(box.run());
var box2;
box2 = box;
alert(box2.run());
box2.name = "小明";
alert(box2.name);
alert(box.name); //两个都是小明

//使用最基本的方法创建类似相同的对象
var box = {
name:"xcmy",
age:20, //创建box对象并用对象方法run把上面三个属性返还出去
sex:"nan",
run:function(){
return this.name + this.age + this.sex;
}
};
var box1 = {
name:"xchs",
age:20, //创建box1对象并用对象方法run把上面三个属性返还出去
sex:"nan",
run:function(){
return this.name + this.age + this.sex;
}
};
alert(box.run());
alert(box1.run());
//这块代码多运用不方便

//工厂模式
//function creatObject(naem,age){ 出现错误：自己给name打错了
function creatObject(name,age){
//var obj = new Object{};
var obj = new Object(); //这里obj是一个对象
obj.name = name;
obj.age = age;
obj.run = function(){
return this.name + this.age;
}
//alert (obj.run());
//return obj.run(); 想试试这样是个什么效果
return obj; //将obj这个对象返回 可能对这里有些不太理解
}
//creatObject("小明", 20);
//alert(obj.run());
//alert(obj()); //明明想看看这三行能出现啥的结果啥也没出现
//alert(creatObject("小明", 20)); // 输出结果：[object Object] 这里是两个Object有些不懂
//var box.creatObject("小明",20); 出现错误：自己给调用函数的方法有些问题
var box = creatObject("小明", 20); //将返回的obj赋值给box
//alert(obj.run());
alert(box.run());
var box2 = creatObject("小红", 21);
alert(box2.run());
//对该工厂模式的理解：首先是创建一个box然后调用函数creatObject()并传送两个形参小明跟20，函数内部是创建一个obj的新对象然后给obj的对象赋上传进来的两个形参在创建一个run方法返回这两个属性，最终函数返回了对象obj，最后输出box.run()
*/
//构造函数
function Box(name, age) { //构造函数模式
this.name = name;
this.age = age;
this.run = function () {
return this.name + this.age + '运行中...';
};
}

var box1 = new Box('Lee', 100); //new Box()即可
var box2 = new Box('Jack', 200);
alert(box1.run());
alert(box1 instanceof Box);

</script>
</body>
</html>

使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，但问题是，这里并没有new Object()，为什么可以实例化Box()，这个是哪里来的呢？
使用了构造函数的方法，和使用工厂模式的方法他们不同之处如下：
1.构造函数方法没有显示的创建对象(new Object())；
2.直接将属性和方法赋值给this对象；
3.没有renturn语句。

构造函数的方法有一些规范：
1.函数名和实例化构造名相同且大写，(PS：非强制，但这么写有助于区分构造函数和普通函数)；
2.通过构造函数创建对象，必须使用new运算符。

既然通过构造函数可以创建对象，那么这个对象是哪里来的，new Object()在什么地方执行了？执行的过程如下：

1.当使用了构造函数，并且new 构造函数()，那么就后台执行了new Object()；
2.将构造函数的作用域给新对象，(即new Object()创建出的对象)，而函数体内的this就代表new Object()出来的对象。
3. 执行构造函数内的代码；
4. 返回新对象(后台直接返回)。

js工厂模式和构造函数的更多相关文章

  1. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  2. js面向对象小结（工厂模式，构造函数，原型方法，继承）

    最近过了一遍尼古拉斯泽卡斯的高级程序设计第三版(红皮书)第六章:面向对象程序设计,现在把总结出来的东西和大家分享一下. 主要内容如下: 1.工厂模式 2.构造函数模式 3.原型模式 4.继承 一.工厂 ...

  3. JS工厂模式开发实践

    JS工厂模式开发实践 基于JS工厂模式的H5应用,实现了轮播图功能与滑屏功能,并且实现了文字大小的自适应功能,基于SASS样式开发. 核心的JS代码如下: index.js define(functi ...

  4. JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

    本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象 当需要创建一个JavaScript对象时,我们可能这样写: var person = ...

  5. javascript 面向对象编程（工厂模式、构造函数模式、原型模式）

      javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /** * 工厂模 ...

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

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下 ...

  7. js的数据类型：单例模式，工厂模式，构造函数

    js数据类型 基本数据类型:string   undefined   null  boolean  number 引用数据类型  Object  array  function 二者的区别 基本数据类 ...

  8. 关于js的对象创建方法（简单工厂模式，构造函数模式，原型模式，混合模式，动态模式）

    // 1.工厂方式创建对象:面向对象中的封装函数(内置对象) 简单来说就是封装后的代码,简单的工厂模式是很好理解的,关于它的作用,就是利用面向对象的方法,把一些对象封装,使一些占用空间多的,重复的代码 ...

  9. js设计模式：工厂模式、构造函数模式、原型模式、混合模式

    一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.a ...

随机推荐

  1. Java学习_常见异常

    JAVA常见异常 Java.io.NullPointerException null 空的,不存在的 NullPointer 空指针 空指针异常,该异常出现在我们操作某个对象的属性或方法时,如果该对象 ...

  2. 【每天学一点-02】创建Node.js的第一个应用

    1.引入require模块,使用createServer()创建服务器 [server.js]文件 var http = require('http'); http.createServer(func ...

  3. 常见加密算法C#实现（一）

    前言:最近项目中需要用到字符串加解密,遂研究了一波,发现密码学真的是博大精深,好多算法的设计都相当巧妙,学到了不少东西,在这里做个小小的总结,方便后续查阅. 文中关键词: 明文(P,Plaintext ...

  4. PHP,javascript实现大文件上传

    HTML代码 <!doctype html> <html lang="en"> <head> <meta charset="UT ...

  5. React报错之无法在未挂载的组件上执行React状态更新

    正文从这开始~ 总览 为了解决"Warning: Can't perform a React state update on an unmounted component" ,可以 ...

  6. SElinux管理

    SElinux: 是Linux的一个强制访问控制的安全模块 SElinux的相关概念: 对象:文件.目录.进程.端口等 主体:进程称为主体 SElinux将所有的文件都赋予一个type类型的标签,所有 ...

  7. 越折腾越好用的 3 款开源 APP

    高中的时候我特别喜欢捣鼓手机,然后我一个哥们儿在我的强烈推荐下买了个 HTC Dream(G1) 手机. G1 作为谷歌的第一个亲儿子,它出厂搭载的是 Android 1.5 系统,但当时已经出到了 ...

  8. JAVA语言基础组成（2）

    函数  函数的定义 1.什么是函数? 函数就是定义在类中的具有特定功能的一段独立小程序.函数也称为方法. 2.函数的格式: 修饰符 返回值类型 函数名(参数类型 形式参数1,参数类型 形式参数2,.. ...

  9. Dolphin Scheduler 1.1.0升级1.2.0避坑指南

    本文章经授权转载 组件介绍 Apache Dolphin Scheduler是一个分布式易扩展的可视化DAG工作流任务调度系统.致力于解决数据处理流程中错综复杂的依赖关系,使调度系统在数据处理流程中开 ...

  10. 软件装在D盘，实测有效

    C盘容量小,希望把所有软件都装到D盘,试过很多次,没什么作用.今天装MS全家桶的时候看到了个帖子,实测有效,Visio.Word.Excel.PowerPoint都装到了D盘 原贴链接为:http:/ ...