JavaScript物件導向-- 繼承(Inherit) - I

之前都在討論封裝(用途為使用者只需知道如何操作, 不需知道原理)方面的東西。

終於進行到如何繼承了。

首先, 為何需要繼承?

因為夠透過繼承, 我們能從一個原始版本的Class, 衍伸出更多特殊版本的Class, 也就是說, 子層類別是從父層類別衍伸而來。

而因為JavaScript是屬於prototype-based語言, 所以我們透過將現有的object當成prototype方式, 以此方式達到繼承目的。

一開始, 我們先比較call、apply、bind的不同:

e.g.

function base() {

    console.log(this, arguments);

}

base.call(1, 2, 3); //第一個參數修改this,之後的參數為function參數

                                      Number {1} [2, 3]

base.apply(1, [2, 3]); //第一個參數修改this,第二個參數必須是陣列為function參數

                                             Number {1} [2, 3]

base.bind(1)(2, 3); //第一個參數修改this,回傳一個新的function

                                        Number {1} [2, 3]

從以上看來,

call的第1個參數是改變function中的this值, 可決定是指向誰。其他參數要一個蘿蔔一個坑的傳入, 也就是說, 當function 含2個參數, call就同等需要傳入2個引數。(加上原本的第1個參數, 總共有3個參數)。

apply的第1個參數是改變function中的this值, 可決定是指向誰。第2個參數是個陣列。apply最大好處是能不用煩惱要傳入幾個參數。

bind第1個括號中的參數是改變function中的this值, 可決定是指向誰。這時會回傳一個新function(base.bind(1) === base  // false), 還未呼叫bind, 但this值的指向已改變。要再加上第2個括號, 把要一個蘿蔔一個坑的參數傳入,才會呼叫bind並傳入參數。

p.s. 可以這麼想, 當我們用new建立物件, 等同於:

        e.g.

   

        function MyObject(name, age) {

            this.name = name;

            this.age = age;

        }

        //var a = new MyObject("Mark", 30); (註解掉是因如不用new建立, 也能用其他方式)

        var a = {};    // 這方式可建立新物件, 但不會幫忙設定原型。

        MyObject.call(a, "Mark", 30);