JavaScript设计模式

你的名字 2021-02-05 02:27 695阅读 0赞

1、工厂模式  
````
function createPerson(name,age,job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		alert(this.name);
	};
	return o;
}
var person1 = createPerson(“采菊东离下”,55,”悠然见南山”);
var person2 = createPerson(“君不见黄河之水天上来”, 1000, “奔流到海不复回”);
````
2、构造函数模式  
````
function Person(name,age,job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = function (){
		alert(this.name);
	};
}
var p1 = new Person(“采菊东离下”,55,”悠然见南山”);
var p2 = new Person(“君不见黄河之水天上来”, 1000, “奔流到海不复回”);
````
3、原型模式(主要用到属性prototype)  
````
function Person(){
	Person.prototype.name = “天生我才必有用”;
	Person.prototype.age = 23;
	Person.prototype.job = “千金散尽还复来”;
	Person.prototype.sayName = function(){
		alert(this.name);
	};
}
var person1 = new Person();
var person2 = new Person();
alert(person1.sayName == person2.sayName);//true

function Person(){};
Person.prototype.name = “Nicholas”;//原型属性
Person.prototype.age = 33;
Person.prototype.job = “Software Engineer”;
Person.prototype.sayName = function(){
	alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = “grent”;//实例属性
console.log(person1.name);//grent
console.log(person2.name);//Nicholas

delete person1.name;//true 删除的是实例属性，原型模式数据删除不了
console.log(person1.name);//Nicholas

//hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法只在给定属性存在于对象实例中时，才会返回 true。
person1.name=”greate”;
console.log(person1.hasOwnProperty(“name”));//true
delete person1.name;
console.log(person1.hasOwnProperty(“name”));//false

//Object.keys()方法。这个方法接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组
var keys = Object.keys(Person.prototype);//获取键值信息
console.log(keys);// [“name”, “age”, “job”, “sayName”]

var p1 = new Person();
p1.name = “Rob”;
p1.age = 44;
var keys1 = Object.keys(p1);
console.log(keys1);// [“name”, “age”] 获取的是实例属性

//简单的原型语法

person1.friends.push(“Van”);
person1.friends;// [“万年唯好静”, “万事不关心”, “Van”]
person2.friends;// [“万年唯好静”, “万事不关心”]
person1.friends === person2.friends;//false
person1.sayName === person2.sayName;//true
````
5、动态原型模式  
````
function Person(name,age,job){
	this.name = name;
	this.age = age;
	this.job = job;
//判断条件，此段代码只会执行一次，判断sayName是否已经是函数，如果是就不要再创建了
	if(typeof this.sayName != “function”){
		Person.prototype.sayName = function(){
			console.log(this.name);
		};
	}
};

var friend = new Person(“Nicholas”, 29, “Software Engineer”);
friend.sayName();//Nicholas
````
  
6、寄生构造函数模式  
````
function Person(name,age,job){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.job = job;
	o.sayName = function(){
		console.log(this.name);
	}
	return o;
}
var friend = new Person(“Nicholas”, 29, “Software Engineer”);
friend.sayName(); //“Nicholas
````