javascript學(xué)習(xí)筆記(九) js對(duì)象 設(shè)計(jì)模式
更新時(shí)間:2012年06月19日 23:18:28 作者:
javascript學(xué)習(xí)筆記之js對(duì)象 設(shè)計(jì)模式介紹,需要的朋友可以參考下
1.創(chuàng)建對(duì)象
var person = new Object();
person.name = "RuiLiang";
person.age = 30;
person.job = "Teacher";
person.sayName = function () {
alert(this.name);
};
person.sayName();
2.工廠模式
缺點(diǎn):不能識(shí)別對(duì)象
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,"待業(yè)");
person1.sayName(); //"阿亮"
person2.sayName(); //“俊俊”
3.構(gòu)造函數(shù)模式
缺點(diǎn):缺少封裝性
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,"待業(yè)");
person1.sayName();
person2.sayName();
4.原型模式
缺點(diǎn):所有屬性被實(shí)例共享
function Person() {
}
Person.prototype.name = "ALiang";
Person.prototype.age = 30;
Person.prototype.job = "Teacher";
Person.sayName = function () {
alert(this.name);
}
hasOwnProperty()方法檢測(cè)某一屬性是不是實(shí)例屬性,如果是返回 true
person1.hasOwnProperty("name"); //name是不是person1的屬性
in 操作符:通過對(duì)象訪問的屬性是否存在,若存在返回 true,不管屬性存在實(shí)例中還是原型中
alert("name" in person1); //name屬性若存在返回 true
確定屬性在原型中還是對(duì)象中的方法:
function hasPrototypeProperty(object,name) {
return !object.hasOwnProperty(name) && (name in object);
}
//用法
var person = new Person();
alert(hasPrototypeProperty(person,"name")); //true
person.name = "Grey"; //改變?cè)椭衝ame的值
alert(hasPrototypeProperty(person,"name")); //false
isPrototypeOf()方法是用來判斷指定對(duì)象object1是否存在于另一個(gè)對(duì)象object2的原型鏈中,是則返回true,否則返回false。
格式如下:
object1.isPrototypeOf(object2);
object1是一個(gè)對(duì)象的實(shí)例;
object2是另一個(gè)將要檢查其原型鏈的對(duì)象。
原型鏈可以用來在同一個(gè)對(duì)象類型的不同實(shí)例之間共享功能。
如果 object2 的原型鏈中包含object1,那么 isPrototypeOf 方法返回 true。
如果 object2 不是一個(gè)對(duì)象或者 object1 沒有出現(xiàn)在 object2 中的原型鏈中,isPrototypeOf 方法將返回 false。
//字面量重寫原型對(duì)象
function Person(){
}
Person.prototype = {
constructor : Person,
name : "ALiang",
age : 30,
job : "Teacher",
sayName : function() {
alert(this.name);
}
};
5.構(gòu)造函數(shù)和原型混合模式
具有構(gòu)造函數(shù)模式和原型模式的優(yōu)點(diǎn),屬性用構(gòu)造函數(shù)模式,方法用原型模式 //這種模式使用最廣泛
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.動(dòng)態(tài)原型模式
function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
if (typeof this.sayName != "function"){ //這里的sayName可以是任何初始化后存在的方法或?qū)傩?
Person.prototype.sayName = function() { //不能用字面量形式
alert(this.name);
};
}
7.寄生構(gòu)造函數(shù)模式
8.穩(wěn)妥構(gòu)造函數(shù)模式
復(fù)制代碼 代碼如下:
var person = new Object();
person.name = "RuiLiang";
person.age = 30;
person.job = "Teacher";
person.sayName = function () {
alert(this.name);
};
person.sayName();
2.工廠模式
缺點(diǎn):不能識(shí)別對(duì)象
復(fù)制代碼 代碼如下:
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,"待業(yè)");
person1.sayName(); //"阿亮"
person2.sayName(); //“俊俊”
3.構(gòu)造函數(shù)模式
缺點(diǎn):缺少封裝性
復(fù)制代碼 代碼如下:
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,"待業(yè)");
person1.sayName();
person2.sayName();
4.原型模式
缺點(diǎn):所有屬性被實(shí)例共享
復(fù)制代碼 代碼如下:
function Person() {
}
Person.prototype.name = "ALiang";
Person.prototype.age = 30;
Person.prototype.job = "Teacher";
Person.sayName = function () {
alert(this.name);
}
hasOwnProperty()方法檢測(cè)某一屬性是不是實(shí)例屬性,如果是返回 true
person1.hasOwnProperty("name"); //name是不是person1的屬性
in 操作符:通過對(duì)象訪問的屬性是否存在,若存在返回 true,不管屬性存在實(shí)例中還是原型中
alert("name" in person1); //name屬性若存在返回 true
確定屬性在原型中還是對(duì)象中的方法:
復(fù)制代碼 代碼如下:
function hasPrototypeProperty(object,name) {
return !object.hasOwnProperty(name) && (name in object);
}
//用法
var person = new Person();
alert(hasPrototypeProperty(person,"name")); //true
person.name = "Grey"; //改變?cè)椭衝ame的值
alert(hasPrototypeProperty(person,"name")); //false
isPrototypeOf()方法是用來判斷指定對(duì)象object1是否存在于另一個(gè)對(duì)象object2的原型鏈中,是則返回true,否則返回false。
格式如下:
object1.isPrototypeOf(object2);
object1是一個(gè)對(duì)象的實(shí)例;
object2是另一個(gè)將要檢查其原型鏈的對(duì)象。
原型鏈可以用來在同一個(gè)對(duì)象類型的不同實(shí)例之間共享功能。
如果 object2 的原型鏈中包含object1,那么 isPrototypeOf 方法返回 true。
如果 object2 不是一個(gè)對(duì)象或者 object1 沒有出現(xiàn)在 object2 中的原型鏈中,isPrototypeOf 方法將返回 false。
復(fù)制代碼 代碼如下:
//字面量重寫原型對(duì)象
function Person(){
}
Person.prototype = {
constructor : Person,
name : "ALiang",
age : 30,
job : "Teacher",
sayName : function() {
alert(this.name);
}
};
5.構(gòu)造函數(shù)和原型混合模式
具有構(gòu)造函數(shù)模式和原型模式的優(yōu)點(diǎn),屬性用構(gòu)造函數(shù)模式,方法用原型模式 //這種模式使用最廣泛
復(fù)制代碼 代碼如下:
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.動(dòng)態(tài)原型模式
復(fù)制代碼 代碼如下:
function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
if (typeof this.sayName != "function"){ //這里的sayName可以是任何初始化后存在的方法或?qū)傩?
Person.prototype.sayName = function() { //不能用字面量形式
alert(this.name);
};
}
7.寄生構(gòu)造函數(shù)模式
8.穩(wěn)妥構(gòu)造函數(shù)模式
您可能感興趣的文章:
- 小議javascript 設(shè)計(jì)模式 推薦
- JavaScript 設(shè)計(jì)模式之組合模式解析
- javascript 設(shè)計(jì)模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)
- javascript 模式設(shè)計(jì)之工廠模式學(xué)習(xí)心得
- JavaScript 設(shè)計(jì)模式 安全沙箱模式
- JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)三 原型模式(上)
- javascript設(shè)計(jì)模式 接口介紹
- javascript設(shè)計(jì)模式之解釋器模式詳解
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布者-訂閱者模式)
- JavaScript設(shè)計(jì)模式初探
相關(guān)文章
javascript 內(nèi)置對(duì)象及常見API詳細(xì)介紹
這篇文章主要介紹了javascript 內(nèi)置對(duì)象及常見API的相關(guān)資料,這里對(duì)內(nèi)置對(duì)象進(jìn)行了詳細(xì)的整理,需要的朋友可以參考下2016-11-11
JavaScript實(shí)現(xiàn)表單驗(yàn)證
這篇文章介紹了JavaScript實(shí)現(xiàn)表單驗(yàn)證的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05
javascript標(biāo)準(zhǔn)庫(js的標(biāo)準(zhǔn)內(nèi)置對(duì)象)總結(jié)
這篇文章主要介紹了javascript標(biāo)準(zhǔn)庫,標(biāo)準(zhǔn)庫指的是js的標(biāo)準(zhǔn)內(nèi)置對(duì)象,是js這門語言本身初始時(shí)提供的在全局范圍的對(duì)象,需要的朋友可以參考下2018-05-05
JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹
一個(gè)div的運(yùn)動(dòng)其實(shí)就是它與瀏覽器邊框的距離在變動(dòng)。如果他變化的速率一定,那就是勻速運(yùn)動(dòng);如果變化的速率不一定,那么就是變速運(yùn)動(dòng)2012-11-11
NodeJS url驗(yàn)證(url-valid)的使用方法
本文主要介紹了NodeJS url驗(yàn)證(url-valid)模塊的使用方法,最后提供了實(shí)例代碼供大家參考2013-11-11

