时间戳

首页 > 解决方案 > 如何在 javascript 原型的控制台中调用函数？

javascript - 如何在 javascript 原型的控制台中调用函数？

问题描述

我使用了下面对我最初问题的回答中的以下代码：

const myForm = {
  text : "Hello",
  span1: '<span>',
  span2: '</span>',
  p1: '<p>',
  p2: '</p>',
  span: function() {
this.text = this.span1 + this.text + this.span2;
return this;
  },
  p: function() {
this.text = this.p1 + this.text + this.p2;
return this;
  }
};

console.log(myForm.p().span().text)

如何修改代码以<p><span>Hello</span></p>在 console.log(myForm.p().span()) 中接收，因为它以错误的顺序添加标签，首先是 p()，然后是 span()，我需要先 span()文本而不是 p() ？

标签： javascriptprototype

解决方案

问题是，由于您希望方法可链接，因此每个方法必须return this，而不是字符串。这意味着console.log(myForm.p().span())将返回完整的对象。您可以执行以下操作：

const myForm = {
  text : "Hello",
  span1: '<span>',
  span2: '</span>',
  p1: '<p>',
  p2: '</p>',
  span: function() {
    this.text = this.span1 + this.text + this.span2;
    return this;
  },
  p: function() {
    this.text = this.p1 + this.text + this.p2;
    return this;
  }
};

console.log(myForm.span().p().text)

您甚至可以走得更远，例如制作一个单一的参数方法：

const myForm = {
  text : "Hello",
  wrap : function(elems) {
    for(let elem of elems.split(",")){
      this.text = `<${elem}>${this.text}</${elem}>`
    }
    return this;
  }
};

console.log(myForm.wrap("span,p,div,header").text);

推荐阅读