关于Js对象内部的函数调用

Question

代码大体框架如下：

var page ={
    init:function () {
        this.onLoad();
        setTimeout('this.bindEvent()',2000);
    },
    onLoad:function () {
        ...
    },
    bindEvent:function () {
        ...
    },
    ...
}

为什么老是提示：

Answer 1

var page ={
    init:function () {
        this.onLoad();
        setTimeout(this.bindEvent,2000);
    },
    onLoad:function () {
        console.log('A');
    },
    bindEvent:function () {
        console.log('B');
    }
}
page.init()

---

换种不给bindEvent绑全局作用域的写法：

var page ={
    init:function () {
        this.onLoad();
        setTimeout(function(){
            page.bindEvent();
        },2000);
    },
    onLoad:function () {
        console.log('A');
    },
    bindEvent:function () {
        console.log('B');
        this.omg();
    },
    omg:function () {
        console.log('C')
    }
}
page.init();

Answer 2

setTimeout()使用字符串作为第一个参数时，js内部将会调用eval()函数来动态执行，而eval()函数动态执行脚本时，并没有在全局作用域找到bindEvent()这个函数。

setTimeout('console.log(this)',2000);//window

eval()函数有太多不可预知的危险，所以一般不推荐使用字符串作为setTimeout()的第一个参数

setTimeout(this.bindEvent,2000);这样就可以啦

Answer 3

setTimeout('this.bindEvent()',2000);
这里 this 指向 window 吧，
看错了，抱歉。

Answer 4

 init:function () {
        this.onLoad();
        setTimeout('this.bindEvent',2000);
    },

改成上面这样，this.bindEvent是一个函数，this.bindEvent()是执行这个函数，得到的结果是一个该函数的返回值，而setTimeout期望这个位置是一个函数而不是一个值

Answer 5

// 全局变量 page
var page = {

init:function () {
    this.onLoad();
    // 定时器 执行函数 还是别传字符串的好 很容易进坑
    setTimeout('this.page.bindEvent()',2000);
},
onLoad:function () {
    alert('A');
},
bindEvent:function () {
    alert('B');
}

}

page.init();