Question

我有以下代码：

class Pet {
    constructor(name) {
        this.petName = name;
    }
}

Pet.prototype.speak = {
    name: function() {
        console.log(this.petName);
    }
};

// -----------------------------------------------

const myPet = new Pet("Max");
myPet.speak.name();

我希望此代码可以打印Max，但是可以打印undefined。

如果我将console.log更改为console.log(this);，则会显示{ name: [Function: name] }。这使我认为该函数无权访问实例属性。

如何确保此功能可以访问实例？

Answer 1

如果您要定位或支持ES6语言功能，一种实现目标的方法是将get方法与arrow function结合使用。

get方法将被声明为get speak()，这意味着它可以在没有括号的情况下被调用。此方法将返回一个包含name()箭头函数的对象。使用箭头功能可以让您通过Pet关键字直接访问封闭的this实例：

class Pet {
    constructor(name) {
        this.petName = name;
    }
    
    // Get method allows the speak method to be called without ()
    get speak() {
      return {
        // Arrow function causes this.petName to refer to petName 
        // field of this class instance 
        name: () => {
          console.log(this.petName);
        }
      }
    }
}
 
const myPet = new Pet("Max");
myPet.speak.name();

const yourPet = new Pet("Min");
yourPet.speak.name();

有关get method syntax and language feature的更多信息。

Answer 2

当您调用这样的函数时：myPet.speak.name();，然后在该函数中this指的是myPet.speak。在您的情况下，这是一个具有一个属性（名称）的对象，其值是一个函数。

如果将speak本身作为函数而不是对象，并使用属性petName代替name，它将起作用：

class Pet {
    constructor(name) {
        this.petName = name;
    }
}

Pet.prototype.speak = function() {
    // myPet has a `petName` property, but no `name` property
    console.log(this.petName);
};

const myPet = new Pet("Max");
myPet.speak(); // this will be `myPet` inside the function

JavaScript-原型函数中的访问类实例属性

2 个答案: