你们真的了解闭包吗？

bigdevil_s 发布于2019-08-23 10:56 / 485人阅读

摘要：前言我们知道所谓的闭包指的就是有权访问另一个函数作用域的变量对象的函数，但是你们真的了解的闭包吗就当你们很了解了，毕竟是基础知识，我就简单说说概念简单几行代码，先说说作用域链的流程，运行到时，会将作用域链保存到中执行到时会创建执行环境，并将

前言

我们知道所谓的闭包指的就是有权访问另一个函数作用域的变量对象的函数，但是你们真的了解JS的闭包吗？就当你们很了解了，毕竟是基础知识，我就简单说说

概念

var a = "july";
function test () {
    var b = "mirok";
    return function() {
        var c = "inner"
        console.log(a);
        console.log(b);
    }
}
test()(); // mirok,july
console.log(c); // error: undefined

简单几行代码，先说说作用域链的流程，运行到test()时，会将作用域链保存到[[Scope]]中,执行到test()时会创建执行环境，并将复制[[Scope]]对象构建执行函数的作用域链。我们知道作用域链寻找规则是往前找的，而闭包是能够将外部函数的活动对象添加到作用域链中的，所以test函数里的闭包就包含了全局的活动对象和test的活动对象，自然就能输出a和b

注意

闭包需要注意的点是它只取外部函数变量最后一个值，例如以下demo:

 function test (){
    var arr = [];
    for (var i=0; i<3; i++) {
        arr[i] = function() {
            return i;
        }
    }
    return arr;
}
for (var i =0; i < test().length; i++) {
    console.log(test()[i]())
}
// 输出三个3

也就是说闭包里作用链中的外部函数的活动对象一直都是i，因为作用域链其实是指向活动对象的指针列表，所以当test返回时i是3，闭包里的也自然是都是3

this指向问题

我们知道this指向函数的执行环境，全局中调用指向window，对象调用指向该对象，但是在对象中函数的闭包的this又指向哪呢？先上代码

var env = "window";
const obj = {
    env: "Obj",
    showEnv: function() {
        return function() {
            console.log(this.env)// 输出window
        }
    }
}

输出window因为本身的this在闭包中就已经存在，因此不会去寻找Obj的this，再不通过call和apply调用的情况下，匿名函数的this指向window的

其实闭包就是这样一块东西

function test() {
    var a = "mirok";
    function show () {
        var b = "july";
        console.log(this);
        return a;
    };
    this.fun = show;
}
const obj = new test();
obj.fun(); // mirok

看看Scopes就知道闭包是什么啦~很容易就能理解的

云服务器 GPU云服务器广告联盟是真的吗 linux系统真的安全吗中国物联网是真的吗 uu492是真的吗

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

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

你们真的了解JS的事件吗？

摘要：基础最后一篇啦，蹭着周六日赶紧写完，其他的都是的或者浏览器能力，高级技巧，使用等杂七杂八的知识点，这里就不一一介绍了，平时编码也用不太到，有兴趣的可以找找相关的书籍前言先说说事件流吧，事件流就是从从开始到目标节点之前的节点进行事件的捕获，在基础最后一篇啦，蹭着周六日赶紧写完，其他的都是DOM,BOM的api或者浏览器能力，高级技巧，Canvas使用等杂七杂八的知识点，这里就不一一介绍...

douzifly 2019-08-23 10:57 评论0 收藏0
面试小结--前端面试的几个雷点

摘要：前言得益于金三银四，在最近一段时间，面试了一些人，但是符合的寥寥无几。看到我的面试题自己写的面试题，自己想的答案。听人说过一个面试套路面试官问的问题，可能面试官自己都不懂，目的只是为了压工资，挫士气。不过我是为了测试面试者是不是真的精通。技术在不断的创新，随着框架，库，构建工具，打包工具，版本控制工具等操作越来越方便，使用越来越简单。面对这样的情况，除了兴奋，也要警惕。这些工具使得开...

idealcn 2019-08-22 16:07 评论0 收藏0
嗨，你真的懂this吗？

摘要：任何一个函数都可以使用来调用，因此其实并不存在构造函数，而只有对于函数的构造调用。不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。 this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在所有函数的作用域中，但是相信很多JsvaScript开发者并不是非常清楚它究竟指向的是什么。听说你很懂this,是真的吗？请先回答第一个问题：如何准...

morgan 2019-08-23 16:18 评论0 收藏0
你们真的了解JS的继承嘛？

摘要：这又是什么呢这个相对之前的比较复杂，但是高效的一点是只调用一次被继承者构造函数原理就是通过寄生方式创建一个被继承者的副本，副本和被继承者共用一个这样就解决了之前的问题返回的一个副本设置指向因为新副本的原型对象被重写副本作为的原型对象前言我们学JAVA的时候说到继承就是一个extends ClassName的事情，但是在JS的世界里继承和我们在JAVA所认识的继承实现方法又有一些不同...

ssshooter 2019-08-23 10:51 评论0 收藏0
Know this, use this! (总结 this 的常见用法)

摘要：而当做普通函数调用的话，实际上即第种情况下，对函数普通调用，此时的指向这是正常情况下，会正确返回并且指向该对象，但是在构造函数当中，如果返回了一个对象，那么会指向返回的那个对象。 this应该是一个讨论了很久的话题了。其中，关于this的文章，在很多的博客当中也有很多介绍，但是，以前我都是一知半解的去了解它，就是看博客当中，只介绍了一些情况下的 this 的使用方式，但是也并没有自己去...

zorro 2019-08-21 14:21 评论0 收藏0