从零开始学习前端JAVASCRIPT — 14、闭包与继承

1:闭包

1 . 概念:闭包就是能够读取其他函数内部变量的函数。在JS中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解为”定义在一个函数内部的函数”。

2 . 闭包的特点

1)可以读取函数内部的变量。

2)让这些变量的值始终保存在内存中。

3 . 闭包的原理

理解闭包,首先必须理解JS变量的作用域。变量的作用域无非就是两种(es5):全局变量和局部变量。

JS语言的特殊之处,就在于函数内部可以直接读取全局变量。另一方面,函数外部自然无法读取函数内的局部变量。

注意:

1)函数内部声明变量的时候,一定要使用var声明。如果不用的话,你实际上声明了一个全局变量。

2)局部变量的作用域,在函数定义的时候就已经确定下来了。

出于各种原因,我们有时候需要得到函数内部的局部变量。但是正常情况下这是办不到的。只有变通一下才能实现,那就是在函数内部再定义一个函数。外部变量不能访问内部变量,内部变量却能访问外部变量,这正是因为JS特有的”链式作用域”结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以父对象的所有变量,对子对象都是可见的,反之则不成立。我们只需要把子函数返回出来,我们就可以在外部读取内部变量了。

4 . 闭包的应用场景

1)函数作为返回值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
    <script>
        function f1() {
            var n = 999;
            nAdd = function () {
                n += 1;
            }
            function f2() {
                console.log(n)
            }
            return f2;
        }
        var result = f1();
        console.log("result的第一次执行")
        result();//999
        console.log("nAdd的执行")
        nAdd();//无输出
        console.log("result的第二次执行")
        result();//1000
    </script>
</body>
</html>

  2)函数作为参数被传递。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
    <script>
        function fun(n, o) {
            console.log(o);
            return {
                fun: function (m) {
                    return fun(m, n);
                }
            };
        }
        var a = fun(0); //undefined
        // 执行完并未销毁保存在内存中
        a.fun(1); //0
        a.fun(2); //0
        a.fun(3); //0

        fun(0).fun(1).fun(2).fun(3);
        //undefined、0、1、2
        var a = fun(0).fun(1);
        //undefined、0
        a.fun(2);
        //undefined、1
        a.fun(3);
        //undefined、1
    </script>
</body>
</html>

5 . 使用闭包注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包。否则会造成网页性能问题,在IE中可能导致内存泄漏。解决方法就是在函数退出之前,将不使用的局部变量删除(值置为null,垃圾回收机制就会处理)。

2)闭包会在父函数外部,改变父函数内部变量的值。所以不要随便改变父函数内部变量的值。

6 . demo通过js闭包实现鼠标滑过隔行换色的效果



2:构造函数的继承

原文地址:https://www.cnblogs.com/witkeydu/p/8491257.html

时间: 2024-10-10 02:35:09

从零开始学习前端JAVASCRIPT — 14、闭包与继承的相关文章

从零开始学习前端JAVASCRIPT — 1、JavaScript基础

1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类型检查. 静态类型:编译的时候就知道每个变量的类型. 解释型:程序不需要编译,程序在运行的时候才翻译成机器语言,每执行一次都要翻译一次,因此效率比较低,但是跨平台性好. 编译型:程序在执行之前需要一个专门的翻译过程,把程序编译为机器语言的文件,运行时直接使用编译的结果就行了. 标记语言:标记语言的存

从零开始学习前端JAVASCRIPT — 5、JavaScript基础ES5

1:ES5简介 ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正. 与HTML5规范进程本质类似,ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化. 2:严格模式的意义 相对于正常模式而言: 1:消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为. 2:消除代码运行的一些不安全之处,保证代码运行的安全. 3:提高编译器效率,增加运行速度. 4:为未来新版本的Java

从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍

Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法. 2:Math属性 PI:返回圆周率(约等于3.14159). 3:Math方法 Math.round(3.6);   // 四舍五入. Math.random();     // 返回大于等于0到小于1之间的随机数. // 随机数如何设定范围 // 0 - 100(包含)

从零开始学习前端JAVASCRIPT — 3、JavaScript基础string字符串介绍

1:字符串 JS中的任何数据类型都可以当作对象来看.所以string既是基本数据类型,又是对象. 2:声明字符串 基本数据类型:var sStr = '字符串'; 对象的方法:var oStr = new String('字符串'); //统计每个字符出现的次数,结果显示 a 2.b 1.c 2.d1,去掉重复的字符,使结果显示 abcdfgj. //var定义的变量赋值字符串以对象[]的方式访问单个字符IE8以上支持 var str="abcdafgcj"; var arr={};

从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

1:DOM(Document  Object  Model)的概念和作用 document对象是DOM核心对象:对html中的内容,属性,样式进行操作. 节点树中节点之间的关系:父子,兄弟. 2:DOM常用属性 title:返回或设置当前文档的标题. all:返回所有元素的集合. forms:返回对文档中所有form对象的引用. 通过集合来访问相应的对象: 1.通过下标的形式. 2.通过name形式. 3:DOM查询方法 1.getElementById(id):返回拥有指定id的(第一个)对象

[六字真言]5.咪.功力不足,学习前端JavaScript异常

A Guide to Proper Error Handling in JavaScript 这是关于JavaScript中异常处理的故事.如果你相信 墨菲定律 ,那么任何事情都可能出错,不,一定会出错!这篇文章中我们来看下JavaScript中的出错处理.文章会覆盖异常处理使用的正反例,然后看下ajax的异步处理. JavaScript的事件驱动机制让JavaScript更加丰富,浏览器好比就是一个事件驱动的机器,错误也是一种事件.当一个错误发生时,一个事件就在某个点抛出.理论上,有人会说错误

从零开始学习前端开发 — 6、CSS宽高自适应

一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法:height:auto;(等同于不给元素设置高度) 三.最小高度,最大高度,最小宽度,最大宽度 1.最小高度 语法: min-height:数值+单位; 注:IE6不识别min-height属性,解决方案如下: 方案一: min-height:100px; _height:100px; 方案二: m

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

从零开始学习前端开发 — 7、常见浏览器兼容性问题及图片整合技术

一.常见浏览器兼容性问题 1.双倍浮动bug 描述:块状元素设置了float后,又设置了横向的margin,在IE6下显示的margin值要比设置的值大 解决方案: 给float的元素添加display:inline;将其转换为行内元素 2.表单元素行高不一致 解决方案: 方案一: 给表单元素添加 vertical-align:middle; 方案二: 给表单元素添加 float:left; 3.IE6不识别高度小于10px的容器 解决方案: 方案一: 给元素设置 overflow:hidden