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还是Dogconsole.log(typeof obj1);//Objectconsole.log(typeof obj2);//Objectconsole.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>

JavaScript创建对象的方式相关推荐

JavaScript创建对象的6种方式
JavaScript创建对象简单的说,无非就是使用内置对象(Object)或各种自定义对象,当然还可以用JSON,但写法有很多种,也能混合使用. 1.对象字面量的方式 person = {name : ...
javascript中对象、JSON格式数据、创建对象的方式、数据类型分类及特点
对象对象指:具体的一个实物,javascript中对象是指一组没有顺序的属性和方法的集合,所有的事物都是对象,例如:函数,数组,字符串等.属性指事物的特征,一般为名词表示:方法指对象的行为,一般用动 ...
JavaScript创建对象的三种方式之利用构造函数创建对象及使用方法(3)
(1.)我们为什么需要构造函数: 因为前面两种创建对象的方式一次只能创建一个对象. (2.)什么是构造函数: 构造函数:就是把我们对象里面的一些相同的属性和方法抽象出来封装到函数里面 (3.)利用构造 ...
Javascript创建对象的七种常用方式
js常用的几种创建对象的方式有: 1.{} 2.new Object() 3.使用字面量 4.工厂模式 5.构造函数模式(constructor) 6.原型模式(prototype) 7.构造函数+原 ...
Javascript创建对象几种方法解析
Javascript创建对象几种方法解析 Javascript面向对象编程一直是面试中的重点,将自己的理解整理如下,主要参考<Javascript高级程序设计第三版>,欢迎批评指正. 通 ...
javascript创建对象方法总结
javascript创建对象方法的总结. 对象是什么? js中对象是"无序属性的集合,其属性可以包含基本值,对象或者函数",简单来说,它就是一个名值对,有key和value,val ...
JavaScript创建对象的7大模式
在JavaScript中,创建对象有7大模式,分别是工厂模式.构造函数模式.原型模式.组合使用构造函数模式和原型模式.动态原型模式.寄生构造函数模式.稳妥构造函数模式.下面针对这7种模式展开讲解. 工 ...
web前端（13）—— 了解JavaScript，JavaScript的引入方式
从本篇博文开始,将进入web前端方便最关键最重要的部分--javascript,学到后面你就知道它真的太重要了什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...
java中创建对象的方式
Java中有5种创建对象的方式,下面给出它们的例子还有它们的字节码使用new关键字 } → 调用了构造函数使用Class类的newInstance方法 } → 调用了构造函数使用Construc ...
创建对象的方式以及call,apply,bind的区别
创建对象的方式有四种 1.直接量 var obj={ 属性名:属性方法名:function(){} } 2.通过构造函数创建对象,这样能够批量创建多个具有相同属性的子对象(顺便介绍call,appl ...

JavaScript创建对象的方式

JavaScript创建对象的方式相关推荐

最新文章

热门文章