<!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. JDBC: ThreadLocal 类

    1.ThreadLocal ThreadLocal用于保存某个线程共享变量.在Java中,每个线程对象都有一个ThreadLocal<ThreadLocal,Object>,其中key就是 ...

  2. Effective C++阅读笔记 较详细 复杂条款带样例

    一.让自己习惯C++ 条款01:视C++为一个语言联邦 C++可视为: C:以C为基础. 面向对象的C++:添加面向对象特性. 模板C++:泛型编程概念,使用模板. STL:使用STL的容器.迭代器. ...

  3. 👨‍💻Mybatis源码我搞透了，面试来问吧！写了134个源码类，1.03万行代码！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言:手撸一万行! 完结撒花:4个月.20章.134个类.1.03万行代码! 22年3月初 ...

  4. vue 调用nginx服务跨越的问题

    server { listen 80; server_name api.xxxx.com; add_header Access-Control-Allow-Origin '*' ; proxy_set ...

  5. 2022年windows的Visual Studio 安装后初始配置

    目录 前言 1.开发环境设置,修改存储空间 打开编译器,选择工具-->导入和导出设置-->重置所有设置-->下一步 修改盘符-->下一步->选择环境->完成 2.主 ...

  6. MPI学习笔记（二）：矩阵相乘的两种实现方法

    mpi矩阵乘法(C=αAB+βC) 最近领导让把之前安装的软件lapack.blas里的dgemm运算提取出来独立作为一套程序,然后把这段程序改为并行的,并测试一下进程规模扩展到128时的并行效率.  ...

  7. 在.NET 6.0中配置WebHostBuilder

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 在阅读第4章"使用Kestrel配置和定制HTTPS"时,您可 ...

  8. Dubbo源码(五) - 服务目录

    前言 本文基于Dubbo2.6.x版本,中文注释版源码已上传github:xiaoguyu/dubbo 今天,来聊聊Dubbo的服务目录(Directory).下面是官方文档对服务目录的定义: 服务目 ...

  9. C#里如何简单的校验时间格式

    前言: 晚上打算睡觉的时候,群里反馈订单接收失败,开工排查问题,日志显示验签失败,发现一个蛮有意思的BUG,总算有了一个写作的素材 场景描述 本次的场景属于比较常见的收单API,对第三方的订单进行签名 ...

  10. Javaweb05-Ajax

    1.基于jQuery的Ajax 1.1 基本Ajax 参数 说明 url 请求地址 type 请求类型 data 请求参数 dataType 返回参数 success 成功处理函数 error 错误处 ...