javascript - 计算器功能不起作用，显示函数未定义

Question

以下功能不起作用并显示“添加未定义”。我通过链接函数调用来计算。

var calc = {
  x: 5,
  add: function(num) {
    x = x + num;
    return x;
  },
  sub: function(num) {
    x = x - num;
    return x;
  },
  set: function(num) {
    x = num;
    return x;
  },
  print: function() {
    console.log(x);
  }
}
calc.set(5).add(3).sub(2).add(10).print();

Answer 1

您需要返回对 calc 的引用而不是数字以允许链接，还可以使用 this 来引用 x 值:

var calc = {
  x : 5,
  add: function(num){
    this.x = this.x+num;
    return this;
  },
  sub :function(num){
    this.x =this.x-num;
    return this;
  },
  set :function(num){
    this.x= num;
    return this;
  },
  print : function(){
    console.log(this.x);
  }
}
calc.set(5).add(3).sub(2).add(10).print();

这是带有 class 语法的 ES6 版本:

class Calc {

  constructor(x = 0) {
    this.x = x;
  }

  add(num) {
    this.x = this.x + num;
    
    return this;
  }
  
  sub(num) {
    this.x = this.x - num;
    
    return this;
  }
  
  set(num) {
    this.x = num;
    
    return this;
  }
  
  print() {
    console.log(this.x);
  }

}

new Calc().set(5).add(3).sub(2).add(10).print();

// or with constructor
new Calc(5).add(3).sub(2).add(10).print();