JS设计模式 批量创建对象

目录

一、创建对象的方式有哪些？*****

二、四种设计模式

1.工厂函数模式

2.构造函数模式

3.原型模式(不单独使用)

4.组合模式（ 原型模式 + 构造函数模式）

---

一、创建对象的方式有哪些？*****

1.创建单个对象

     字面量 var obj = {}

     构造函数 var obj = new Object()

2.创建多个对象

  （1）工厂函数模式

 （2）构造函数模式

 （3）原型模式(不单独使用)

 （4）组合模式 2+3结合体

---------------------------------------------------------------------------------------------------------------------------------

new关键字做了什么？
 （1）创建一个实例对象
 （2）将this指向实例对象
 （3）执行函数体
 （4）返回实例对象 

二、四种设计模式

1.工厂函数模式

工厂函数模式 -为了批量创建对象

 优点：可以批量创建对象 降低代码冗余量

 缺点：无法区分种类 全部是Object的实例 方法冗余

var sayName = function(){
	console.log(this.name)
};//b1003
// sayName(); undefined

function person(name,age,gender){
	// var obj = new Object();//{}
	// obj.name = name;
	// obj.age = age;
	// return obj;//{}
	return {
		name:name,
		age:age,
		gender:gender,
		sayName:sayName
	}
}
var p1 = person('zhangsan',12,'male');
var p2 = person('lisi',15,'female');
console.log(p1,p2);
p1.sayName();
p2.sayName();
console.log(p1.sayName === p2.sayName);
运行结果：
{
  name: 'zhangsan',
  age: 12,
  gender: 'male',
  sayName: [Function: sayName]
} {
  name: 'lisi',
  age: 15,
  gender: 'female',
  sayName: [Function: sayName]
}
zhangsan
lisi
true

2.构造函数模式

 优点：可以区分种类 可以批量创建对象

 缺点：方法冗余

instanceof ——判断当前实例对象是否处在原型链上 ，判断是否是某一个构造函数的实例对象

var sayName = function(){
	console.log(this.name)
}
function Person(name,age,gender){
	/**
	 * 使用new关键字js做了些什么事情*****
	 * 1.创建一个实例对象 p1 Person {}
	 * 2.将this 指向实例对象 this --->p1 p2	  this --->p1{}
	 * 3.执行函数体	p1.name = 'terry'
	 * 4.返回实例对象 return p1{}
	 */
	this.name = name;
	this.age = age;
	this.gender = gender;
	this.sayName = sayName;
}
var p1 = new Person('terry',12,'male');
var p2 = new Person('larry',18,'female');
console.log(p1,p2);
p1.sayName();
p2.sayName();
console.log(p1.sayName === p2.sayName);
/**
 * instanceof 判断当前实例对象是否处在原型链上 
 * 判断是否是某一个构造函数的实例对象
 */
console.log(p1 instanceof Person);
console.log(p2 instanceof Person);
console.log(p1 instanceof Object);
console.log(p2 instanceof Object);
console.log(Person instanceof Object);
运行结果：
Person {
  name: 'terry',
  age: 12,
  gender: 'male',
  sayName: [Function: sayName]
} Person {
  name: 'larry',
  age: 18,
  gender: 'female',
  sayName: [Function: sayName]
}
terry
larry
true
true
true
true
true
true

3.原型模式(不单独使用)

 将实例所有属性和方法全部放在原型对象中  构造函数内部不放任何属性和方法

 优点：解决了方法冗余  批量创建对象

 缺点：所有实例属性和方法全部是一样

function Person(){
	/**
	 * 1.创建实例对象
	 * 2.this--->实例对象
	 * 3.执行函数体
	 * 4.返回实例对象
	 */
};
// Person.prototype.name='lisi';
// Person.prototype.age=12;
// Person.prototype.gender='male';
// Person.prototype.sayName = function(){
// 	console.log(this.name)
// }
console.log(Person.prototype);
console.log(Person.prototype.constructor);
Person.prototype = {
	//手动将构造者改为Person
	constructor:Person,
	name:'lisi',
	age:12,
	gender:'male',
	sayName:function(){
		console.log(this.name)
	}
}
console.log(Person.prototype);
console.log(Person.prototype.constructor);//constructor 指向Object

Person.prototype.friends = [];
var p1 = new Person();
var p2 = new Person();
console.log(p1.constructor,p2.constructor)
// console.log(p1,p2);
// console.log(p1.name,p2.name);
// console.log(p1.sayName === p2.sayName);
p1.friends.push('tom');
// console.log(p1.friends,p2.friends);
运行结果：
{}
[Function: Person]
{
  constructor: [Function: Person],
  name: 'lisi',
  age: 12,
  gender: 'male',
  sayName: [Function: sayName]
}
[Function: Person]
[Function: Person] [Function: Person]

4.组合模式（ 原型模式 + 构造函数模式）

 将实例私有属性和方法全部放在构造函数种，将实例公共属性和方法全部放在原型对象中

 优点：批量创建对象 区分种类 解决方法冗余

instanceof ——判断当前实例对象是否是某一个构造函数的实例，判断当前实例是否处在原型链 true  false

function Person(name,age,gender){
	this.name = name;
	this.age = age;
	this.gender = gender;
	this.friends = [];
}
Person.prototype = {
	constructor:Person,
	sayName:function(){
		console.log(this.name)
	}
}
var p1 = new Person('terry',12,'male');
var p2 = new Person('larry',15,'female');
console.log(p1,p2);
p1.friends.push('tom');
console.log(p1,p2);
console.log(p1.sayName === p2.sayName);

//所有构造函数都是Object子类型 都在Object这条原型链
console.log(p1 instanceof Person);
console.log(p1 instanceof Object);
console.log(Person instanceof Object);
var arr = [1,2,3,4,5]
console.log(arr instanceof Object);
console.log(arr instanceof Array);
console.log(arr instanceof Person);
运行结果：
Person { name: 'terry', age: 12, gender: 'male', friends: [] } Person { name: 
'larry', age: 15, gender: 'female', friends: [] }
Person { name: 'terry', age: 12, gender: 'male', friends: [ 'tom' ] } Person { name: 'larry', age: 15, gender: 'female', friends: [] }
true
true
true
true
true
true
false