prototype 屬性使您有能力向對象添加屬性和方法。
JavaScript中的每個對象都有prototype屬性,對對象的prototype屬性的解釋是:返回對象類型原型的引用
A.prototype = new B();
相當于把B的方法和屬性拷貝一遍到A,當然,非覆蓋的。
es6前的類
es6之前是js中是沒有class的,所以創建類時我們使用:
var Person = function (name) {
this.name = name;
this.sayHi = function () {
console.log("Hi, I'm " + this.name + "!");
}
};
var person = new Person("Li Lei"); // 創建實例
person.sayHi(); // 調用實例方法
這時候 Person 就是一個類對象了,function 即構造方法。
類方法、對象方法與原型方法
var Person = function (name) {
this.name = name;
this.sayHi = function() { // 對象方法
console.log("Hi, I'm " + this.name + "!");
}
};
Person.run = function() { //類方法
console.log("I can run");
}
Person.prototype.sayHiInChinese = function() { //原型方法
console.log("我的名字是" + this.name);
}
//測試
var p1=new Person("Han Meimei");
p1.sayHi();
Person.run();
p1.sayHiInChinese();
原型方法和對象方法的調用首先需要先創建類的實例,并且只能通過類的實例調用。
prototype與屬性方法調用
簡單來說,尋找實例方法的順序是:先找自身有沒有屬性方法,有的話調用,沒有的話在prototype原型鏈上找,找到即調用。
比如:
function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
}
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 顯示baseClass::showMsg
如果extendClass中存在與baseClass同名的方法,baseClass不會覆蓋掉extendClass中的同名方法:
function baseClass()
{
this.showMsg = function()
{
alert("baseClass::showMsg");
}
}
function extendClass()
{
this.showMsg =function ()
{
alert("extendClass::showMsg");
}
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();//顯示extendClass::showMsg
如果想要調用baseClass中的方法,可以使用call
:
extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance); //顯示baseClass::showMsg