将类绑定到JavaScript中类的每个新示例

vcudknz3 于 12个月前发布在 Java

关注(0)|答案(3)|浏览(92)

最近我遇到了一堆JavaScript谜语，在这个谜语上花了一天半的时间（对于上下文，其他的谜语最多花了1个小时）。因为我想自己想出最终的解决方案，我会发布一段类似的代码，这样我就可以抓住大致的想法，并根据谜语的上下文实现它。
假设这是一段代码：

class Vehicle {
  constructor(brand, model, power) {
    this.brand = brand;
    this.model = model;
    this.power = power;
  }

  info() {
    return `This vehicle is a ${this.brand} - ${this.model}, with a power of ${this.power}`;
  }
}

//do something with my class here such that
//the next calls will return/display as follows

const v = new Vehicle('Mercedes', 'C class', 12345);
console.log(v.info()); // This vehicle is a Mercedes - C class, with a power of 12345

const {
  info
} = v;
console.log(info()); // This vehicle is a Mercedes - C class, with a power of 12345


//To keep in mind, the function should stay the same, so a call to (info === v.info) should return true;
//And only the part of the code where it says to enter the code can be changed, so the class should be untouched.

字符串
我知道这不应该是一个情况下，也许它会在日常生活中使用，因为它是一个谜，只是为了挑战我们的大脑，但它挑战了我的点，我给予了哈哈。
我尝试循环Vehicle.prototype的条目，并将每个函数设置为绑定到类的同一个函数，或者类.prototype或类似的东西，但它不起作用。
我如何解决这个问题，或者至少让它在每次创建该类的新示例时都能编辑函数调用？
编辑：我尝试使用bind方法，甚至尝试类似这样的东西

Vehicle.prototype['info'] = Vehicle.prototype['info'].bind(Vehicle.prototype);

Vehicle.prototype['info'] = Vehicle.prototype['info'].bind(Vehicle);

Vehicle.prototype['info'] = Vehicle.prototype['info'].bind(Vehicle.prototype['info']);

型
我尝试了许多替代方法，但都不起作用，因为我必须将它绑定到所创建的类的每个示例。因此，如果创建了一个新示例，并且在那里做了同样的事情，每个示例都将根据从中提取的示例返回数据。

JavaScript

来源：https://stackoverflow.com/questions/77429753/bind-class-to-every-new-instance-of-a-class-in-javascript

3条答案

按热度按时间

ua4mk5z41#

要将info === v.info保持为true，您需要使用bind()。

class Vehicle {
  constructor(brand, model, power) {
    this.brand = brand;
    this.model = model;
    this.power = power;
  }

  info() {
    return `This vehicle is a ${this.brand} - ${this.model}, with a power of ${this.power}`;
  }
}

const v = new Vehicle('Mercedes', 'C class', 12345);
console.log(v.info());

const info = v.info;
console.log(info.bind(v)());

console.log(info === v.info);

字符串

更新：

gog的另一个优雅的解决方案。我在这里添加了它，因为这个问题已经关闭。

class Vehicle {
    constructor(brand, model, power) {
        this.brand = brand;
        this.model = model;
        this.power = power;
    }

    info() {
        return `This vehicle is a ${this.brand} - ${this.model}, with a power of ${this.power}`;
    }
}

let fn = Vehicle.prototype.info
Object.defineProperty(Vehicle.prototype, 'info', {
    get() {
        return this._bound ?? (this._bound = fn.bind(this))
    }
});

const v = new Vehicle('Mercedes', 'C class', 12345);
console.log(v.info());

const {
    info
} = v;

console.log(info());

console.log(info === v.info)

型

赞(0）回复(0）举报 12个月前

jhkqcmku2#

bind()方法应该在类的构造函数中使用，而不是在原型中使用。
如果你想将一个方法绑定到类本身，而不是示例，你可以这样做：

class Vehicle {
 static info() {
   return `This is a vehicle`;
 }
}

Vehicle.info = Vehicle.info.bind(Vehicle);

console.log(Vehicle.info()); // This is a vehicle

字符串
在这种情况下，Vehicle.info = Vehicle.info.bind(Vehicle);将info方法绑定到Vehicle类本身。

赞(0）回复(0）举报 12个月前

5us2dqdw3#

你面临的问题是，当你从v示例中解构info时，你基本上是借用了它的方法，所以this不再被正确绑定，你需要重新绑定它。

class Vehicle {
  constructor(brand, model, power) {
    this.brand = brand;
    this.model = model;
    this.power = power;
  }

  info() {
    return `This vehicle is a ${this.brand} - ${this.model}, with a power of ${this.power}`;
  }
}

//do something with my class here such that
//the next calls will return/display as follows

const v = new Vehicle('Mercedes', 'C class', 12345);
console.log(v.info()); // This vehicle is a Mercedes - C class, with a power of 12345

// here is where the issue starts,
// now info is no longer "connected" to v instance,
// the function is just borrowed from that object
const {
  info
} = v;
// so you need to rebind it before use
console.log(info.bind(v)()); // This vehicle is a Mercedes - C class, with a power of 12345


//To keep in mind, the function should stay the same, so a call to (info === v.info) should return true;
//And only the part of the code where it says to enter the code can be changed, so the class should be untouched.

字符串

赞(0）回复(0）举报 12个月前

我来回答

将类绑定到JavaScript中类的每个新示例

3条答案

更新：

相关问题

热门标签

最新问答