设计模式
为了批量创建对象
1.工厂模式
优点:可以批量创建对象
缺点:不能区分种类 所有对象都是object的实例 方法冗余
var sayName = function(){
}
function person(name,age,gender){
return {
name:name,
age:age,
gender:gender,
sayName:sayName
}
}
var p1 = person('zhangsan',12,'male');
var p2 = person('lisi',12,'female');
2.构造函数模式
优点:可以批量创建对象 区分种类
缺点:方法冗余
var sayName = function(){}
function Person(name,age,gender){
//new关键字
//1.创建一个实例对象
//2.将this指向该实例对象
//3.执行函数体
//4.返回该实例对象
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = sayName;
}
var p1 = new Person('zhangsan',12,'male');
var p2 = new Person('lisi',12,'male');
console.log(p1,p2) Person{name,age,gender}
3.原型模式(不单独使用)
优点:可以批量创建对象 方法冗余问题 区分种类
缺点:所有实例对象属性和方法全部一样
将所有实例的属性和方法全部放在原型对象中
function Person(){}
Person.prototype.name='lisi';
Person.prototype.age=12;
Person.prototype = {
constructor:Person,
name,
age,
gender,
sayName:function(){
},
friends:[]
}
4.组合模式:原型模式 + 构造函数模式
将所有实例私有属性和私有方法全部放在构造函数中
将所有实例公共方法和公共属性全部放在原型对象中
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
this.friends= [];
}
Person.prototype = {
constructor:Person,
sayName:function(){
}
}
var p1 = new Person('zhangsan',12,'male');
var p2 = new Person('lisi',12,'male');
p1.friends.push('tom');
p1{name,age,gender,friends:['tom']}
p2{name,age,gender,friends:[]}
5.instanceof
判断当前实例对象是否是某一个构造函数的实例
判断是否处在原型链中
1.工厂函数模式
/*
*创建对象的方式有哪些?
*1.创建单个对象
* 字面量 var obj = {}
* 构造函数 var obj = new Object()
*2.创建多个对象
* 1.工厂函数模式
* 2.构造函数模式
* 3.原型模式(不单独使用)
* 4.组合模式 2+3结合体
*/
/**
* 工厂函数模式 为了批量创建对象
* 优点:可以批量创建对象 降低代码冗余量
* 缺点:无法区分种类 全部是Object的实例 方法冗余
*/
// 创建函数
function person(name, age, gender){
// 构造函数创建对象
var obj = new Object
// 向obj里加属性
obj.name = name
obj.age = age
obj.gender = gender
return obj
}
var p1 = person('evan', 18, 'male')
var p2 = person('osborn', 23, 'male')
console.log(p1,p2);
// 无法区分种类
//{ name: 'evan', age: 18, gender: 'male' } { name: 'osborn', age: 23, gender: 'male' }
console.log('----------------------------------------------------------');
// 创建函数
function person(name, age, gender){
// 属性当做函数person的返回值
return{
name:name,
age:age,
gender:gender
}
}
var p1 = person('evan', 18, 'male')
var p2 = person('osborn', 23, 'male')
console.log(p1,p2);
//{ name: 'evan', age: 18, gender: 'male' } { name: 'osborn', age: 23, gender: 'male' }
console.log('-------------------------------------------------------');
// 创建函数
// function person(name, age, gender){
// // 属性当做函数person的返回值
// return{
// name:name,
// age:age,
// gender:gender,
// sayName: function(){
// console.log(this.name);
// }
// }
// }
// var p1 = person('evan', 18, 'male')
// var p2 = person('osborn', 23, 'male')
// console.log(p1,p2);
// // { name: 'evan', age: 18, gender: 'male', sayName: [Function: sayName] }
// // {name: 'osborn', age: 23, gender: 'male', sayName: [Function: sayName] }
// p1.sayName(); //evan
// p2.sayName();//osborn
// console.log(p1.sayName === p2.sayName);//f
console.log('-------------------------------------------------------');
var sayName = function(){
console.log(this.name); //undefined
}
sayName()
// 创建函数
function person(name, age, gender){
// 属性当做函数person的返回值
return{
name:name,
age:age,
gender:gender,
sayName:sayName
}
}
var p1 = person('evan', 18, 'male')
var p2 = person('osborn', 23, 'male')
console.log(p1,p2);
// { name: 'evan', age: 18, gender: 'male', sayName: [Function: sayName] }
// {name: 'osborn', age: 23, gender: 'male', sayName: [Function: sayName] }
p1.sayName(); // evan
p2.sayName();// osborn
console.log(p1.sayName === p2.sayName); // t
// 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);
// function dog(name){
// return {
// name:name
// }
// }
// var d1 = dog('zhangsan');
// console.log(d1);
2.构造函数模式
/**
* 2.构造函数模式
* 优点:可以区分种类 可以批量创建对象
* 缺点:方法冗余
*/
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);
// Person {
// name: 'terry',
// age: 12,
// gender: 'male',
// sayName: [Function: sayName]
// } Person {
// name: 'larry',
// age: 18,
// gender: 'female',
// sayName: [Function: sayName]
// }
p1.sayName();//terry
p2.sayName();//larry
console.log(p1.sayName === p2.sayName);//true
/**
* instanceof 判断当前实例对象是否处在原型链上
* 判断是否是某一个构造函数的实例对象
*/
console.log(p1 instanceof Person);//true
console.log(p2 instanceof Person);//true
console.log(p1 instanceof Object);//true
console.log(p2 instanceof Object);//true
console.log(Person instanceof Object);//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);
4.组合模式
/**
* 组合模式 原型模式 + 构造函数模式
* 将实例私有属性和方法全部放在构造函数种
* 将实例公共属性和方法全部放在原型对象中
* 批量创建对象 区分种类 解决方法冗余
*/
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);
// Person { name: 'terry', age: 12, gender: 'male', friends: [] }
// Person { name: 'larry', age: 15, gender: 'female', friends: [] }
p1.friends.push('tom');
console.log(p1,p2);
// Person { name: 'terry', age: 12, gender: 'male', friends: [ 'tom' ] }
// Person { name: 'larry', age: 15, gender: 'female', friends: [] }
console.log(p1.sayName === p2.sayName);//t
//所有构造函数都是Object子类型 都在Object这条原型链
console.log(p1 instanceof Person);//t
console.log(p1 instanceof Object);//t
console.log(Person instanceof Object);//t
var arr = [1,2,3,4,5]
console.log(arr instanceof Object);//t
console.log(arr instanceof Array);//t
console.log(arr instanceof Person);//f