javascript学习笔记(九) js对象设计模式

178 阅读 0 评论 118 点赞

我是靠谱客的博主正直芒果，最近开发中收集的这篇文章主要介绍javascript学习笔记(九) js对象设计模式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.创建对象

复制代码代码如下:

 
var person = new Object(); 
person.name = "RuiLiang"; 
person.age = 30; 
person.job = "Teacher"; 
person.sayName = function () { 
alert(this.name); 
}; 

person.sayName(); 

2.工厂模式
缺点：不能识别对象

复制代码代码如下:

 

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("阿亮",30,"教师"); 
var person2 = createPerson("俊俊",24,"待业"); 

person1.sayName(); //"阿亮" 
person2.sayName(); //“俊俊” 

3.构造函数模式
缺点：缺少封装性

复制代码代码如下:

 
function Person(name,age,job) { 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = sayName; 
} 
function sayName() { 
alert(this.name); 
} 

var person1 = new Person("阿亮",30,"教师"); 
var person2 = new Person("俊俊",24,"待业"); 
person1.sayName(); 
person2.sayName(); 

4.原型模式
缺点：所有属性被实例共享

复制代码代码如下:

 
function Person() { 
} 

Person.prototype.name = "ALiang"; 
Person.prototype.age = 30; 
Person.prototype.job = "Teacher"; 
Person.sayName = function () { 
alert(this.name); 
} 

hasOwnProperty()方法检测某一属性是不是实例属性，如果是返回 true

person1.hasOwnProperty("name"); //name是不是person1的属性
in 操作符：通过对象访问的属性是否存在,若存在返回 true,不管属性存在实例中还是原型中

alert("name" in person1); //name属性若存在返回 true
确定属性在原型中还是对象中的方法：

复制代码代码如下:

 
function hasPrototypeProperty(object,name) { 
return !object.hasOwnProperty(name) && (name in object); 
} 
//用法 
var person = new Person(); 
alert(hasPrototypeProperty(person,"name")); //true 
person.name = "Grey"; //改变原型中name的值 
alert(hasPrototypeProperty(person,"name")); //false 

isPrototypeOf()方法是用来判断指定对象object1是否存在于另一个对象object2的原型链中，是则返回true，否则返回false。
格式如下：
object1.isPrototypeOf(object2);
object1是一个对象的实例；
object2是另一个将要检查其原型链的对象。
原型链可以用来在同一个对象类型的不同实例之间共享功能。
如果 object2 的原型链中包含object1，那么 isPrototypeOf 方法返回 true。
如果 object2 不是一个对象或者 object1 没有出现在 object2 中的原型链中，isPrototypeOf 方法将返回 false。

复制代码代码如下:

 
//字面量重写原型对象 
function Person(){ 
} 

Person.prototype = { 
constructor : Person, 
name : "ALiang", 
age : 30, 
job : "Teacher", 
sayName : function() { 
alert(this.name); 
} 
}; 

5.构造函数和原型混合模式
具有构造函数模式和原型模式的优点，属性用构造函数模式，方法用原型模式 //这种模式使用最广泛

复制代码代码如下:

 
function Person(name,age,job) { 
this.name = name; 
this.age = age; 
this.job = job; 
this.friends = ["xuyun","wuxueming"]; 
} 
Person.prototype = { 
constructor : Person, 
sayName : function() { 
alert(this.name); 
} 
}; 

var person1 = new Person("ALiang",30,"Teacher"); 
var person2 = new Person("ZuNan",26,"Teacher"); 
person1.friends.push("JunJun"); 
alert(person1.friends); //"xuyun","wuxueming","JunJun" 
alert(person2.friends); //"xuyun","wuxueming" 

6.动态原型模式

复制代码代码如下:

 
function Person(name,age,job) { 
this.name = name; 
this.age = age; 
this.job = job; 

if (typeof this.sayName != "function"){ //这里的sayName可以是任何初始化后存在的方法或属性 
Person.prototype.sayName = function() { //不能用字面量形式 
alert(this.name); 
}; 
} 

7.寄生构造函数模式
8.稳妥构造函数模式