JavaScript中的繼承

Question

我正在閱讀這本關於繼承的JS書，我對每一行都在做什麼感到困惑。如果我的理解是正確的，有人可以告訴我。

function classA(sColor){ 
    this.color = sColor; 
    this.sayColor = function(){ 
     alert(this.color); 
    }; 
} 

function ClassB(sColor, sName){ 
    this.newMethod = classA; //assigning a reference to a parent class 
    this.newMethod(sColor); //calling the constructor of the parent class 

    //question: so what is 'this' then? from my understanding when we call 'new ClassB('a','b')' 
    //we instantiate a new object and that new object becomes the 'this' in this case. Does this 
    //line mean we are converting the this to classA? 

    delete this.newMethod; //deleting reference to the CONSTRUCTOR of the parent class 

    this.name = sName; 
    this.sayName = function(){ 
     alert(this.name); 
    } 

} 

Answer 1

How this works

function ClassB(sColor, sName){ 
    this.newMethod = classA; 
    this.newMethod(sColor); 

    delete this.newMethod; 

    this.name = sName; 
    this.sayName = function(){ 
     alert(this.name); 
    } 
} 

是這樣

function ClassB(sColor, sName){ 
    classA.call(this, sColor); 

    this.name = sName; 
    this.sayName = function(){ 
     alert(this.name); 
    } 
} 

var f = new ClassB("green", "boy"); 
f.sayName(); // boy 
f.sayColor(); // green 

你基本上調用classA構造與this對象的一個​​平庸的方式。

JavaScript沒有類，它只是具有操縱對象的對象和函數。您的ClassA功能操縱this，ClassB也是如此。

ClassA只是一個操縱對象的函數。在這種情況下，它操縱context對象，即this。所有ClassB正在做的是說

• 讓ClassA的操縱this
• 一個名爲name屬性添加到this
• 添加一個方法叫sayName到this

獎勵：

有 一個更好的辦法做到OO在JavaScript

// A is a blueprint for an object with a method sayColor 
var A = (function() { 
    var self = Object.create({}); 
    self.sayColor = function() { 
    alert(this.color); 
    }; 
    return self; 
}()); 

// B is a blueprint for an object with methods sayColor and sayName 
var B = (function() { 
    // clone the methods from A 
    var self = Object.create(A); 
    self.sayName = function() { 
    alert(this.name); 
    }; 
    return self; 
}()); 

// clone B and set the properties for name and color 
var b = Object.create(B, { 
    name: { value: "boy" }, 
    color: { value: "green" } 
}); 

/* or use a factory 

var bFactory = function(name, color) { 
    return Object.create(B, { 
    name: { value: name }, 
    color: { value: boy } 
    }); 
} 

b = bFactory("boy", "green"); 

*/ 

b.sayName(); 
b.sayColor(); 

使用Object.create這是ES5所以使用ES5-shim支持舊版瀏覽器。