Javascript Context和Scope的学习总结02【转自cnblogs的JKhuang】-CSDN博客

接上一篇Javascript Context和Scope的学习总结01【转自cnblogs的JKhuang】（可能是segmentfault对单篇文章发布字数有限制，也没有提示，继续编辑chrome就会崩溃）

使用作用域解决上下文问题

接下来，继续看一个例子，我们要在函数setTimeout()中调用方法onTimeout()，具体定义如下：

/**
 * setTimeout function with Broken Context issue
 * @type {Object}
 */
var o = {
    x:23,
    onTimeout: function(){
        console.log("x:", this.x);
    },
    m: function(){
        setTimeout(function(){
            this.onTimeout(); // ERROR: this.onTimeout is not a function
        }, 1);
    }
}
o.m();

同样在函数setTimeout()中调用方法onTimeout()失败，我们知道这是由于方法onTimeout()不能获取对象执行上下文。

我们知道在方法m()中可以获取对象执行上下文，所以可以通过临时变量引用this指向的对象，实例代码如下：

/**
 * Fixs setTimeout function with Broken Context issue.
 * @type {Object}
 */
var o = {
    x:23,
    onTimeout: function(){
        console.log("x:", this.x); // outputs 23
    },
    m: function(){
        
        // Keeps instance reference.
        var self = this;
        setTimeout(function(){
           // Gets m scrope. 
            self.onTimeout();
        }, 1);
    }
}
o.m();

上面，我们通过临时变量self保存了this的引用，由于setTimeout()函数可以获取m()的作用域，所用我们可以通过self. onTimeout()的方式调用onTimeout()方法。

总结

本博文通过介绍执行上下文和作用域的异同、this的使用以及变量对象，让我们加深对Javascript 语言特性的理解。

首先，我们介绍了执行上下文和this的的关系，并且执行上下文是具有对象的；然后，介绍了作用域使变量在作用域范围内可见，并且作用域是基于函数的。

我们通过具体的例子介绍了在不同的作用域和执行上下文中，对this和变量的影响加深了作用域和执行上下文的理解，从而帮助我们更好的阅读和编写代码。

参考