<!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. Map集合中的同一键值key重复赋值

    前言: 验证:对Map集合中的同一键值key重复赋值? 结果:对Map集合中的同一键值key重复赋值会覆盖之前的结果. 验证如下: Map<String, Object> map = ne ...

  2. 数据库 OLAP、OLTP是什么？相同和不同？适用场景

    一.OLTP和OLAP是什么,二者比较 人类世界遵从基本的物理规律,数据世界里,关于数据的操作处理,也大体分为OLTP和OLAP两类. OLTP on-line transaction process ...

  3. NC50999 表达式计算4

    NC50999 表达式计算4 题目 题目描述 给出一个表达式,其中运算符仅包含+,-,*,/,^(加 减 乘 整除 乘方)要求求出表达式的最终值 数据可能会出现括号情况,还有可能出现多余括号情况 数据 ...

  4. SpringMVC 概述

    1. SpringMVC 概述 1) Spring 为展现层提供的基于 MVC 设计理念的优秀的 Web 框架,是目前最主流的MVC 框架之一 .MVC,M:model,模型层,指的是项目中的实体Ja ...

  5. Python 中生成器的原理

    生成器的使用 在 Python 中,如果一个函数定义的内部使用了 yield 关键字,那么在执行函数的时候返回的是一个生成器,而不是常规函数的返回值. 我们先来看一个常规函数的定义,下面的函数 f() ...

  6. linux新建分区和磁盘

    1.查看已有分区 ]# df –hl fdisk -l 查看磁盘情况 ]# fdisk –l 2.对未分区的进行分区 # fdisk /dev/vdb 硬盘分区 创建了一个55G的分区磁盘 1.新建第 ...

  7. 002面试题_Switch...case的数据

    1.byte 2.short 3.int 4.char 5.String 6.枚举

  8. 《Python编程：从入门到实践》第19章笔记：用户/用户注册/身份验证

    接上篇django最基本的一些日常用法,这是第19章笔记,希望在做"动手试一试"的时候可以让自己方便参考. 这一章实现了两个功能: 1.让用户能够添加主题Topic和条目Entry ...

  9. 【ASP.NET Core】选项类的依赖注入

    咱们继续上一个话题.先简单复习一下,根据老周前面文章的介绍,选项类体系的基本套路是通过 IOptionsFactory 来创建选项类实例的.而我们在服务容器(IServiceCollection)上是 ...

  10. 开源一个自动整理B站UWP客户端软件进行批量下载的视频文件的小工具BiliVideosReoganizeHelper​

    ​ 大家都知道B站是一个很受欢迎的视频学习网站,上面有很多无私的up主上传了大量优秀的教学视频,在此向B站致敬,向广大UP主致敬. 有时,我们需要下载收藏一些视频,以防止以后找不到了.那么我们可以用B ...