<!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. MySql中数据表增加字段很慢怎么办

    正确的做法是这样,对于数据量很大的表,需要添加所有或者修改字段的做法是如下: 1.先创建一张一样的表 create table new_tb like tb_old; 2.修改创建表的字段 alter ...

  2. Tapdata Cloud 版本上新！率先支持数据校验、类型映射等6大新功能

    Tapdata Cloud cloud.tapdata.net Tapdata Cloud 是国内首家异构数据库实时同步云平台,目前支持 Oracle.MySQL.PG.SQL Server.Mong ...

  3. 字符输出流_Writer类&FileWriter类介绍和字符输出流的基本使用_写出单个字符到文件

    java.io.Writer:字符输出流,是所有字符输出流的最顶层的父类,是一个抽象类 共性的成员方法: - void write(int c) 写入单个字符 - void write(char[] ...

  4. OutputStreamWriter介绍&代码实现和InputStreamReader介绍&代码实现

    java.io.OutputStreamWriter extends Writer OutputStreamWriter: 是字符流通向字节流的桥梁:可使用指定的 charset 将要写入流中的字符编 ...

  5. 【主流技术】Redis 在 Spring 框架中的实践

    前言 在Java Spring 项目中,数据与远程数据库的频繁交互对服务器的内存消耗比较大,而 Redis 的特性可以有效解决这样的问题. Redis 的几个特性: Redis 以内存作为数据存储介质 ...

  6. 攻防世界MISC—进阶区32—37

    32.normal_png 得到一张png,扔进kali中binwalk 和 pngcheck一下,发现CRC报错 尝试修改图片高度,我是把height的2改为4,得到flag 33.很普通的数独 得 ...

  7. MoCo V1：视觉领域也能自监督啦

    何凯明从 CVPR 2020 上发表的 MoCo V1(Momentum Contrast for Unsupervised Visual Representation Learning),到前几天挂 ...

  8. 2022-7-18 第五组 pan 面向对象

    面向过程 向过程就是:面向过程,其实就是面向着具体的每一个步骤和过程,把每一个步骤和过程完成,然后由这些功能方法相互调用,完成需求. 面向对象 什么是面向对象: 面向对象思想就是不断的创建对象,使用对 ...

  9. 从零开始Blazor Server(2)--整合数据库

    开篇 上一篇文章我们留了个尾巴,没有把freesql整合进去,这篇文章我们来整合. 目前的思路呢,是做一个简单的四不像的RABC,也有用户.角色. 权限三部分. 但是其中每个用户只有一个角色,即用户和 ...

  10. 题解【洛谷 P1246 编码】

    题目 编码工作常被运用于密文或压缩传输.这里我们用一种最简单的编码方式进行编码:把一些有规律的单词编成数宇. 字母表中共有 \(26\) 个字母 \(\{\tt a,b,\cdots,z\}\),这些 ...