javascript 的繼承實例

 

shape.prototype = {
    getEdge:function(){
        return this.edge;
    },
    getArea:function(){
        return this.a*this.b;
    }
}
function shape(edge, a, b)
{
    this.edge = edge;
    this.a = a;
    this.b = b;
}

//三角形繼續形狀
triangle.prototype = new shape();
triangle.prototype.getName = function(){alert('I am a triangle');}
function triangle(bottom ,height)
{
    shape.call(this, 3, bottom ,height);
}


//四邊形繼續形狀
rectangle.prototype = new shape();
rectangle.prototype.getName = function(){alert('I am a rectangle');}
rectangle.prototype.getArea = function(){alert('I rewrite parent getArea method');}
function rectangle(bottom ,height)
{
    shape.call(this, 4, bottom ,height);
}

var t = new triangle(10, 5);

var r = new rectangle(10, 5);


console.dir(r);

 

繼承方面,javascript中的每一個對象都有一個內部私有的連接指向另外一個對象 (或者爲 null),這個對象就是原對象的原型. 這個原型也有本身的原型, 直到對象的原型爲null爲止. 這種一級一級的鏈結構就稱爲原型鏈.

基於原型鏈的繼承

javascript對象有兩種不一樣的屬性,一種是對象自身的屬性,另一種是繼承於原型鏈上的屬性.下面的代碼演示了當訪問一個對象的屬性時,到底發生了什麼

 

// 假定咱們有個對象o,而且o所在的原型鏈以下:
// {a:1, b:2} ---> {b:3, c:4} ---> null
// 'a'和'b'是o自身的屬性.

// 該例中,用"對象.[[Prototype]]"來表示這個對象的原型.
// 這只是一個純粹的符號表示(ECMAScript標準中也這樣使用),不能在實際代碼中使用.

console.log(o.a); // 1
// a是o的自身屬性嗎?是的,該屬性的值爲1

console.log(o.b); // 2
// b是o的自身屬性嗎?是的,該屬性的值爲2
// o.[[Prototype]]上還有一個'b'屬性,可是它不會被訪問到.這種狀況稱爲"屬性遮蔽".

console.log(o.c); // 4
// c是o的自身屬性嗎?不是,那看看o.[[Prototype]]上有沒有.
// c是o.[[Prototype]]的自身屬性嗎?是的,該屬性的值爲4
console.log(o.d); // undefined
// d是o的自身屬性嗎?不是,那看看o.[[Prototype]]上有沒有.
// d是o.[[Prototype]]的自身屬性嗎?不是,那看看o.[[Prototype]].[[Prototype]]上有沒有.
// o.[[Prototype]].[[Prototype]]爲null,原型鏈已到頂端,沒有d屬性,返回undefined

 

在原型鏈上查找屬性比較耗時，對性能有反作用，這在性能要求苛刻的狀況下很重要。另外，試圖訪問不存在的屬性時會遍歷整個原型鏈。

 

更詳細的繼承介紹：http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html

MDN繼承介紹：https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain