#设计模式


设计模式 


为了批量创建对象 
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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值