Наследование в 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

Как this работает

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 для поддержки устаревших браузеров.