Question

我的情况就是这样：

function s () {
    this.funcs = []; 
    this.funcs.addF = function (str) {
        /* this will push a function to the funcs array, which uses getCoordX() and getPixelY() */
        this.push (Function("pixelX", "var x = getCoordX(pixelX); var f = " + str + "; return getPixelY(f);"));
    }
    function getCoordX(a){
        return 0;
    }
    function getPixelY(a){
        return 0;
    }
}

如您所见，在该数组中我添加了从字符串创建的函数，这些函数需要使用getCoordX（）和getPixelY（），它们位于s（）对象中。当我尝试访问它们时会出现此错误：未捕获的ReferenceError：未定义getCoordX 。

我该怎么做才能让它发挥作用？请帮忙。

修改2

我将如何使用此代码：

function s () {
    this.funcs = []; 
    this.funcs.addF = function (str) {
        /* this will push a function to the funcs array, which uses getCoordX() and getPixelY() */
        this.push (Function("pixelX", "var x = getCoordX(pixelX); var f = " + str + "; return getPixelY(f);"));
    }

    this.drawCanvas = function() {
        //some code goes here
        this.drawGraph(c);
    }

    this.drawGraph = function (c) {
        c.lineWidth = 2;
        var cnt = 0;    //count how many pixels have been rendered

        for(var i = this.limitLeft; i < this.limitRight; i+= this.pixelwidth) {

            for(var u = 0; u < this.funcs.length; u++) {
                var f = this.funcs[u];
                //some if statements go here
            }
        }
    } 

    function getCoordX(a){
        return 0;
    }
    function getPixelY(a){
        return 0;
    }
}

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.id = "canvas";

document.body.appendChild(canvas);
var c = new Canvas("canvas");
c.funcs.addF("2*x");
c.drawCanvas();

Answer 1

this并非隐含在JavaScript中，您必须对其进行精确处理。也不要使用字符串来创建函数，只需使用

this.funcs.addF = function (str) {
    var obj = this;
    /* this will push a function to the funcs array, which uses getCoordX() and getPixelY() */
    this.push (function(pixelX){
        var x = obj.getCoordX(pixelX);
        return obj.getPixelY(str);
    });
}

Answer 2

您可以这样做：

function s () {
    this.funcs = []; 
    this.funcs.addF = function (str) {
    /* this will push a function to the funcs array, which uses getCoordX() and getPixelY() */
    this.push (Function("pixelX", "getCoordX", "getPixelY", "var x = getCoordX(pixelX); var f = " + str + "; return getPixelY(f);"));
}

this.drawCanvas = function() {
    //some code goes here
    this.drawGraph(c);
}

this.drawGraph = function (c) {
    c.lineWidth = 2;
    var cnt = 0;    //count how many pixels have been rendered

        for(var i = this.limitLeft; i < this.limitRight; i+= this.pixelwidth)        {

            for(var u = 0; u < this.funcs.length; u++) {
                var f = this.funcs[u];
                var currvalue = f(i, getCoordX, getPixelY);
                var lastvalue = f(i-1, getCoordX, getPixelY);
                //some if statements go here
            }
        }
    } 

    function getCoordX(a){
         return 0;
    }
    function getPixelY(a){
        return 0;
    }
}

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.id = "canvas";

document.body.appendChild(canvas);
var c = new Canvas("canvas");
c.funcs.addF("2*x");
c.drawCanvas();

这样做。希望这会有所帮助;）

Answer 3

问题是Function构造函数创建了在全局范围内运行的函数。因此，您的功能无法访问关闭中的getCoordX。

您可以制作getCoordX和getPixelY全局函数：

＆＃13;

function getCoordX(a) {
  return a;
}
function getPixelY(a) {
  return a;
}
function s() {
  this.funcs = []; 
  this.funcs.addF = function (str) {
    this.push(new Function("pixelX",
      "var x = getCoordX(pixelX);" +
      "var f = " + str + ";" +
      "return getPixelY(f);"
    ));
  };
}
var obj = new s();
obj.funcs.addF('x*3 + 5');
console.log(obj.funcs[0](1)); // 8

＆＃13;

或者，您可以仅使用Function构造函数来评估str，并将其他代码移到外面。

＆＃13;

function s() {
  this.funcs = []; 
  this.funcs.addF = function (str) {
    var f = new Function('x', 'return ' + str);
    this.push(function(pixelX) {
      var x = getCoordX(pixelX);
      return getPixelY(f(x));
    });
  };
  function getCoordX(a) {
    return a;
  }
  function getPixelY(a) {
    return a;
  }
}
var obj = new s();
obj.funcs.addF('x*3 + 5');
console.log(obj.funcs[0](1)); // 8

＆＃13;

这里有一个完整的画布示例：

＆＃13;

function s() {
  this.funcs = []; 
  this.funcs.addF = function (str) {
    var f = new Function('x', 'return ' + str);
    this.push(function(pixelX) {
      var x = getCoordX(pixelX);
      return getPixelY(f(x));
    });
  };
  this.drawGraph = function(c) {
    c.lineWidth = 2;
    for(var u = 0; u < this.funcs.length; u++) {
      var f = this.funcs[u];
      c.beginPath();
      c.moveTo(0, 200-f(0));
      for(var x=1; x<400; ++x) c.lineTo(x, 200-f(x));
      c.stroke();
    }
  };
  function getCoordX(a) {
    return a;
  }
  function getPixelY(a) {
    return a;
  }
}
var canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 200;
document.body.appendChild(canvas);
var c = new s("canvas");
c.funcs.addF(".5*x");
c.funcs.addF("x + 50");
c.funcs.addF("3*x + 100");
c.drawGraph(canvas.getContext('2d'));

＆＃13;

JavaScript中的函数调用层次结构

3 个答案: