主页 / 问题 / 1239906
Accepted
Sire IMPACTUS
Asked:2022-02-04 19:27:40 +0000 UTC2022-02-04 19:27:40 +0000 UTC

有上下文的函数。javascript

  • 772

有一个对象：

const button = {
id: "",
class: "",

instance: function () {
    return Object.assign({}, button);
},
setID(id) {
    this.id = id;
    return this;
},
setClasses(_classes) {
    this.class = _classes;
    return this;
} 
}

我这样称呼：

button.instance()
.setID("button1")
.setClasses("button")

一般来说，一切正常，但有一个问题。我有几个这样的对象，它们的功能是重复的。如何指定函数中的 this 不是对象（按钮），而是我调用它的对象？

我将举一个关于类的例子：有三个类：classOne、classTwo、classMore。所有这些类都有相同的 setTitle() 函数。我没有一次又一次地为所有类指定这个函数，而是决定把它拿出来写一个扩展方法：

<T>.setTitle(String str) {
    ///this в текущем контексте это класс, который я передаю.
    this.title = str;
}

classOne.setTitle("as");
classTwo.setTitle("as2");
classMore.setTitle("as3");

最重要的是，我必须获得与“发送”相同的对象才能继续调用我的函数。用其他语言很容易实现这一点，但是使用 js，甚至使用对象，xs 如何。

相反，如果setID(id) {}我写setID: () => {}，那么我设法传递上下文，但它不再返回。也就是说，如果我这样做：

button.instance()
.setID('asda')
.render() //уже другая функция объекта

然后我得到一个错误，他们说渲染函数不存在。据我了解，这是因为它失去了上下文。该怎么办？

javascript

2 个回答

  1. Best Answer

    这是类和继承的示例。我不知道这是否回答了这个问题。

    class Predok {
  predokMethod(){
    this.predokValue = Date.now();
    return this;
  }
}

class Button extends Predok {
  
  constructor(){
    super();
    
    this.id = "";
    this.classes = "";
  }
  
  setID(id){
    this.id = id;
    return this;
  }
  
  setClasses(classes){
      this.classes = classes;
      return this;
  }
}

let button1 = new Button().setID("button1").setClasses("button 111").predokMethod();
let button2 = new Button().setID("button2").setClasses("button 222").predokMethod();

console.log(button1);
console.log(button2);

    • 1

  2. 原则上，看起来您需要继承。但是根据描述，原型对你来说就足够了，你不需要实现完全继承。

    如果有一个对象具有一定的一组方法：

    var base = {
  setId(id) {
    this.id = id
    return this
  },
  setOther(other) {
    this.other = other
    return this
  }
}

    并且有创建对象的构造函数，然后在向其原型添加方法之前，您可以为原型分配一个基于以下创建的新对象base：

    function Smth(x) {
  this.x = x
}

Smth.prototype = Object.create(base)

    如果对象是直接创建的，那么可以直接在对象的 proto 中放入方法。使用现代语法，可以这样完成：

    var a = {
  __proto__: base,
  y: 2
}

    并使用这样的 ES5 特性：

    var b = Object.create(base)
b.y = 3

    或者像这样（创建一个临时对象）：

    var с = Object.assign(Object.create(base), {
  y: 4
})

    如果对象已经存在，那么理论上现在您可以更改其原型，但大多数消息来源建议不要这样做，以免破坏与该对象交互的所有事物的性能：

    var d = { z: 5 }
Object.setPrototypeOf(d, base)

    您还可以将方法作为 mixins 放入对象中：

    var o = { u: 6 }
Object.assign(o, base)

    顺便说一句，将方法作为 mixins 添加到构造函数原型中也是可能的。

    包含所有选项的完整示例

    var base = {
  setId(id) {
    this.id = id
    return this
  },
  setOther(other) {
    this.other = other
    return this
  }
}

function Smth(x) {
  this.x = x
}

Smth.prototype = Object.create(base)

var s = new Smth(0)

var a = {
  __proto__: base,
  y: 2
}

var b = Object.create(base)
b.y = 3

var c = Object.assign(Object.create(base), {
  y: 4
})

var d = { z: 5 }
Object.setPrototypeOf(d, base)

var o = { u: 6 }
Object.assign(o, base)

function log(obj) {
  console.log(Object.keys(obj).map(function (key) {
    return key + ": " + obj[key]
  }).join("\n"))
}

log(s.setId('s').setOther(100))
log(a.setId('a').setOther(101))
log(b.setId('b').setOther(102))
log(c.setId('c').setOther(103))
log(d.setId('d').setOther(104))
log(o.setId('o').setOther(105))
    .as-console-wrapper.as-console-wrapper { max-height: 100vh }

    • 1

相关问题