将方法添加到字符串变量的原型

Question

预期:当使用createGreetable创建变量时，它应该有一个由greetable(text)设置的附加属性greet。通常的string方法仍然可以在这个变量上调用。

What I Tried:

const greetablePrototype = {
greetable: function(greeting) {
this.greet = `${greeting}, ${ this.valueOf() }!`
}
}
function createGreetable(str) {
const result = new String(str);
Object.setPrototypeOf(result, greetablePrototype)
return result;
}
const t = new createGreetable("world");
t.greetable("hello");
console.log(t.greet);
console.log(t.length);

输出:

hello, [object String]!
5

预期输出:

hello, world!
5

Answer 1

您可以扩展字符串class:

class Greetable extends String {
greet (greeting) {
return `${greeting}, ${this}!`;
}
}
const g = new Greetable('world');
g.greet('hello'); // hello, world!
g.length // 5

Answer 2

需要对代码进行一些修改才能使其按预期工作:

1. 在greetable原型函数中增加this.length以每次更新字符串长度(记住这是一个字符串对象)
2. 在构造函数中将const result行更改为this.greet，将this的原型设置为greetablePrototype，然后返回对象return this的实例。

const greetablePrototype = {
greetable: function(greeting) {
this.greet = `${greeting}, ${this.greet}!`
this.length = this.greet.length;
}
}
function createGreetable(str) {
this.greet = String(str);
Object.setPrototypeOf(this, greetablePrototype)
return this;
}
const t = new createGreetable("world");
t.greetable("hello");
console.log(t.greet);
console.log(t.length);

Answer 3

const greetableProto =  {
greet: function greet(greeting) {
return `${greeting}, ${this}!`;
}
}
Object.setPrototypeOf(greetableProto, String.prototype);
function createGreetable(str) {
const result = new String(str);
Object.setPrototypeOf(result, greetableProto);
return result
}

const g2 = createGreetable('Mark')
console.log(g2.greet('Hello'))