JavaScript创建对象的方式

1 、字面量方式

var 对象 = {
        属性名01：属性值，
        属性名02：属性值，
        方法01：function（）{函数体}
    }

<script>
    var book1 = {
        name:"悟空传",
        author:"今何在",
        press:"湖南文艺出版社",
        price:"28.00",
        logDes:function(){
            console.log("书名：" + this.name + "作者：" + this.author);
        }
    }
    var book2 = {
        name:"什么是批判",
        author:"福柯",
        press:"北京大学出版社",
        price:"52.00",
        logDes:function(){
            console.log("书名：" + this.name + "作者：" + this.author);
        }
    }
    console.log(book1.name);//打印属性
    boo1.logDes();//调用方法
</script>

适用场合：只需简单创建单个对象
存在的问题：如果需要创建多个相似的对象，那么代码中冗余度太高（重复的代码太多）

2、内置的构造函数方式创建对象

内置的构造函数有：Object Function (String Number Boolean) Array Date ....

<script>
    //01 创建空的对象
    var book1 = new Object();
    //02 设置属性
    book1.name = "花田半亩";
    book1.author = "田维";
    book1.price = "40.01";

    //03 设置方法
    book1.logDes = function (){
        console.log("书名：" + this.name);
    }
    //再创建一个对象
    var book2 = new Object();
    book2.name = "三国演义";
    book2.author = "罗贯中";
    book2.price = "34.01";
    book2.logDes = function (){
        console.log("书名：" + this.name);
    }
    console.log(book1);//打印对象
    console.log(book2);

</script>

存在问题： 如果需要创建多个相似的对象，那么代码中冗余度太高（重复的代码太多）

3、简单工厂函数创建对象

<script>
        //01 提供函数（工厂函数）
    function createBook(name,author){
        //02 创建空的对象
        var o = new Object();
        //03 设置属性和方法
        o.name = name;
        o.author = author;
        o.logDes = function(){
            console.log("作者是：" + this.author);
        }

        //04 返回新创建的对象
        return o;
    }

    //05 创建对象
    var book1 = createBook("小学数学","教育部");
    var book2 = createBook("高等数学","燕子");
    console.log(book1);
    console.log(book2);
</script>

存在问题：如果创建多个不同类型的对象，那么我们无法分辨是什么类型的 如下：

<script>
    function createPerson(name,age){
        var o = new Object();
        o.name = name;
        o.age = age;
        return o;
    }

    function createDog(name,age)
    {
        var o = new Object();
        o.name = name;
        o.age = age;
        return o;
    }

    //创建具体的对象
    var obj1 = createPerson("张三",88);
    var obj2 = createDog("物理韬韬",13);
    console.log(obj1);
    console.log(obj2);

    //typeof 判断类型 打印结果相同因此无法判断是什么类型 Person还是Dog
    console.log(typeof obj1);//Object
    console.log(typeof obj2);//Object
    console.log(obj1.constructor);  //function Object()
    console.log(obj2.constructor);  //function Object()

</script>

4、自定义构造函数创建对象

构造函数简单介绍：
    作用：对对象进行一些初始化的设置
    和普通函数区别：（01）首字母大写（02）调用方式不一样 构造函数要和new配合使用

<script>
       //001 提供一个构造函数 
    function Person(name,age){

        // 默认会创建对象 （注意下一行是默认行为 不是真正代码）
        //var o = new Object();

        //默认会赋值给this （注意下一行是默认行为 不是真正代码）
        //this = o;

        // 002 通过this指针来设置属性和方法
        this.name = name;
        this.age = age;
        this.showName = function(){
            console.log(this.name);
        };
        this.showAge = function(){
            console.log(this.age);
        }

        //默认返回（注意下一行是默认行为 不是真正代码）
        //return this;
    }

    //003 使用new操作符来创建对象
    var p1 = new Person("张三",20);
    var p2 = new Person("张老汉",200);
    console.log(p1);
    console.log(p2);
</script>

自定义构造函数方式创建对象内部的实现细节：
    01 我们在使用new关键字调用构造哈函数的时候，内部 默认会创建一个空的对象
    02 默认会把这个空的对象赋值给this
    03 通过this来设置新对象的属性和方法，在构造哈函数的最后， 默认会把新创建的对象返回


自定义构造函数和工厂函数对比
    001 函数的名称不一样，构造函数首字母大写
    002 自定义构造函数创建方式内部会自动的创建空对象并且赋值给this
    003 默认会自动返回新创建的对象
存在问题及解决方法如下：

<script>
    var showName = function(){//如果把此方法写在构造函数内，那么每创建一个对象，内部都会声明一个showName函数，占用内存，因此这里将其写为一个全局函数。

            console.log("姓名：");
    }

    function Person(name,age){
        this.name = name;
        this.age = age;
        this.showName = showName;
    }

    //创建对象
    var p1 = new Person("张小花",18);
    var p2 = new Person("张全蛋",99);
    p1.showName();
    p2.showName();

    console.log(p1.showName == p2.showName);  //true 此时都指向全局的showName函数，解决了占用内存的问题
</script>