美文网首页
JS创建对象

JS创建对象

作者: 李丹linda | 来源:发表于2018-06-24 17:50 被阅读0次

    一、基本方法

    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操作符并把使用的包装函数叫做构造函数之外,各个模式跟工厂模式其实是一模一样的。

    相关文章

      网友评论

          本文标题:JS创建对象

          本文链接:https://www.haomeiwen.com/subject/idmjyftx.html