如何构建对象

Posted 2020-08-23 司徒海棠

一 使用工厂方法构建对象

　　JS中创建对象较老的方式，由于使用该方法无法进行实例归属检测（弊端）。【JS中提供的内置对象都是支持实例归属检测的】

　　

 var person = new Object();
         person.name = "张三";
         person.age = 18;
         person.sex = "男";
         person.eat = function(){
             console.log("吃饭");
         }
         person.say = function(){
             console.log("说话");
         }

 

二 使用单例模式（字面量形式）构建对象

　　{}等同于new Object();书写简单，结构清晰，但同样无法检测实例归属，使用比较广泛。

 var person1 = {
            name:"张三",
             age:18,
             sex:"男",
             eat:function(){
                 console.log("吃饭");
             },
             say:function(){
                 console.log("说话");
             }
         };
         console.log(person1);
         console.log(person1.name);
         person1.eat();

 

三 使用构造函数构建对象

　　使用new操作符调用一个函数时，该函数会变为构造函数。

　　首先，该构造函数内部的this指向会指向自己实例本身（该对象自己）。

　　其次，该构造函数返回值会返回一个对象的实例。默认返回对象实例本身，也可以返回一个自定义对象。

　　　　注意：若书写return,则return后面必须为对象（object类型），如果是基本数据还是返回实例本身。

 var Person = function(){
            console.log(this);
            this.name = "张三";
            this.age = 18;
            this.sex = "男";
            this.eat = function(){
                console.log("吃饭");
            }
            this.say = function(){
                console.log("说话");
            }
            // return {
            //     name:"李四"
            // };
        }

 

使用function关键字定义的函数都是Function对象的实例，只是这个实例化过程 new Function()由浏览器自动处理。

instanceOf操作符可以用来检测一个实例是否来于一个对象，若返回true就是断言成功，false为断言失败。

在javascript原型链的探讨中，我也讲过，构建对象时将方法放于该构造函数的原型对象中，可以解决该对象创建多个实例造成的内存冗余问题。（解决内存冗余的原理就是因为原型对象中的属性可以被多个实例共享）。

静态属性不需要new来实例化，js的静态属性是存在于Function对象实例下的一个属性。使用静态属性的好处是调用时候可以不写new操作符进行实例化了。

 // Person.eat = Person.prototype.eat = function(){
        //     console.log("吃饭");
        // };
        var Person = function(){

        }
        Person.eat = function(){
            console.log("A");
        }
        Person.prototype.eat = function(){
            console.log("B");
        }
        var person = new Person();
        person.eat();   //B
        Person.eat();  //A


        //以上静态属性和动态属性的原理：
        //在解释器内部运行如下
        // var person = new Person();
        // person.eat();
        //
        // var Person = new Function();
        // Person.eat();