javascript代码实例教程-javascript中创建对象的几种方式

发布时间:2019-02-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript中创建对象的几种方式脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复。在此,我总结了几种创建对象的模式。本文是在我阅读《javascript高级程序设计》后总结而来。

 

1.工厂模式

这种模式通过用函数来减少代码重复,利用函数的参数作为接口,与对象的属性与方法对接。

 

复制代码

function createfactory(name,age){

    VAR obj = new Object();

    obj.name = name;

    obj.age = age;

    return obj;

}

var test1 = createfactory('aaa',18);

var test2 = createfactory('bbb',50);

复制代码

这样就完成了简单的代码复用,实现了代码重复,但是无法确定所创建对象的类型。

 

构造函数模式

我们都知道Object,Array等原生的构造函数可以用来创建对象。构造函数模式和此类似,通过自定义创建构造函数,来创建新类型的对象。

 

复制代码

function Createfunction(name,age,){

    this.name = name;

    this. age = gae;

    this.sayname = function(){

        alert(this.name);

    }

}

var test1 = new Createfunction('aaa',20);

var test2 = new Createfunction('bbb',50);

复制代码

按照惯例,构造函数应以一个大写字母开头。这种模式可以将新对象的类型确定下来。然后这种模式依旧存在问题,test1和test2两个实例中都有 sayname方法,在javascript中函数就是对象,因此在创建test1和test2的同时也实例化了两次函数对象,相当于这样:

 

复制代码

###原型模式

每个函数都有一个PRototyPE属性,指向它的原型对象。原型对象可以让所有对象实例共享其中的属性和方法。看下面的例子。

```javascript

function CF(){}

Cf.prototype.name = "aaa";

Cf.prototype.age = 29;

Cf.prototype.sayname = function(){

    alert(this.name);

    }

var test1 = new Createfunction();

var test2 = new Createfunction();

复制代码

上面这种方法通过将属性和方法添加到了构造函数的原型对象中,这样新对象的所有实例会共享这些属性和方法。

为了进一步减少代码量,有人提出了重写原型对象的方法。看下面的例子。

 

复制代码

function Cf(){}

Cf.prototype = {

    name = "aaa";

    age = 29;

    sayname = function(){

        alert(this.name);

    }

}

var test1 = new Createfunction();

var test2 = new Createfunction();

复制代码

这种方法通过重写原型对象进一步减少代码重复,然而这样的写法带来了新的问题。

在简单的通过原型模式创建对象时,原型对象的动态变化会实时的反应 在实例中,因为实例中的[[Prototype]]属性是指向原型对象的,这样对于调用属性和方法的向上搜索过程,会搜寻到原型对象中的属性和方法。而当 先实例化一个对象后,再重写原型对象,实例中的[[Prototype]]不再指向新的原型对象,因而导致在调用的过程中无法向上搜索到新的原型对象,所 以在使用重写原型对象方法的时候,一定要先重写对象,再创建实例。

原型对象模式依旧存在缺点,虽然它省略了为函数传参这一环节,但是实例默认情况下都取得相同的属性值。此外对于包含引用类型的属性来说,当对实例属性修改会导致原型对象中属性的同步变化。这样,这种变化也就实时的反应在了所有的实例中。显然这不是我们想要的结果。

联系前面说的构造函数模式,我们可以通过组合使用构造函数模式和原型模式来解决这一问题。

 

复制代码

function Person(name, age, job){

            this.name = name;

            this.age = age;

            this.job = job;

            this.friends = ["Shelby", "Court"];

        }

        

        Person.prototype = {

            constructor: Person,

            sayName : function () {

                alert(this.name);

            }

        };

        

        var person1 = new Person("Nicholas", 29, "Software Engineer");

        var person2 = new Person("Greg", 27, "Doctor");

复制代码

在构造函数中定义实例属性,在原型模式中定义方法和共享的属性。这样,每个实例都有自己的实例属性的副本,同时也有共享的属性和方法,节省了内存,也可以通过传参来定义实例属性。

 

动态原型模式

动态原型模式其实相当于原型模式的一个变种,将所有的信息都封装在构造函数中,仅在必要的情况下初始化原型对象。

 

复制代码

function Person(name, age, job){

        

            //properties

            this.name = name;

            this.age = age;

            this.job = job;

            

            //methods

            if (typeof this.sayName != "function"){

            

                Person.prototype.sayName = function(){

                    alert(this.name);

                };

                

            }

        }

 

        var friend = new Person("Nicholas", 29, "Software Engineer");

        friend.sayName();

复制代码

在这个构造函数中通过判断属性是否存在来决定是否对原型对象初始化。这样只有在第一次实例化对象时才会对原型对象初始化,可以说是十分的完美了。

 

寄生构造函数模式

当我们想为一个已经存在的构造函数创建一个具有额外方法的构造函数,由于不能重写存在的构造函数,这时就可以使用这种模式了。看例子。

 

复制代码

       function SpecialArray(){       

 

            //create the array

            var values = new Array();

            

            //add the values

            values.push.apply(values, arguments);

            

            //assign the method

            values.toPipedString = function(){

                return this.join("|");

            };

            

            //return IT

            return values;        

        }

        

        var colors = new SpecialArray("red", "blue", "green");

复制代码

这个例子中,创建了一个具有额外方法的数组,具有额外的特殊方法,在不修改数组构造函数的前提下,创建了一个新的构造函数。不过寄生构造函数模式返回的对象与构造函数的原型对象没有关系。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-javascript中创建对象的几种方式全部内容,希望文章能够帮你解决javascript代码实例教程-javascript中创建对象的几种方式所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。