首頁  >  文章  >  web前端  >  javascript學習筆記(九) js物件 設計模式_基礎知識

javascript學習筆記(九) js物件 設計模式_基礎知識

WBOY
WBOY原創
2016-05-16 17:52:25809瀏覽

1.建立物件

複製程式碼 程式碼如下:

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

person.sayName();

2.工廠模式
缺點:無法辨識物件

複製程式碼 程式碼如下:


function createPerson(name,age,age,age, 🎜> 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. !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.穩健建構子模式
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn