面向面试编程——javascript对象的几种创建方式

时间:2023-03-08 17:19:14
面向面试编程——javascript对象的几种创建方式

javascript对象的几种创建方式

总共有以下几个模式:

1.工厂模式

2.构造函数模式

3.原型模式

4.混合构造函数和原型模式

5.动态原型模式

6.寄生构造函数模式

7.稳妥构造函数模式

1.工厂模式:

<script type="text/javascript">

     function Person(name,sex)
{
var obj=new Object(); obj.name=name;
obj.sex=sex;
obj.getSex=function(){
alert(this.sex);
}
return obj;
}
var person=new Person("张三","男") alert(person.name);
person.getSex();
</script>

缺点:不能识别出对象的类型。

2.构造函数模式

<script type="text/javascript">
function Person(name,sex)
{
this.name=name;
this.sex=sex;
this.getSex=function(){
alert(this.sex);
}
} var person=new Person('张三','男');
alert(person.name);
person.getSex(); </script>

使用构造函数模式可以有三种创造方式:

(1)当作构造函数去使用

   var person=new Person();

(2) 当作普通函数去使用

 var person=Person();但是这种方式默认this是windows,相当于直接在全局范围内定义name,sex属性。

(3)使用call

    var person=new Object();

Person.call(person,"张三","男");

   alert(person.name);  //张三

缺点:由于this指针在对象实例的时候发生改变指向新的实例。这时新实例的方法也要重新创建,如果n个实例就要n次重建相同的方法

3.原型模式

<script type="text/javascript">
function Person()
{ }
Person.prototype={
constructor:Person, //必须设置这个属性,不然就断了与构造函数的联系了。没有实例共享原型的意义了。
/*
现在这个属性是可枚举的,若不想被枚举,则可以使用如下代码
参数:重设构造器的对象,所要设置的属性,可选设置
Object.definePropery(Person.prototype,'constructor',{
enumerable:false,
value:Person
}) */
name:'张三',
sex:'男',
getSex:function(){
alert(this.sex);
}
} var person=new Person();
alert(person.name);
person.getSex(); </script>

调用方法的过程:先看实例中有没有,有调之,无追踪到原型,有调之,无出错,调用失败。

缺点:这种纯原型的模式问题也很明显,所有的属性,方法和变量都是共享的,一旦修改一个全部都会受影响,不能让对象具体化。

4.混合构造和原型模式

<script type="text/javascript">
function Person(name,sex)
{
this.name=name;
this.sex=sex;
}
Person.prototype={
constructor:Person, //必须设置这个属性,不然就断了与构造函数的联系了。没有实例共享原型的意义了。
/*
现在这个属性是可枚举的,若不想被枚举,则可以使用如下代码
参数:重设构造器的对象,所要设置的属性,可选设置
Object.definePropery(Person.prototype,'constructor',{
enumerable:false,
value:Person
}) */ getSex:function(){
alert(this.sex);
}
} var person=new Person("张三","男");
alert(person.name);
person.getSex(); </script>

推荐:应用最广泛。

5.动态原型模式

<script type="text/javascript">
function Person(name,sex)
{
this.name=name;
this.sex=sex; //动态原型方法 只会执行一次
if(typeof this.getSex!='function')
{
Person.prototype.getSex=function(){
alert(this.sex);
}
}
} var person=new Person("张三","男");
alert(person.name);
person.getSex(); </script>

推荐

5.寄生构造函数模式

这种模式的基本思想是创建一个函数,该函数的作用仅仅是封闭创建对象的代码,然后再返回新创建的对象.

假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array构造函数,可以使用这个模式。

function SpecialArray() {
//创建数组
var values = new Array(); // 添加值
values.push.apply(values, arguments); // 添加方法
values.toPipedString = function() {
return this.join('|');
}; // 返回数组
return values;
} var colors = new SpecialArray('red', 'blue', 'green');
alert(colors.toPipedString());//red|blue|green;

在这个例子中,我们创建了一个名叫SpecialArray的构造函数。在这个函数内部,首先创建了一个数组,然后push()方法(用构造函数接收到的所有参数)初始化了数组的值。随后,又给数组实例添加了一个toPipedString()方法,该方法返回以竖线分割的数组值。最后,将数组以函数值的形式返回。接着,我们调用了SpecialArray构造函数,向其中传入了用于初始化数组的值,此后调用了toPipedString()方法。

关于寄生构造函数模式,有一点需要说明:首先,返回的对象与构造函数或构造函数的原型属性之间没有关系;也就是说,构造函数返回的对象与在构造函数外部创建 对象没有什么不同。为此,不能依赖instranceof操作符来确定对象类型。由于存在上述问题,建议在可以使用其他模式的情况下,不要使用这种模式。

6.稳妥构造函数模式

<script type="text/javascript">
function Person(name,sex)
{
var object=new Object();
var name=name;
var sex=sex;
object.getSex=function(){
alert(sex);
}
return object;
} var person=new Person("张三","男");
alert(person.name); //undefined
person.getSex(); //男 </script>

没有公共属性,其他方法也不引用this对象,只能通过存取器获得变量的值,适合对安全性要求很高的程序。

还有不能被称为模式的方法,只能实例单个对象:

1.简单对象字面量

//创建一个简单对象字面量
var person = {}; // 加入属性和方法
person.name = 'ifcode';
person.setName = function(theName) {
person.name = theName;
}

非常简单,但一般情况下不推荐这种方法。JS good parts书中认为这种写法可读性不够强,作者推荐的是后面一种写法。

2.嵌套对象字面量

var person = {
name: 'ifcode',
setName: function(theName) {
this.name = theName;
}
}
JS good parts中推荐这种写法: