创建对象的几种方式
① 字面量的方式创建对象(@)
② 内置构造函数的方式来创建对象
③ 简单工厂函数的方式来创建对象
④ 自定义构造函数的方式来创建对象
-
字面量方式创建对象
基本写法
var book1 = {
name:"声名狼藉者的生活",
price:42.00,
author:"福柯",
press:"北京大学出版社",
read:function () {
console.log("我的书名为:声名狼藉者的的生活,作者为福柯....");
}
};
-
①字面量的方式来创建对象示例
<script>
var book1 = {
name:"声名狼藉者的生活",
price:42.00,
author:"福柯",
press:"北京大学出版社",
read:function () {
console.log("我的书名为:声名狼藉者的的生活,作者为福柯....");
}
};
var book2 = {
name:"人性的枷锁",
price:49.00,
author:"毛姆",
press:"华东师范大学出版社",
read:function () {
console.log("我的书名为:华东师范大学出版社,作者为毛姆....");
}
};
var book3 = {
name:"悟空传",
price:28.00,
author:"今何在",
press:"湖南文艺出版社",
read:function () {
console.log("我的书名为:悟空传,作者为今何在....");
}
};
//02 打印对象的属性,调用对象的方法
console.log(book1.name);
console.log(book1.author);
console.log(book1.price);
console.log(book1.press);
book1.read();
console.log("_______________");
console.log(book2.name);
console.log(book2.author);
console.log(book2.price);
console.log(book2.press);
book2.read();
console.log("_______________");
console.log(book3.name);
console.log(book3.author);
console.log(book3.price);
console.log(book3.press);
book1.read();
console.log("_______________");
</script>
03 思考:以字面量的方式创建对象有哪些利弊?
存在的问题
[01] 代码复用性差
[02] 如果要创建大量的同类型对象，则需要些大量重复性代码
-
JS中有哪些内置构造函数
String
Number
Boolean
注意：(区别于string number boolean)
Date
Array
Function
Object
RegExp
基本写法
var book1 = new Object();
book1.name = "声名狼藉者的生活";
book1.price = 42.00;
book1.author = "福柯";
book1.press = "北京大学出版社";
book1.read = function () {
console.log("我的书名为:声名狼藉者的的生活,作者为福柯....");
};
问题
1 创建的对象无法复用,复用性差
02 如果需要创建多个同类型的对象,如(书籍)则需要写大量重复的代码,代码的冗余度高
-
②内置构造函数的方式来创建对象
<script>
//01 使用内置构造函数的方式来创建对象
var book1 = new Object();
book1.name = "声名狼藉者的生活";
book1.price = 42.00;
book1.author = "福柯";
book1.press = "北京大学出版社";
book1.read = function () {
console.log("我的书名为:声名狼藉者的的生活,作者为福柯....");
};
var book2 = new Object();
book2.name = "人性的枷锁";
book2.price = 49.00;
book2.author = "毛姆";
book2.press = "华东师范大学出版社";
book2.read = function () {
console.log("我的书名为:人性的枷锁,作者为毛姆....");
};
var book3 = new Object();
book3.name = "悟空传";
book3.price = 28.00;
book3.author = "今何在";
book3.press = "湖南文艺出版社";
book3.read = function () {
console.log("我的书名为:悟空传,作者为今何在....");
};
//02 打印对象的属性,调用对象的方法
console.log(book1.name);
console.log(book1.author);
console.log(book1.price);
console.log(book1.press);
book1.read();
console.log("_______________");
console.log(book2.name);
console.log(book2.author);
console.log(book2.price);
console.log(book2.press);
book2.read();
console.log("_______________");
console.log(book3.name);
console.log(book3.author);
console.log(book3.price);
console.log(book3.press);
book3.read();
console.log("_______________");
思考:能够把创建同类型对象的过程封装起来,提高代码的复用性?
</script>
问题:使用内置构造函数的方式和字面量的方式来创建对象差不多,都存在以下问题:
01 创建的对象无法复用,复用性差
02 如果需要创建多个同类型的对象,如(书籍)则需要写大量重复的代码,代码的冗余度高
-
③ 简单工厂函数的方式来创建对象
简单工厂函数的方式来创建对象 (本质就是对之前创建对象的过程进行封装)
<script>
//01 封装创建对象的过程
function createBook () {
var book = new Object();
book.name = "声名狼藉者的生活";
book.price = 42.00;
book.author = "福柯";
book.press = "北京大学出版社";
book.read = function () {
console.log("我的书名为:声名狼藉者的的生活,作者为福柯....");
};
return book;
}
//02 使用封装好的工厂函数来创建对象
var book1 = createBook();
var book2 = createBook();
//03 打印对象的属性并调用对象的方法
console.log(book1.name);
console.log(book2.name);
book1.read();
book2.read();
console.log("_________________________");
//04 说明:以上代码确实能够快速简单的创建出新的对象,但是创建出来的对象内部的属性和方法相同,这并不是我们想要的。
//05 对上面的工厂函数进行改进
//改进思路:封装不变的部分,提取变化的部分作为参数
function createBookNew (name,price,author,press) {
var book = new Object();
book.name = name;
book.price = price;
book.author = author;
book.press = press;
book.read = function () {
console.log("我的书名为:"+book.name+",作者为"+book.author+"....");
};
return book;
}
//06 使用新的工厂函数来创建对象
var book1 = createBookNew("声名狼藉者的的生活","42.00","福柯","北京大学出版社");
var book2 = createBookNew("人性的枷锁","49.00","毛姆","华东师范大学出版社");
var book3 = createBookNew("悟空传","28.00","今何在","湖南文艺出版社");
//07 打印对象的属性,调用对象的方法
console.log(book1.name);
console.log(book2.name);
console.log(book3.name);
book1.read();
book2.read();
book3.read();
</script>
工厂函数说明
工厂函数方式创建对象其本质是对内置构造函数创建对象的过程进行了封装
适用于大规模“批量生产”同类型的对象
function createBook (name,price,author,press) {
//001 参数 = 原料
var book = new Object();
//002 创建对象并设置对象的属性和方法 = 对原料进行加工
book.name = name;
book.price = price;
book.author = author;
book.press = press;
book.read = function () {
console.log("我的书名为:"+book.name+",作者为"+book.author+"....");
};
//003 把处理好的对象返回给我们 == 产品出厂
return book;
}
-
封装思路
使用函数把固定不变的部分封装起来，变化的部分提取为函数的参数
-
工厂函数创建对象的实现过程
① 提供一个创建对象的函数（参数）
② 在该函数内部使用new 关键字和Object构造器创建对象
③ 设置对象的属性
④ 设置对象的方法
⑤ 返回对象
-
④ 自定义构造函数的方式来创建对象
<script>
//00 回顾:简单工厂函数创建对象
function createBook (name,price,author,press) {
//001 参数 = 原料
var book = new Object();
//002 创建对象并设置对象的属性和方法 = 对原料进行加工
book.name = name;
book.price = price;
book.author = author;
book.press = press;
book.read = function () {
console.log("我的书名为:"+book.name+",作者为"+book.author+"....");
};
//003 把处理好的对象返回给我们 == 产品出厂
return book;
}
var book1 = createBook("声名狼藉者的的生活","42.00","福柯","北京大学出版社");
var book2 = createBook("人性的枷锁","49.00","毛姆","华东师范大学出版社");
var book3 = createBook("悟空传","28.00","今何在","湖南文艺出版社");
//01 相关说明
//001 构造函数和普通函数的区别:首字母大写
//002 构造函数的作用:用于完成对象的初始化
//003 new关键字的作用:创建对象
//02 自定义构造函数创建对象的基本写法
function CreateBook (name,price,author,press) {
//var book = new Object(); //外部使用new关键字,则内部会自动创建对象并赋值给this
this.name = name;
this.price = price;
this.author = author;
this.press = press;
this.read = function () {
console.log("我的书名为:"+this.name+",作者为"+this.author+"....");
};
//return book; //创建出来的对象默认自动返回
}
var b1 = new CreateBook("声名狼藉者的的生活","42.00","福柯","北京大学出版社");
var b2 = new CreateBook("人性的枷锁","49.00","毛姆","华东师范大学出版社");
var b3 = new CreateBook("悟空传","28.00","今属性,并调用对象的方法测试
console.log("________________________");
console.log(b1.author);
console.log(b2.author);
console.log(b3.author);
b1.read();
b2.read();
b3.read();
//08 自定义构造函数通用写法
function 构造函数名(参数1,参数2,参数3...) {
//设置对象的属性
this.属性01 = 参数1;
this.属性02 = 参数2;
//设置对象的方法
this.方法01 = function () {
//.....
};
this.方法02 = function () {
//.....
}
}
//09 自定义构造函数方式创建对象
var 对象01 = new 构造函数名(实参01,实参02,实参03...);
var 对象02 = new 构造函数名(实参01,实参02,实参03...);
</script>
-
04 自定义构造函数和简单工厂函数的区别
① 函数的首字母大写(用于区别构造函数和普通函数)
② 创建对象的过程是由new关键字实现
③ 在构造函数内部会自动的创建新对象,并赋值给this指针
④ 自动返回创建出来的对象 -
05 构造函数的执行过程:
① 使用new关键字创建对象
② 把新创建出来的对象赋值给this
③ 在构造函数内部,使用this为新创建出来的对象设置属性和方法
④ 默认返回新创建的对象(普通函数如果不显示的return则默认返回undefined)。//06 思考:在构造函数内部,可以写其他"无关的代码"吗?
-
07 构造函数的返回值说明:
- 01 如果在构造函数中没有显示的return,则默认返回的是新创建出来的对象
- 02 如果在构造函数中显示的re何在","湖南文艺出版社");
- 03 打印对象的turn,则依照具体的情况处理
- [01] return 的是对象,则直接返回该对象,取而代之本该默认返回的新对象
- [02] return 的是null或基本数据类型值,则返回新创建的对象
-
构造函数方式创建对象存在的问题
每次创建对象,都会重新创建函数，那么如果创建的对象数量很多,而对象方法内部的实现一模一样,则造成了资源浪费
