js工厂模式和构造函数

<!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工厂模式和构造函数

最新文章

热门文章