JS常用模式

1.原始模式

//1.原始模式,对象字面量方式

var person = {
	name: 'Jack',
	age:18,
	sayName:function(){alert(this.name);}
}
//2.原始模式,Object构造函数方式
var person = new Object();
person.name = 'Jack';
person.age = 18;
person.sayName = function (){
	alert(this.name)
}
  • 显然,当我们要创建批量的person1、person2....时,每次都要敲很多代码,太过繁琐,不方便,然后就有了批量生产的工厂模式。

2.工厂模式

//2.1工厂模式,定义一个函数创建对象

function creatPerson(name,age){
	var person = new Object();
	person.name = age;
	person.sayName = function(){
	alert(this.name)
	}
	return person
}

工厂模式就是批量化生产,简单调用,但是由于工厂模式不能识别这个对象到底是什么类型,所以每次都要创建一个独立temp对象,代码臃肿。

3.构造函数

//3.1构造函数模式,为对象定义一个构造函数

function Person (name,age){
	this.name = name;
	this.age = age;
	this.sayName = function(){
	alert(this.name)
	}
}
var p1 = new Person('Jack', 18);//创建一个P1对象
Person('Jack',18);
//属性方法都给window对象,window.name = 'Jack', window.sayName()会输出Jack
### 4.原型模式
//4.1原型模式,直接定义prototype属性
function Person(){}
Person.prototype.name = 'Jack';
Person.prototype.age = 18;
Person.prototype.sayName = function(){
	alert(this.name)
}

//4.2原型模式,字面量定义方式
function Person() {}
Person.prototype = {
	name: 'Jack',
	age: 18,
	sayName: function(){alert(this.name)}
}
var p1 = new Person(); //name = 'Jack'
var p2 = new Person(); //name = 'Jack'
  • 这里需要注意的是原型属性和方法的共享,即所以实例中,都只是引用原型中的属性方法,任何一个地方产生的改动会引起其他实例的变化。

5.混合模式(构造+原型)推荐

//5.1原型构造组合模式
function Person (name,age){
	this.name = name;
	this.age = age;
}
Person.prototype = {
	hobby:['running','football'];
	sayName:function(){alert(this.name)};
	sayAge:function(){alert(this.age)}
}
var p1 = new Person('Jack',20);
//p1:'Jack',20;__proto__:['running','football'],sayName,sayAge
var p2 = new Person('Mark', 18)
//p1:'Mark',18;__proto__:['running','football'],sayName,sayAge
posted @ 2022-12-14 09:54  举个栗子走天下  阅读(66)  评论(0编辑  收藏  举报