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

Posted 2021-04-13

我刚刚开始使用JS，并且对于为什么当对象blackie吃，而不是看到对象显示的名称，结果如下：

undefined正在吃

我假设名称没有出现，因为this未定义。有人可以告诉我这是怎么发生的吗？我不明白问题是什么，因为下面的构造函数返回一个animal对象。

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();

答案

如果你想能够使用或不使用new关键字创建Animal的实例，你可以简单地检查this是否是instanceof Animal - 如果没有，那么return new Animal(name)就像这样

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();

另一答案

OP发布的更新代码提供了一些实用主义的绝佳机会，如下所示：

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相关的神秘“未定义”的主要内容，如果未能解决你的问题，请参考以下文章

getSupportFragmentManager() 在活动扩展片段中未定义

Vue.js 和 vuex：this.$store 未定义

Ruby/Rails 的神秘“未定义常量”问题

未定义不是对象（正在评估this.state）

带有 Typescript 的 Vue3 -> 这个对象可能是未定义的

为什么变量没有未定义？