2017-11-25 154 views
1

我很奇怪,为什么在这段代码,当我试图访问该garfield制成的,在这种情况下Cat对象的属性,我得到undefinedJS - 原型继承与对象创建功能

function Cat(){ 
    this.legs = 2; 
    this.species = 'cat'; 
}; 

Cat.prototype.makeSound = function() { 
    console.log(this.sound); // logs undefined 
}; 

const garfield = Object.create(Cat); 
garfield.sound = 'feed me'; 
garfield.makeSound(); 
console.log(garfield.legs) // logs undefined 

我不应该能够让原型继承链访问这些属性吗?

回答

3

单词OOP在其定义中包含“对象”;这意味着你正在处理对象。

Javascript做了一些特殊的事情,它直接暴露对象,你可以在没有抽象的情况下使用它们(没有类)。

要创建一个对象,您可以用{}声明它。例如,不需要创建一个类来获得类似于java的类。

要直接使用继承,您需要有一个对象,并将其附加到其原型。

下面是一个例子:

const Cat = { 
 
    legs: 2, 
 
    species: 'cat', 
 
}; 
 

 
Object.setPrototypeOf(Cat, { 
 
    makeSound() { 
 
    console.log(this.sound); // logs undefined 
 
    } 
 
}) 
 

 

 
const garfield = Object.create(Cat); 
 
garfield.sound = 'feed me'; 
 
garfield.makeSound(); 
 
console.log(garfield.legs) //2

使用继承使用功能,你必须先建立函数来获取对象了功能(this)和原型将自动附加到this对象。

function Cat(){ 
 
    this.legs = 2; 
 
    this.species = 'cat'; 
 
}; 
 

 
Cat.prototype.makeSound = function() { 
 
    console.log(this.sound); // logs undefined 
 
}; 
 

 
const garfield = new Cat(); 
 
garfield.sound = 'feed me'; 
 
garfield.makeSound(); 
 
console.log(garfield.legs) // 2

+0

我没有看到一个理由使用'Object.setPrototypeOf'这里,只要把' 'Cat'对象上的makeSound'。 – Bergi

2

在您的例子Object.create创建该类的新实例!它创建一个函数(因为Cat是一个函数,你传递函数的原型)!

使用new创建一个新的实例

const garfield = new Cat(); 
console.log(garfield.legs); 

function GarfieldLikeCat() {} 
GarfieldLikeCat.prototype = Object.create(Cat.prototype); 
GarfieldLikeCat.prototype.constructor = GarfieldLikeCat; 

获得古典继承(不是一个新的实例!)。

如果你没有使用this.legs = 2;,而是Cat.prototype.legs = 2;,你可以使用Object.create创建一个新的实例

function Cat() {} 
Cat.prototype.legs = 2; 
const garfield = Object.create(Cat.prototype); 
console.log(garfield.legs); 
+0

+1。但是请注意,如果不调用构造函数,就不会构造对象(即在本例中'leg'和'species'不会被添加到garfield中),所以它更好的方法是使用'new',直接使用对象,或创建工厂功能。 – Bamieh