JS创建对象

一、基本方法

1.字面量:var o = {};

2.构造函数:var o = new Object();

二、工厂模式

1.核心:用函数封装,以特定接口创建对象的细节。

2.

    <script type="text/javascript">
        function CreatePerson(name,age,job){
            var o = new Object();
            o.name = name;
            o.age = age;
            o.job = job;
            o.sayName = function(){
                alert(this.name);
            };
            return o;
        }
        var person1 = CreatePerson("Tom","24","Teacher");       
        var person2 = CreatePerson("kity","26","Software Engineer");
    </script>

3.缺点:

(1)无法识别对象的类型。

三、构造函数模式

1.核心:写一个构造函数,并通过new方式来创建对象,可以带参。

2.

    <script type="text/javascript">
        function Person(name,age,job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = function(){
                alert(this.name);
            }
        }

        var person1 = new Person("Tom","24","Teacher");
        var person2 = new Person("kity","26","Software Engineer");      
    </script>

3.与工厂模式相比

(1)没有显式的创建对象;
(2)直接将属性和方法赋值给了this对象;
(3)没有return语句。

4.用new操作符来创建新实例,4个步骤:

(1)创建一个新对象;
(2)将构造函数的作用域赋给新对象(即this指向新对象);
(3)执行构造函数中的代码;
(4)返回新对象。

5.缺点:

(1)每个实例都创建一个方法;
(2)不同实例上的同名函数是不相等的。

        console.log(person1.sayName === person2.sayName)            //false 

四、原型模式

1.核心:我们创建的每一个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,

而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

2.

    <script type="text/javascript">
        function Person(){
        }
        Person.prototype.name = "Tom";
        Person.prototype.age = 24;
        Person.prototype.job = "Teacher";
        Person.prototype.sayName = function(){
            alert(this.name);
        }

        var person1 = new Person();
        person1.sayName();                  //Tom
        var person2 = new Person();
        person2.sayName();                  //Tom

        alert(person1.sayName === person2.sayName);     //true
    </script>

3.优点:让所有对象共享原型的属性和方法。

4.缺点:

(1)创建函数不能传参,实例在默认情况下取得相同的属性值。
(2)共享引用存在问题;

    <script type="text/javascript">
        function Person(){
        }
        Person.prototype.name = "Tom";
        Person.prototype.age = 24;
        Person.prototype.job = "Teacher";
        Person.prototype.friend = ["kity","John"];
        Person.prototype.sayName = function(){
            alert(this.name);
        }

        var person1 = new Person();
        console.log(person1.friend);                    //Kity,John
        var person2 = new Person();
        console.log(person2.friend);                    //Kity,John

        person1.friend.push("Lyda");
        console.log(person1.friend);                    //Kity,John,lyda
        console.log(person2.friend);                    //Kity,John,lyda

    </script>

五、组合使用构造函数模式和原型模式

1.核心:用构造函数模式定义实例的属性,用原型模式定义方法和共享的属性。

2.

    <script type="text/javascript">
        function Person(name,age,job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.friend = ["Kity","John"];
        }
        Person.prototype.sayName = function(){
            alert(this.name);
        }

        var person1 = new Person("Tom","24","Teacher");
        person1.sayName();                  //Tom
        var person2 = new Person("Aimi","26","Software Engineer");
        person2.sayName();                  //Aimi

        alert(person1.sayName === person2.sayName);     //true

        console.log(person1.friend);                    //Kity,John
        console.log(person2.friend);                    //Kity,John

        person1.friend.push("Lyda");
        console.log(person1.friend);                    //Kity,John,lyda
        console.log(person2.friend);                    //Kity,John
        alert(person1.sayName === person2.sayName);     //false
    </script>

六、寄生构造函数模式

1.核心:创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后返回新创建的对象。

2.

    <script type="text/javascript">
        function Person(name,age,job){
            var o = new Object();
            o.name = name;
            o.age = age;
            o.job = job;
            o.sayName = function(){
                alert(this.name);
            };
            return o;
        }
        var person1 = new Person("Tom","24","Teacher"); 
    </script>

3.特点:

除了使用new操作符并把使用的包装函数叫做构造函数之外,各个模式跟工厂模式其实是一模一样的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容