使用JavaScript的原型繼承鏈

Question

function Person(firstName, lastName) { 
    this.firstName = firstName; 
    this.lastName = lastName; 
} 
Person.prototype.talk = function() { 
    return this.firstName + " " + this.lastName; 
} 
//creating a Person object for extension 
var manager = new Person('jon', 'doe'); 
console.log(manager.talk()); 
//Manager prototype..but doesn't inherit Person methods 
function Manager(firstName, lastName, accessCode) { 
    //shared properties 
    this.firstName = firstName; 
    this.lastName = lastName; 

    this.accesscode = accessCode; 
} 
function personChecker(person) { 
    var returnCode = 0; 
    if (person instanceof Person) { 
     returnCode = 1; 
    } 
    else if (person instanceof Manager) { 
     returnCode = 2; 
    } 
    return returnCode; 
} 
console.log(personChecker(manager)); 

是否可以共享原型並具有不同的構造函數？我想有經理從Person繼承一切（然後擴展它），並且對原型的功能開關，並做視不同的東西傳遞給personChecker功能

Answer 1

在JavaScript中，繼承通常進行這樣的：

Manager.prototype = Object.create(Person.prototype); 

Object.create創建具有在其原型鏈的第一個參數傳遞的對象的新對象。

如果您需要支持沒有Object.create舊的瀏覽器，你可以做「原型的舞蹈」，而不是：

function F(){} 
F.prototype = Person.prototype; 
Manager.prototype = new F(); 

在任何情況下，避免代碼調用構造函數來獲得這樣一個對象（這是一個衆所周知的反模式，只要你的構造函數依賴於它的任何參數（並且導致其他更微妙的問題），它就會中斷。

Answer 2

使用以下參數：

function Person(firstName, lastName) { 
    this.firstName = firstName; 
    this.lastName = lastName; 
} 
Person.prototype.talk = function() { 
    return this.firstName + " " + this.lastName; 
} 

function Manager(firstName, lastName, accessCode) { 
    //shared properties 
    this.firstName = firstName; 
    this.lastName = lastName; 

    this.accesscode = accessCode; 
} 
Manager.prototype = new Person('jon', 'doe'); 

function personChecker(person) { 
    var returnCode = 0; 
    if (person instanceof Manager) { 
     returnCode = 2; 
    } 
    else if (person instanceof Person) { 
     returnCode = 1; 
    } 
    return returnCode; 
} 

請注意，我已經改變了條件句的順序，因爲Manager一個實例是Person實例太：

var per = new Person('A', 'B'); 
per.talk();    // 'A B' 
per instanceof Person; // true 
per instanceof Manager; // false 
personChecker(per);  // 1 

var man = new Manager('A', 'B'); 
man.talk();    // 'A B' 
man instanceof Person; // true !!!! 
man instanceof Manager; // true !!!! 
personChecker(man);  // 2 

---

如果你想這樣做的好辦法，而不是

Manager.prototype = new Person('jon', 'doe'); 

使用

Manager.prototype = Object.create(Person.prototype, {constructor: {value: Manager}}); 

，但它並沒有在舊瀏覽器。

Answer 3

典型的方式來支持這種繼承：

// create a blank function to pass the prototype 
var blank = function() {}; 

// assign the prototype to inherit to the blank constructor 
blank.prototype = Person.prototype; 

// pass an instance of the prototype as the Manager prototype 
Manager.prototype = new blank(); 

var person = new Person('John', 'Doe'); 
var manager = new Manager('Greg', 'Smith', 'access1234'); 

manager.talk(); // Greg Smith 
person.talk(); // John Doe 

這裏是一個小提琴：http://jsfiddle.net/XF28r/

注意一個經理也是人，所以你需要切換左右的檢查。

function personChecker(person) { 
    var returnCode = 0; 
    if (person instanceof Manager) { 
     returnCode = 2; 
    } else if (person instanceof Person) { 
     returnCode = 1; 
    } 
    return returnCode; 
} 

雖然注意到我會把這一個輔助方法：

function extend(parent, child) { 

    var blank = function() {}; 
    blank.prototype = parent.prototype; 
    child.prototype = new blank(); 
} 

，那麼你可以簡單地使用它：

extend(Person, Manager); 

由於BERGI在評論中已經提到的，這可也可減至：

function extend(parent, child) { 
    child.prototype = Object.create(parent.prototype); 
} 

（工作IE 9向上）