资讯专栏INFORMATION COLUMN

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

Aldous / 1149人阅读

摘要:总结本博文通过介绍执行上下文和作用域的异同的使用以及变量对象,让我们加深对语言特性的理解。首先,我们介绍了执行上下文和的的关系,并且执行上下文是具有对象的然后,介绍了作用域使变量在作用域范围内可见,并且作用域是基于函数的。

接上一篇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和变量的影响加深了作用域和执行上下文的理解,从而帮助我们更好的阅读和编写代码。

参考

http://blog.goddyzhao.me/post...

http://clubajax.org/javascrip...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88097.html

相关文章

  • Javascript ContextScope学习总结01【转自cnblogsJKhuang

    摘要:正文执行环境也称为环境是中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。简而言之,执行环境是基于对象的,而作用域是基于函数的。 前述 在我们学习Javascript过程中,常常会遇到作用域(Scope)和执行上下文(Context)等概念。其中,执行上下文与this关键字的关系密切。 有面向对象编程经验的各位,对于this关键字再熟悉不过了,因此...

    April 评论0 收藏0
  • Javascript this 一些学习总结02转自cnblogsJKhuang

    摘要:发生这种情况的条件是当引用类型值的对象恰好为活跃对象。总结本文介绍中的使用,更重要的是帮助我们能更好地理解值在全局函数构造函数以及一些特例的情况中值的变化。然而,由于对于来说没有任何意义,因此会隐式转换为全局对象。 接上一篇Javascript this 的一些学习总结02【转自cnblogs的JKhuang】 引用类型以及this的null值 对于前面提及的情形,还有例外的情况,当调...

    suemi 评论0 收藏0
  • Javascript this 一些学习总结01【转自cnblogsJKhuang

    摘要:函数上下文中的值是函数调用者提供并且由当前调用表达式的形式而定的。然而,由于对于来说没有任何意义,因此会隐式转换为全局对象。这里注意到四个表达式中,只有第一个表达式是指向对象的,而其他三个表达式则执行。 摘要 相信有C++、C#或Java等编程经验的各位,对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言,它和C++、C#或Java一样都包含this关键字...

    Thanatos 评论0 收藏0
  • javascript作用域,作用域链,[[scope]]属性

    摘要:正式由于作用域链的这种关系,我们就不难理解,为什么和不能通过作用域链向上搜索,因为对和的搜索在当前执行函数的活动对象就停止了。 对于Javascript程序员来说,闭包总会让你觉得既熟悉又陌生,然而它对于开发人员来说却非常重要,javascript里的许多设计模式中都用到了闭包,此处以函数作用域为例。 //示例代码 var a=1; function foo(){ ...

    pkhope 评论0 收藏0
  • JavaScript闭包

    摘要:此时的作用域链包含了两个对象的活动对象和对象。闭包的应用场景保护函数内的变量安全。依然如前例,由于闭包,函数中的一直存在于内存中,因此每次执行,都会给自加。 引子 JS的闭包一直是很多人不理解,也是在使用过程中经常出现问题的地方。每次看文章都会有所了解闭包,但是,用起来还是不对,而且错误百出,其关键问题还是出在对其不理解,不了解。此文章会不定期更新以及完善,希望在我学习的时候,让大家也...

    Tony 评论0 收藏0

发表评论

0条评论

Aldous

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<