js中8种创建对象的方式

对象的定义为：“无序属性的集合，其属性可以包含基本值，对象或者函数”

 

1.创建单个对象（对象字面量，构造函数）：

<script type="text/javascript">
    //通过创建phone实例为例子
    //构造函数创建单个对象
        // var phone=new Object();
        // phone.color='black';
        // phone.size=24;
        // phone.getColor=function(){
        //     console.log(this.color);
        // }
    //对象字面量创建单个对象
        var phone={
            //属性
            color:'black',
            size:24,
            //方法
            getColor:function () {
                console.log(this.color);
            }
        }
    //测试
    console.log(phone)
</script>

测试结果为：

2.工厂模式创建多个对象

利：可以创建多个相似对象

弊：所有创建的对象的类型都为Object类型

<script type="text/javascript">
    //工厂模式
        function createPhone(color,size){
            //创建一个Object对象
            var o=new Object();
            //将传入的值赋给这个对象的属性
            o.color=color;
            o.size=size;

            o.getColor=function(){
                console.log(this.color);
            }
            //返回这个对象
            return o;
        }
    //测试
        var phone1=createPhone('black',8);
        var phone2=createPhone('blue',5);
        console.log(phone1,phone2)
</script>

3.构造函数模式创建多个对象

利：自定义构造函数可以将实例构造成一种特定的类型

弊：每创建一个实例，都要创建一个getColor方法

<script type="text/javascript">
    //构造函数模式
        function Phone(color,size){
            this.color=color;
            this.size=size;

            this.getColor=function(){
                console.log(this.color);
            }
        }
        //1.创建一个新对象
        //2.将构造函数的作用域赋给新对象（this指向这个新对象）
        //3.执行构造函数中的代码
        //4.返回新对象
        var phone1=new Phone('black',4);
        var phone2=new Phone('blue',5);
</script>

 

4.原型模式创建多个对象

利：可以让所有对象的实例都共享它所包含的属性和方法

弊：所有实例取得的属性值都是一样的，原型对象对所有实例一视同仁，开放共享

<script type="text/javascript">
    //原型模式
        // function Phone(){};
        // Phone.prototype.color='black';
        // Phone.prototype.size=5;
        // Phone.prototype.getColor=function(){
        //     console.log(this.color);
        // }
        // var phone1=new Phone();
        // console.log(phone1);
    //也可以使用对象字面量写
        function Phone(){}
         Phone.prototype={
            color:'black',
            size:5,

            getColor:function(){
                console.log(this.color)
            }
        }
        var phone1=new Phone();
        console.log(phone1)
</script>

 

5.组合使用构造函数和原型模式创建多个对象

<script type="text/javascript">
    //组合使用构造函数模式和原型模式
        function Phone(color,size){
            this.color=color;
            this.size=size;
        }
        Phone.prototype={
            constructor:Phone,
            getColor:function(){
                console.log(this.color)
            }
        }
        var phone1=new Phone('black',2);
        var phone2=new Phone('blue',5);
        phone1.color='golden';
        console.log(phone1);
        console.log(phone2);

</script>

 

6.动态原型模式创建多个对象

<script type="text/javascript">
    //动态原型模式
        function Phone(color,size){
            this.color=color;
            this.size=size;
            //初次调用构造函数时才会执行下面的代码
            if(typeof this.getColor!='function'){
                //不能使用对象字面量方式创建
                Phone.prototype.getColor=function(){
                    console.log(this.color);
                }
            }
        }
        var phone1=new Phone('black',3);
        console.log(phone1);
        phone1.getColor();
</script>

 

7.寄生构造函数模式创建多个对象

<script type="text/javascript">
    //寄生构造函数模式
        function Phone(color,size){
            var o=new Object();
            o.color=color;
            o.size=size;
            o.getColor=function(){
                console.log(this.color)
            }

            return o;
        }
        var phone1=new Phone('black',3);
        console.log(phone1)
</script>

8.稳妥构造函数模式创建多个对象

<script type="text/javascript">
    //稳妥构造函数模式(稳妥对象是指没有公共属性)
        function Phone(color,size){
            var o=new Object();
            //定义私有变量
            var name='huaiwei';
            //定义私有函数
            var getName=function(){
                console.log(name);
            }

            o.getColor=function(){
                console.log(color);
            }
            return o;
        }
        var phone1=Phone('black',3);
        phone1.getColor();
</script>