正文 

当前位置： 首页 > java > java语法

javascript进阶笔记

夜月天      2022-02-12     622

关键词：

本篇文章我们来学习和讨论一下js中的闭包。闭包是纯函数式编程的一个特性，因为它们能够大大简化复杂的操作。在js中，闭包的重要性不言而喻！

简单的说，闭包(closure)是 一个函数在创建时 允许 该自身函数 访问并操作 该自身函数之外的变量时 所创建的作用域。换句话说，闭包可以让函数访问所有的变量和函数，只要这些变量和函数存在于该函数声明时的作用域内就行。要记住，声明的函数在后续什么时候都可以被调用，即便声明时的作用域消失之后。我们通过下面一小段代码来开始本次学习：

var outerValue="outer";
function outerFunction(){
    //调用函数外部变量outerValue
    alert(outerValue);
}
//执行outerFunction函数
outerFunction();

我们在同一个作用域内声明一个变量outerValue和函数outerFunction()，可以看见，outerFunction()函数能够访问并操作outerValue变量，这样的代码，我们已经写了无数次，但是却没有意识到其实这正在创建一个闭包。这并不奇怪，因为变量outerValue和函数outerFunction()都是在全局作用域内声明的，该作用域(实际上就是一个闭包)从未消失过(因为页面已经被加载了)，不足为奇，该函数outerFunction()可以访问到外部变量outerValue，因为它仍在作用域内并且是可用的。只不过，在这种情况下，即便闭包存在，也不清楚它的好处。

接下来，我们再次演变一下代码：

var outerValue="outer";
var later;

function outerFunction(){
    var innerValue="inner";
    
    function innerFunction(){
        //调用外部函数的innerValue变量
        alert(innerValue); 
        
        //调用外部函数的afterValue变量
        alert(afterValue);         
    }
    var afterValue="after";
    
    //将innerFunction函数引用到later
    later=innerFunction;
}
//执行outerFunction函数
outerFunction();
//执行innerFunction函数
later();

//inner
//after

当outerFunction()函数执行之后，outerFunction()函数的作用域已经消失了。按照函数的作用域来说，通常，此时的innerValue和afterValue变量已不存在了。但是上面的代码真的是这样执行的吗？当然不是！在outerFunction()函数执行之后，我们将内部函数innerFunction的引用赋值给全局变量later来进行调用。此时，later变量引用的innerFunction函数是可用调用到innerValue和afterValue变量的。为什么？因为闭包！

在外部函数outerFunction中声明内部函数innerFunction的时候，不仅仅是声明了innerFunction函数，还创建了一个闭包，该闭包不仅包含函数声明，还包含了内部函数innerFunction声明的那一时刻点上，外部函数作用域中的所有变量。最终当innierFunction函数执行的时候，外部函数outerFunction的作用域已经消失了，通过闭包，innerFunction函数还是可以访问到原始作用域的。

通过以上代码可以看出：

1、内部函数的参数是包含在闭包中的；

2、内部函数作用域之外的所有变量，即便是函数声明之后的那些声明，也都包含在闭包中。

第二点可以解释为什么当外部函数outerFunction的作用域消失之后，内部函数innerFunction还是可以访问innerValue和afterValue变量。

 

javascript进阶--慕课网学习笔记

            JAVASCRIPT—进阶篇给变量取个名字(变量命名)变量名字可以任意取，只不过取名字要遵循一些规则:1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号... 查看详情

javascript进阶学习笔记笔记

