JavaScript是一種基於對象的語言,JavaScript中的所有對象,都具有prototype屬性。prototype屬性返回對象的所有屬性和方法,所有 JavaScript 內部對象都有只讀的 prototype 屬性,可以向其原型中動態添加屬性和方法,但該對象不能被賦予不同的原型。但是自定義的對象可以被賦給新的原型。
對象分為函數對象和普通對象,區分:凡是通過 new Function() 創建的對象都是函數對象,其他的都是普通對象。(Object ,Function 是JS自帶的函數對象)
1.原型對象:prototype
在JS 中,函數對象其中一個屬性:原型對象 prototype。普通對象是沒有prototype屬性,但有__proto__屬性。
原型的作用就是給這個類的每一個對象都添加一個統一的方法,在原型中定義的方法和屬性都是被所以實例對象所共享。
例:
var person = function(name){
this.name = name
};
person.prototype.getName = function(){//通過person.prototype設置函數對象屬性
return this.name;
}
var zxj= new person(‘zhangxiaojie’);
zxj.getName(); //zhangxiaojie //zxj繼承上屬性
2.原型鏈
__proto__:js創建對象的內置屬性,用於指向創建它的函數對象的原型對象prototype。(是JS內部使用尋找原型鏈的屬性。當實例化一個對象時候,內部會新建一個__proto__屬性並把prototype賦值給它)
下圖為原型鏈運行圖解,當我們實例一個對象之后,調用它的內部方法,他的運行順序是先找自身有沒有該方法,如果沒有就會通過__proto__屬性想上層尋找,一直尋找到Object對象中,如果還沒有才會報錯null
p._proto_----->Persion._proto_---->object._proto_----->null
3.設計模式
(1)工廠模式:在函數內創建一個對象,給對象賦予屬性及方法再將對象返回。
function Parent(){
var Child = new Object();
Child.name="ZXJ";
Child.age="24";
Child.sex=function(){
return "女";
};
return Child;
};
調用:
var x =Parent();
alert(x.name); //ZXJ
alert(x.sex()); //女
(2)構造函數模式:無需再函數內部重建創建對象,而使用this指代
function Parent(){
var Child = new Object();
this.name="ZXJ";
this.age=24";
this.lev=lev;
Child.sex=function(){
return "女";
};
return Child;
};
調用:
var x = new Parent();
alert(x.name); //ZXJ
alert(x.sex()); //女
(3)原型模式:函數中不對屬性進行定義,利用prototype屬性對屬性進行定義,可以讓所有對象實例共享它所包含的屬性及方法。
function Parent(){ };
Parent.prototype.name="ZXJ";
Parent.prototype.age="24";
Parent.prototype.sex=function(){
var s="女";
alert(s);
};
調用:
var x =new Parent();
alert(x.name); //ZXJ
alert(x.sex()); //女
(4)混合模式:原型模式+構造函數模式。這種模式中,構造函數模式用於定義實例屬性,而原型模式用於定義方法和共享屬性。
function Parent(){
this.name="ZXJ";
this.age=24;
};
Parent.prototype.sayname=function(){
return this.name;
};
調用:
var x =new Parent();
alert(x.sayname()); //ZXJ
(5)動態原型模式:將所有信息封裝在了構造函數中,而通過構造函數中初始化原型,這個可以通過判斷該方法是否有效而選擇是否需要初始化原型。
function Parent(){
this.name="ZXJ";
this.age=24;
if(typeof Parent._sayname=="undefined"){
Parent.prototype.sayname=function(){
return this.name;
}
Parent._sayname=true;
}
};
調用:
var x =new Parent();
alert(x.sayname());
