面向对象(二)创建对象的几种方法
2017-02-23 本文已影响11人
凸小布
创建对象的几种方法
- 字面量方式
- 使用内置的构造函数
- 使用简单工厂函数
- 自定义构造函数
01字面量的方式创建对象
- 结构
```javascript
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);
}
}
var book3 = {
name:"数据结构",
author:"严蔚敏",
press:"清华大学出版社",
price:"30.00",
logDes:function(){
console.log("书名：" + this.name + "作者：" + this.author);
}
}
console.log(book1.name);
boo1.logDes();
</script>
02内置的构造函数创建对象
Object Function (String Number Boolean) Array Date ....
- 问题：
如果需要创建多个相似的对象，那么代码中冗余度太高（重复的代码太多）
<script>
//01 创建不同类型的对象
var obj = new Object();
var str = '我是字符串';
var strObj = String('我是字符串');
var strObj2 = new Object('我是字符串');
console.log(obj);
console.log(str);
console.log(strObj);
console.log(strObj2);
console.log(typeof str); //string
console.log(typeof strObj); //string
console.log(typeof strObj2);//object
console.log(str == strObj); //true
console.log(str == strObj2); //true
console.log(strObj == strObj2);//true
console.log(str === strObj); //true
console.log(str === strObj2); //false
console.log(strObj === strObj2);//false
</script>
问题：如果需要创建多个相似的对象，那么代码中冗余度太高（重复的代码太多）
<script>
//01 创建空的对象
var book1 = new Object();
//02 设置属性
book1.name = "花田半亩";
book1.author = "田维";
book1.price = "40.01";
//03 设置方法
book1.logDes = function (){
console.log("书名：" + this.name);
}
book1.logDes();
//创建多个对象
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>
简单工厂函数创建对象
- 问题：
如果创建多个不同类型的对象，那么我们无法分辨
<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)
{
//01 原料 ： name + age + 空对象
var o = new Object();
//02 对原料进行加工
o.name = name;
o.age = age;
//03 产品出厂
return o;
}
//创建具体的对象
var obj1 = createPerson("张三",88);
var obj2 = createDog("二哈",13);
console.log(obj1);
console.log(obj2);
//typeof 判断类型
console.log(typeof obj1); //object
console.log(typeof obj2); //object
console.log(obj1.constructor); //Object
console.log(obj2.constructor); //Object
</script>
自定义构造函数创建对象
-
具体步骤
01 提供一个构造函数
02 通过this指针来设置属性和方法
03 通过new操作符创建对象
-
自定义构造函数方式创建对象内部的实现细节
01 我们在使用new关键字调用构造函数的时候，内部默认会创建一个空的对象
02 默认会把这个空的对象赋值给this
03 通过this来设置新对象的属性和方法
04 在构造函数的最后，默认会把新创建的对象返回
-
自定义构造函数和工厂函数对比
01 函数的名称不一样，构造函数首字母大写
02 自定义构造函数创建方式内部会自动的创建空对象并且赋值给this
03 默认会自动返回新创建的对象
-
返回值
01 没有显示的return ,默认会把新创建的对象返回
02 显示的执行了return语句，就得看具体的情况- 返回的是值类型，那么直接忽略该返回，把新创建的对象返回
- 返回的是引用类型的数据，会覆盖掉新创建的对象，直接返回引用数据类型的值
<script>
//001 提供一个构造函数
//构造函数简单介绍：
//作用：对对象进行一些初始化的设置
//和普通函数区别：（01）首字母大写（02）调用方式不一样和new配合使用
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;
}
//03 使用new操作符来创建对象
var p1 = new Person("张三",20);
var p2 = new Person("张老汉",200);
console.log(p1);
console.log(p2);
</script>
-
返回值
01 没有显示的return ,默认会把新创建的对象返回
02 显示的执行了return语句，就得看具体的情况- 返回的是值类型，那么直接忽略该返回，把新创建的对象返回
- 返回的是引用类型的数据，会覆盖掉新创建的对象，直接返回引用数据类型的值
<script>
function Dog(name)
{
this.name = name;
//return "demo"; 忽略
//return function (){};
}
var dog = new Dog("阿黄");
console.log(dog);
</script>
