JavaScript创建对象的方式

来源：互联网发布：structure软件使用编辑：程序博客网时间：2024/04/30 12:02

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>

0 0