Javascript重温OOP之作用域与闭包

JessYanCoding 发布于2019-08-21 10:56 / 1234人阅读

摘要：的变量作用域是基于其特有的作用域链的。需要注意的是，用创建的函数，其作用域指向全局作用域。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。

作用域 定义

在编程语言中，作用域控制着变量与参数的可见性及生命周期，它能减少名称冲突，而且提供了自动内存管理 --javascript 语言精粹

我理解的是，一个变量、函数或者成员可以在代码中访问到的范围。

js的变量作用域是基于其特有的作用域链的。

全局变量都是window对象的属性

没有块级作用域

函数中声明的变量在整个函数中都有定义。

//全局作用域
var a = 10;

//没有块级作用域
if(fasle){
    var b =2;
}

//函数作用域
function f(){
    var a = 1;
    console.log(a);
}

作用域链

作用域链是一个对象列表，上下文代码中出现的标识符在这个列表中进行查找。

如果一个变量在函数自身的作用域（在自身的变量/活动对象）中没有找到，那么将会查找它父函数（外层函数）的变量对象，以此类推。

举个栗子：

function f (){
    var x =100;
    function g(){
        console.log(x);
    }
    g();
}
f();

这里形成了一条作用域链，当函数g访问不到变量时，它会通过内部的[[scope]]对象查找作用域链上的执行上下文，当找到就终止，找不到会继续，直到window对象上也没有的时候，会报错。

需要注意的是，用new Function创建的函数，其作用域指向全局作用域。

function f(){
    var x = 100;
    // g.[[scope]] == window
    var g = new Function("", "alert(x)");

    g();
}
f();
//报错 x is not defined

闭包 闭包的含义

在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。--维基百科

我的理解就是，一个函数捕获其父函数的自由变量，这就形成了闭包。

栗子：

function f1(){
    var a = 10;
    var b = 20;
    return function f2(){
        console.log(a);
    }
}
var result = f1();
result();

闭包的本质

作用域链的存在

闭包的好处

减少全局变量

减少传递给函数的参数数量

封装

使用闭包的注意点

对捕获的变量只是个引用，不是复制

function f(){
    var num = 1;
    function g(){
        alert(num);
    }

    num++;
    g(); //2
}
f();

父函数每调用一次，会产生不同的闭包

function f(){
    var num = 1;
    return function(){
        num++;
        alert(num);
    }
}
var result1 =f();
result1();
result1();
var result2 =f();
result2();
result2();
//两次都弹出一样的数值

循环中出现的问题

for (var i = 1; i <= 3; i++) {
    var ele = document.getElementById(i);
    ele.onclick = function(){
        alert(i);
    }
};
// i为4

解决方法：

for (var i = 1; i <= 3; i++) {
var ele = document.getElementById(i);
    ele.onclick = (function(id){
        return function(){
        alert(id);
    }})(i);
};
// 1，2，3

云服务器私有云 javascript闭包 javascript闭包详解 javascript作用 javascript的作用

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

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

JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
Javascript重温OOP之面向对象

摘要：类的继承建立继承关系修改的指向调用父类方法调用父类的构造器调用父类上的方法封装命名空间是没有命名空间的，因此可以用对象模拟。参考资料面向对象面向对象程序设计（Object-oriented programming，OOP）是一种程序设计范型，同时也是一种程序开发的方法。对象指的是类的实例。它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性。——维基百...

AbnerMing 2019-08-22 10:33 评论0 收藏0
小菊花课堂之JavaScript作用域与闭包

摘要：而闭包却能阻止这件事情发生。由于的声明位置使它拥有涵盖内部作用域的闭包，使得该作用域能够一直存在，以供在之后进行引用。到这里，小菊花课堂之闭包的内容就告一段落啦，感谢各位能耐心看到这里。由于前段时间项目没有那么忙，然后我这人一天不看点啥就非常焦虑，于是二刷《你不知道的JavaScript》，现在读到闭包，想着看完这一章节，写点东西也是挺好的，所以有了下面的内容，如有不对的地方，敬请斧...

lunaticf 2019-08-23 12:36 评论0 收藏0
Javascript重温OOP之原型与原型链

摘要：在构造函数中的中定义的属性和方法，会被创建的对象所继承下来。从上面的输出结果看出，指向了其构造函数的，而本身也是一个对象，其内部也有属性，其指向的是直到最后指向，这条原型链才结束。和都指向，说明原型链到终止。 prototype原型对象每个函数都有一个默认的prototype属性，其实际上还是一个对象，如果被用在继承中，姑且叫做原型对象。在构造函数中的prototype中定义的属性...

lindroid 2019-08-21 10:57 评论0 收藏0
Javascript重温OOP之JS的解析与执行过程

摘要：了解面向对象编程之前，首先要了解的执行顺序。的解析过程分为两个阶段预处理阶段与执行期。在执行阶段的执行上下文对象由赋值为指向对应函数了解js面向对象编程之前，首先要了解js的执行顺序。js的解析过程分为两个阶段：预处理阶段与执行期。预处理阶段在预处理阶段，js会首先创建一个执行上下文对象（Execute Context,然后扫描声明式函数和用var定义的变量，将其加入执行上下文环...

xumenger 2019-08-21 10:56 评论0 收藏0