您的位置：首页 > Web前端 > JavaScript

javascript对象的几种模式创建方式

2018-03-07 20:30 513 查看

1、工厂模式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

var gong =new Object();
gong.name="yangyang";
gong.age=20;
gong.work=function(){
alert("我是"+gong.name+",actor");
}
gong.work();

</script></head><body></body></html>在使用工厂模式创建对象的时候，我们都可以注意到，在createPerson函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。

2、构造函数模式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.say=function(){
alert("我叫"+this.name+",我喜欢"+this.job+",吃");
};
}
var yang=new Person('yangyuying',30,'singer');
yang.say();
</script>
</head>
<body>
</body>
</html>

对比工厂模式，我们可以发现以下区别：
1.没有显示地创建对象
2.直接将属性和方法赋给了this对象
3.没有return语句
4.终于可以识别的对象的类型
同时我们也应该明白，按照惯例，构造函数始终要应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。
那么构造函数确实挺好用的，但是它也有它的缺点：
就是每个方法都要在每个实例上重新创建一遍，方法指的就是我们在对象里面定义的函数。如果方法的数量很多，就会占用很多不必要的内存。
3、原型模式<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script>function actor(){}
actor.prototype.name="杨洋";
actor.prototype.work=function(){
alert(this.name+"是演员");
}
var yang=new actor();
yang.work();
</script>
</head>
<body>
</body>
</html>使用原型创建对象的方式，可以让所有对象实例共享它所包含的属性和方法。

当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。
4、混合构造函数和原型模式<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script>function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
var camry =new Car("凯美瑞",27);
camry.sell();
</script>
</head>
<body>
</body>
</html>这时候我们就可以使用构造函数模式与原型模式结合的方式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性

5、动态原型模式<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script>function Car(name,price){
this.name=name;
this.price=price;
if(typeof Car.sell=="undefined"){
Car.prototype.sell=function(){
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
Car.sell=true;
}
}
var camry =new Car("凯美瑞",27);
camry.sell();
</script>
</head>
<body>
</body>
</html>动态原型模式，可以看作是混合模式的一种特例

6、寄生构造函数模式<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script>function SpecialArray(){
var array = new Array();
array.push.apply(array,arguments);
array.toPipedString = function(){
return this.join("|");
};
return array;
}
var colors = new SpecialArray("red","green","pink");
alert(colors.toPipedString());
alert(colors instanceof SpecialArray);
</script>
</head>
<body>
</body>
</html>我们知道当我们自定义一个构造函数后，使用new的方式来创建一个对象时，默认会返回一个新对象实例，构造函数中是没有return 语句的。而这里所谓的寄生构造函数，基本思想是创建一个函数，这个函数的作用仅仅是为了某一个特定的功能而添加一些代码，最后再将这个对象返回，除了使用了new操作符并把包装的函数叫做构造函数外，这个模式跟工厂模式没有任何区别。另外，这个SpecialArray()返回的对象，与SpecialArray()构造函数或者与构造函数的原型对象之间没有任何关系，就像你在SpecialArray()外面创建的其他对象一样，所以如果用instanceof操作符来检测的话，结果只能是false咯。所以这是它的问题
7、稳妥构造函数模式
先说稳妥二字，别人定义了一个稳妥对象，即没有公共属性，而且其方法也不引用this对象，这种模式适应于一些安全环境中（禁止使用this和new），或防止数据被其他应用程序改动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script>function Person(name,age,gender){
var obj = new Object();
obj.sayName = function(){
alert(name);
};
return obj;
}
var person = Person("Stan",0000,"male"); // 这里没有使用new操作符
person.sayName();
alert(person instanceof Person);
</script>
</head>
<body>
</body>
</html>这里person中保存了一个稳妥对象，除了调用sayName()方法外，没有别的方式可以访问其数据成员。即使有其他代码会给这个对象添加方法或属性，但也不可能有别的办法访问传入到构造函数中的原始数据。同样与寄生函数模式类似，使用稳妥构造函数模式创建的对象与构造函数之间也没有任何关系.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航