javascript学习笔记(1)

Chaz 发布于2019-08-21 10:31 / 1275人阅读

摘要：关于作用域实现的描述任何执行上下文时刻的作用域，都是由作用域链来实现的。在一个函数被定义的时候，会将它此时的作用域链链接到这个函数对象的属性。参考资料鸟哥作用域原理理解作用域和作用域链阮一峰老师微博上的关于作用域的一道题

javascript作用域原理学习

　　在每次调用一个函数的时候，就会进入一个函数内的作用域，当从函数返回
以后，就会返回调用前的作用域。
　　ECMA262关于作用域实现的描述：

任何执行上下文时刻的作用域，都是由作用域链(scope chain)来实现的。
在一个函数被定义的时候，会将它此时的作用域链链接到这个函数对象的[[scope]]属性。
在一个函数被调用时，会创建一个活动对象，然后对于函数的每一个形参，都命名为该活动对象的命名属性,然后将这个活动对象做为此时的作用域链最前端，并将这个函数的[[scope]]属性加入到作用域链中。

用例子说明。来自鸟哥的博客；

function factory() {
     var name = "Elric";
     var intro = function(){
          alert("I am " + name);
     }
     return intro;
}

function app(para){
     var name = para;
     var func = factory();
     func();
}

app("eva");

我是这么理解的：
因为

JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.

所以，intro的作用域链应该是 intro --> factory --> window
当调用进入到intro时，对name的查找不会进入app的作用域，所以输出的值是Elric

再来一个例子。来自阮一峰老师的微博；

function a(x, y) {
    y = function(){
        x = 2;
    };
    return function() {
        var x = 3;
        y();
        console.log(x);
    }.apply(this, arguments);
}

a();// 3

我是这么理解的：
按照定义来，return的匿名函数的作用域链应该是[[scope]] --> a -->window
所以，在调用的时候，它最先找到的是自己的x的值，而执行y，修改的是a中的x的值。
如果把代码改成：

function a(x, y) {
    var x = 1;
    y = function() {
        x = 2;
    };
    return function() {
        y();
        console.log(x);
    }.apply(this, arguments);
}

a();// 2

这里输出的本来应该是1，但是！但是执行了y，y把a中的x修改成2.因为y的作用域链是y -->a -->window;

然后，在segmentfault上看到的

function a(x, y) {
    var name = 1;
    y = function() {
        x = 2;
    };
    return function() {
       var name = 3;
        y();
        console.log(this.x);
    }.apply(this, arguments);
}

a();// undefined

我简单的理解为，这里的this.x相当于window.x。所以是undefined。

总结：

JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.
从定义出发去分析函数的作用域，而不是通过调用的顺序。

参考资料
1.鸟哥：Javascript作用域原理　　
2.理解 JavaScript 作用域和作用域链
3.阮一峰老师微博上的关于js作用域的一道题

GPU云服务器云服务器 javascript学习笔记学习笔记学习笔记一基础学习笔记

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

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

重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

摘要：对象有状态对象具有状态，同一对象可能处于不同状态之下。中对象独有的特色对象具有高度的动态性，这是因为赋予了使用者在运行时为对象添改状态和行为的能力。小结由于的对象设计跟目前主流基于类的面向对象差异非常大，导致有不是面向对象这样的说法。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些...

mayaohua 2019-08-02 16:15 评论0 收藏0
重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

摘要：对象有状态对象具有状态，同一对象可能处于不同状态之下。中对象独有的特色对象具有高度的动态性，这是因为赋予了使用者在运行时为对象添改状态和行为的能力。小结由于的对象设计跟目前主流基于类的面向对象差异非常大，导致有不是面向对象这样的说法。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些...

yy736044583 2019-08-29 18:47 评论0 收藏0
重学前端学习笔记（七）--JavaScript对象：面向对象还是基于对象？

摘要：对象有状态对象具有状态，同一对象可能处于不同状态之下。中对象独有的特色对象具有高度的动态性，这是因为赋予了使用者在运行时为对象添改状态和行为的能力。小结由于的对象设计跟目前主流基于类的面向对象差异非常大，导致有不是面向对象这样的说法。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些...

xingpingz 2019-08-23 17:17 评论0 收藏0
JavaScript框架学习笔记（一）

摘要：基本的学习思路是跟着框架设计这本书，甚至可以说是这本书的读书笔记。也参考很多网上解读的博客和学习资料。当然，最重要的资料还是框架的源代码。后来由于开发者反对，新兴的框架都在命名空间上构建。 JavaScript框架学习笔记（一）我为什么要学习框架更深入的理解工具，以后用起来更顺手而且也能做一定的工具取舍，学习理解新工具也就更快，对提升js水平也很有帮助，框架有很多解决坑的经典思...

Shonim 2019-08-19 18:10 评论0 收藏0
JavaScript高级程序设计学习笔记一（JavaScript简介）

摘要：在上百种语言中算是命好的一个，还有就是最近纳入高考体系的。由以下三个部分构成。就是对实现该标准规定的各个方面内容的语言的描述。是针对但经过扩展的用于的应用程序编程接口。将页面映射为由节点构成的树状结构。 JavaScript的历史这里就不再赘述了，当然JavaScript的历史还是比较有意思的。在上百种语言中JavaScript算是‘命’好的一个，还有就是最近纳入高考体系的python...

supernavy 2019-08-22 11:17 评论0 收藏0