基础知识：1）函数的声明方式：普通的声明方式；functionmyFun(m,n)alert(m+n);使用变量初始化函数；VarmyFun=function(m,n)alert(m+n);使用构造函数；varmyFun=newfunction(‘m’,’n’,’alert(m 查看详情

javascript进阶笔记

js是一门函数式语言，因为js的强大威力依赖于是否将其作为函数式语言进行使用。在js中，我们通常要大量使用函数式编程风格。函数式编程专注于：少而精、通常无副作用、将函数作为程序代码的基础构件块。在函数式编程中... 查看详情

javascript进阶笔记

本篇文章我们来学习和讨论一下js中的闭包。闭包是纯函数式编程的一个特性，因为它们能够大大简化复杂的操作。在js中，闭包的重要性不言而喻！简单的说，闭包(closure)是一个函数在创建时允许该自身函数访问并操作该自身... 查看详情

javascript进阶篇——(javascript内置对象---下)--math对象---笔记整理

Math对象使用Math的属性和方法：<scripttype="text/javascript">varmypi=Math.PI;varmyabs=Math.abs(-15);document.write(mypi);document.write(myabs);</script>运行结果:3.14159265358979315Math对象是一个固有的对象，无需创建它，直接把 查看详情

javascript进阶笔记

本篇文章我们来学习和讨论一下js中的闭包。闭包是纯函数式编程的一个特性，因为它们能够大大简化复杂的操作。在js中，闭包的重要性不言而喻！简单的说，闭包(closure)是一个函数在创建时允许该自身函数访问并操作该自身... 查看详情

javascript进阶篇——(dom—节点---属性访问节点)—笔记整理

节点属性在文档对象模型(DOM)中，每个节点都是一个对象。DOM节点有三个重要的属性：　　1.nodeName:节点的名称　　2.nodeValue：节点的值　　3.nodeType：节点的类型一、nodeName属性:节点的名称，是只读的。　　1.元素节点的nodeName与... 查看详情

javascript进阶篇——(dom—节点---插入删除和替换元素创建元素创建文本节点)—笔记整理

插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点。语法:appendChild(newnode)//参数://newnode：指定追加的节点。为ul添加一个li，设置li内容为PHP，代码如下:1<!DOCTYPEHTML>2<html>3<head>4<metahttp-equ... 查看详情

vue学习笔记进阶篇——render函数

...用template来创建你的HTML。然而在一些场景中，你真的需要JavaScript的完全编程的能力，这就是 render函数，它比template更接近编译器。<h1><aname="hello-world"href="#hello-world">Helloworld!& 查看详情

学习笔记js进阶语法一dom基础

内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇 getElementById()和getElementsByTagName()区别：1、 getElementById()获取的是一个元素，而getElementsByTagName()获取的是多个元素，即“类数组”（也成伪数组）... 查看详情

学习笔记js进阶语法一window对象(代码片段)

内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇示例：打开/关闭新窗口<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>打开窗口/关闭窗口</title> <script> window.onload=function... 查看详情

hvie进阶笔记

--mysql方式createtableaccount_channel(account_String,channel_String)asselecta.account,b.channelfromregisterajoin`install`bona.device=b.device--hive方式createtableaccount_channelROWFORMATDELIMITEDFIELDSTER 查看详情

laravel进阶任务笔记

在任务开始，我们会扩展一下新建的数据库表移植文件。刚建立的移植文件只有两列，手动添加如下：publicfunctionup(){Schema::create(‘tasks‘,function(Blueprint$table){$table->increments(‘id‘);$table->integer(‘user_id‘)->index();$table->stri... 查看详情

学习笔记js进阶语法一document对象(代码片段)

内容整理自《从0到1Javascript快速上手》下半部分-进阶语法篇 示例：write()方法和writeln()方法区别 <!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>writeln()方法</title> <styletype="text/css... 查看详情

javascript-进阶篇

JavaScript的内置对象JavaScript中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；对象的方法：能够在对象上执行的... 查看详情

redis进阶笔记

...的成长帮助甚少。本文为大家总结了关于Redis常见用法的进阶指南，希望帮助大家加深对这门技术的理解。文章作者：何永康，腾讯CSIG后台研发工程师。大于1M的话，则每次只会扩容1M，直到达到512M。tureRedis value命令通过CRC16... 查看详情

c语言进阶笔记深入了解进阶指针(代码片段)

目录前言指针进阶字符指针指向常量字符串的指针指针数组指针数组打印数组内容数组指针对数组指针的理解&数组名和数组名数组指针的使用数组参数、指针参数一维数组传参二维数组传参一级指针传参二级指针传参函数指... 查看详情

c语言进阶笔记深入了解进阶指针(代码片段)

目录前言指针进阶字符指针指向常量字符串的指针指针数组指针数组打印数组内容数组指针对数组指针的理解&数组名和数组名数组指针的使用数组参数、指针参数一维数组传参二维数组传参一级指针传参二级指针传参函数指... 查看详情