执行作为变量给出的函数

时间:2012-11-22 20:56:12

标签: javascript function variables scope this

我创建了以下对象:

function Calculator() { 
    //some code here, including object variables and functions, such as:
    this.add = function(x) {
       //again, irrelevant code
    }
    //similar methods
}


var calc = new Calculator();

然后,我尝试执行以下操作:

var met = calc.add;
met(5);

但它没有用。

(我已经检查了所有内容 - 变量'遇到'类型'功能',当我"警告"可以肯定,它警告正确的字符串 - function(x){...}等。但调用met(7)什么都不做,而调用calc.add(7)则添加数字)

有谁知道为什么,或者我该如何解决? (我可以解决它吗?)

4 个答案:

答案 0 :(得分:1)

实际上,add内的功能并不相关。您遇到的问题是因为this在javascript中的行为方式。

当你这样称呼时:

met(5);

就像这样做:

window.met(5); // assuming browsers

这意味着met中的this绑定到全局对象。所以它不起作用的原因是因为你试图添加的变量在全局对象中不存在。您可以通过在全局对象中声明该变量(对于浏览器碰巧是全局变量)来测试它:

var foo = {
    i = 0,
    incr = function(){ return ++this.i }
}
foo.incr(); // this works as expected

// now assign foo.incr to the global object:
var inc = foo.incr;
inc(); // this fails because window.i doesn't exist

// create i in window
i =0;
inc(); // now this works, maybe a bit unexpected

如果您想简单地将add替换为met,但仍然对calc对象进行操作,则您有两种选择。第一个是确保将add作为calc的方法调用:

var met = function(x) { return calc.add(x) };
met(5);

这很简单,它按预期工作。通过添加匿名函数包装器,我们可以将add称为calc.add(),这会使this绑定到calc。

第二个是@Guffa所提到的:使用call或apply to this到你想要的任何地方:

var met = calc.add;
met.call(calc,5);

要详细了解this在javascript中的工作原理,请阅读以下内容:How does the "this" keyword in Javascript act within an object literal?

答案 1 :(得分:0)

当您获得对方法的引用时,您只是获取该函数,它不再连接到该对象。如果你调用该函数,this并不是对象的引用,它就是全局window对象,这就是函数中的代码不再有效的原因。

要将其作为方法调用,您需要进行调用,指定它应作为对象的方法运行:

met.call(calc, 5);

答案 2 :(得分:0)

有效。你没有自己认为的问题。

function Calculator() { 
    //some code here, including object variables and functions, such as:
    this.add = function(x) {
       alert('bob');
    }
    //similar methods
}

var met = new Calculator().add;

met();//'bob'

你可能正在遇到其他人建议的某种范围问题。 met应该可以访问在add方法之上建立的任何var。

答案 3 :(得分:0)

你必须要记住的是,每次调用一个函数时,就好像这个是一个隐藏参数,而不是在调用函数并保存在函数闭包中时设置的东西。

当您致电met(5)时,以下内容将输出到控制台:

function Calculator() {
    y = 10; // set variable

    this.add = function(x) {
       console.log( this.y ); // => undefined as window object does not have y
       console.log( y ); // => 10 as function can access parent function's closure

       function printY( ) {
            console.log( y ); // => undefined as this function can only access parent function's closure and that does not contain a y variable.
       }
    }
}