首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >与关键字this关联的神秘“未定义”

与关键字this关联的神秘“未定义”
EN

Stack Overflow用户
提问于 2019-04-14 09:08:13
回答 2查看 134关注 0票数 -1

我刚刚启动了JS,并感到困惑,为什么当对象blackie进食时,却没有看到显示的对象名称,结果如下:

未定义的

正在进食

我假设名称不会出现,因为this是未定义的。有人能告诉我这是怎么发生的吗?我不明白问题出在哪里,因为下面的构造函数返回一个animal对象。

代码语言:javascript
复制
function Animal(name) {
    let animal = Object.create(Animal.prototype)
    this.name = name

    return animal
}

Animal.prototype.eat = function() {
    console.log(this.name +" is eating.")
}
let blackie = Animal("Blackie");
console.log(blackie.name);
blackie.eat();
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-04-14 09:19:17

如果您想要创建一个带有或不带有new关键字的Animal实例,您可以简单地检查this是否是instanceof Animal -如果不是,则像这样使用return new Animal(name)

代码语言:javascript
复制
function Animal(name) {
  if (!(this instanceof Animal)) {
    return new Animal(name);
  }
  this.name = name
}

Animal.prototype.eat = function() {
  console.log(this.name + " is eating.")
}
// using new
let an1 = new Animal('bear'); an1.eat();
// not using new
let an2 = Animal('giraffe'); an2.eat();

票数 3
EN

Stack Overflow用户

发布于 2019-04-14 10:28:47

OP发布的更新代码为实用主义提供了一个很好的机会,如下所示:

代码语言:javascript
复制
Animal.prototype.eat = function() {
    console.log(this.name +" is eating.");
}

function Animal(name) {
    let animal = Object.create(Animal.prototype);
    animal.name = name;
    return animal;
}

 
let blackie = Animal("Blackie");
console.log( blackie.name);
blackie.eat();

修改后的代码使用新创建的动物对象来尝试访问它自己的名称。原型中的关键字this现在引用了一个有效的对象,因此它的name属性是可访问的,耶!

但是,还有另一种方法可以修复代码,如下所示:

代码语言:javascript
复制
function Animal(name) {
    Object.create(Animal.prototype);
    this.name = name;
    return this;
}

Animal.prototype.eat = function() {
  console.log(this.name + " is eating")
}
let blackie = new Animal("Blackie");
console.log(blackie.name);
blackie.eat();

Object.create()将创建一个对象

...using现有对象作为新创建对象的原型。

请参阅更多信息here

本质上,这个示例需要“return this”来实例化一个Animal对象,以便它可以在构造函数中执行return this操作。注意:关键字this指的是实例化的对象。(顺便说一下,如果您修改代码以遵循@Jaromanda建议的技术,则可以忽略关键字"new“。)

由于使用Object.create()根据另一个对象创建对象很方便,因此下面显示了blackie对象导致这种情况的另一种方法,如下所示:

代码语言:javascript
复制
const another_animal = {
  name: "nobody",
  activity: function() {
    console.log(`${this.name}` + " is napping");
  }
};

const blackie = Object.create(another_animal);
blackie.name = "Blackie";
blackie.drink = function() {
  console.log(`${this.name}` + " came, he saw, he drank");
};

console.log(blackie.name);
blackie.drink();
blackie.activity();

因此,如果您将代码基于现有对象的关键字,也可以省略"new“关键字,如本例所示。请注意,blackie对象扩展了它所基于的another_animal

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55671190

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档