JS闭包

最新推荐文章于 2023-05-27 15:22:43 发布
最新推荐文章于 2023-05-27 15:22:43 发布
阅读量202 收藏
点赞数
分类专栏： 前端 文章标签： 闭包 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangning_elsa/article/details/55006785
版权

今天将用demo继续学习闭包，function scope。
以下是一个实现，思维还是很混乱，暴露出了问题。

function outerTest(){
    var arr = [];
    for(var i=0;i<5;i++){
        arr[i] = function(num){
          return innerTest(num);
        }(i)
    }
    return arr;
}
function innerTest(i){
    var t=setTimeout("console.log(i)",2000);
    return i;
}
var test = outerTest();
for(var i=0;i<5;i++){
    console.log(test[i]());
}

以下是实验代码，闭包部分理解不够，在网上找的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
</head>

<body>
    <div id="wrap">
        <input type="button" value="按钮一" />
        <input type="button" value="按钮二" />
        <input type="button" value="按钮三" />
        <input type="button" value="按钮四" />
        <input type="button" value="按钮五" />
    </div>
</body>
<script type="text/javascript">
//原型链
function Super() {
    this.type = "玩具";
}
Super.prototype.say = function() {
    console.log("我是" + this.type + "</br>");
}

function Sub(type) {
    this.type = type;
}

Sub.prototype = new Super();

var sub = new Sub("毛绒");
sub.say();
console.log(sub.constructor + "</br>");
console.log(sub.__proto__ + "</br>");
console.log(Sub.prototype + "</br>");
console.log(Sub.constructor + "</br>");
console.log(Super.prototype.isPrototypeOf(sub) + "</br>");
//借用构造函数
function Super1(name) {
    this.say = function() {
        console.log(name + "只想做一个安静的美男子");
    }
}

function Sub1(name) {
    Super1.call(this, name);
}
var sub1 = new Sub1("安娜");
sub1.say();
//组合继承，复用+自己
function Super2(name) {
    this.type = "玩具";
    this.say = function() {
        console.log(name + "只想做一个安静的美男子");
    }
}
Super2.prototype.but = function() {
    console.log("却因为太帅无法实现");
}

function Sub2(name) {
    Super1.call(this, name); //调用super构造函数1次
}
//var sub2 = new Sub2("安娜");
//sub2.say();
//sub2.but();//sub2.but is not a function
Sub2.prototype = new Super2(); //调用super构造函数2次
var sub22 = new Sub2("安娜");
sub22.say();
sub22.but();
//原型式继承
var Super3 = {
        type: "玩具",
        size: ["big", "small", "media"]
    }
    //将对象传入object返回新对象
var sub3 = Object(Super3);
sub3.size.push("你猜");
var sub31 = Object(Super3);
sub31.size.push("还有什么");
console.log(sub31.size);
//寄生式继承
//把Object(Super3)当做函数封装了，该引用还得引用

//寄生组合式继承，不必指定子类的原型调用超类的构造函数
function bridge(subO, superO) {
    var prototype = Object(superO.prototype); //调用1次super方法
    prototype.constructor = subO; //增强对象
    subO.prototype = prototype; //指定对象
}
//闭包的实现
//function outer(){
//  var res = [];
//  return function(){
//    for(var i=0;i++;i<5){
//      res[i] = i;
//    }
//  }
//}
//var res = outer();
//console.log(res);
//console.log(res[1]);

//写的不对，再来
//function outer(){
//  var res = [];
//  return res[i] = function(){
//    for(var num=0;num++;num<5){
//      res[num] = num;
//    }
//  }
//}
//写的不对，再来
//function outer(){
//  var res = [];
//  for(var num=0;num<5;num++){
//    res[num] = num;
//  }
//  return res;
//}
//var res = outer();
//for(var num=0;num<5;num++){
//  console.log(res[num]);
//}
//写的不对，再来
//并不是res[num] = num;那么简单
function outer() {
    var res = [];
    for (var num = 0; num < 5; num++) {
        res[num] = function() {
            return num;
        };
    }
    return res;
}
var funcs = outer();
for (var num = 0; num < 5; num++) {
    console.log(funcs[num]());
}
console.log("那么闭包的使用场景是？");
//按钮点击绑定
//轮询取回数据
//达到闭包所要的效果,不是返回绑定的事件而是值
//1.匿名函数里的匿名函数
//按钮点击绑定
var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');

wrap.onclick = function(ev) {
    var ev = ev || window.event,
        target = ev.target || ev.srcElement;
    for (var i = 0, l = inputs.length; i < l; i++) {
        if (inputs[i] === target) {
            alert(i)
        }
    }
}

//2.函数里的外部函数
//业务中用到
function fetEchMore(oneData) {
    var defer = $.Deferred();
    if (oneData !== undefined) {
        QN.top.invoke({
            cmd: 'taobao.ump.promotion.increment.get',
            param: {
                item_id: oneData.base_info.item_id
            },
            success: function(rsp) {
                oneData.ump = rsp.ump_promotion_increment_get_response.promotions.promotion_in_item.item_promo_price;
                defer.resolve(oneData);
            },
            error: function(error) {
                console.log(error);
                defer.reject();
            }
        });
    }
    return defer.promise();
}

function fetchMoreRecursive(startIndex, data) {
    if (data !== undefined) {
        fetchMore(data[startIndex]).then(function(res) {
            console.log(res); //监测字段是否添加成功
            if (data[++startIndex] !== undefined) {
                fetchMoreRecursive(data)
            }
        });
    }
};
//闭包中的this对象
var name = 'Jack';
var o = {
    name: 'bingdian',
    getName: function() {
        return function() {
            return this.name;
        };
    }
}

console.log(o.getName()()); //Jack
var name = 'Jack';

var o = {
    name: 'bingdian',

    getName: function() {
        var self = this;
        return function() {
            return self.name;
        };
    }
}

console.log(o.getName()()); //bingdian


发现理解的不到位, 只是一个例子在错误的理解下看上去刚好解释的通， 今天将继续学习闭包，
function scope, 以下是一个实现， 思维还是很混乱， 暴露出了问题。
function outerTest() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        arr[i] = function(num) {
            return innerTest(num);
        }(i)
    }
    return arr;
}

function innerTest(i) {
    var t = setTimeout("console.log(i)", 2000);
    return i;
}
var test = outerTest();
for (var i = 0; i < 5; i++) {
    console.log(test[i]());
}
</script>

</html>
wangning_elsa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 闭包传参_JavaScript 闭包图文解析
weixin_35417884的博客
01-16 493
什么是闭包？我们来看看 MDN上的解释：Aclosureis the combination of a function bundled together (enclosed) with references to its surrounding state (thelexical environment). In other words, a closure gives you acce...
JavaScript闭包函数
thwr1881的博客
05-20 1058
闭包函数 1、什么是闭包函数 闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。 2、闭包函数的作用 A、可以在函数外部读取函数内部的变量（局部变量） B、可以让函数内部局部变量的值始终保存在内存中 3、闭包函数的优缺点 ...
JavaScript 闭包
weixin_53526046的博客
12-01 793
本地全局闭包。
JS闭包详解
linfeng_meng的博客
09-05 6384
js中闭包closure,是指函数变量可以保存在函数作用域内,因此看起来是函数将变量“包裹”了起来,根据定义,包含变量的函数就是闭包。当两个函数彼此嵌套时，内部的函数就是闭包。闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。
JavaScript闭包详解
w1404273025的博客
07-24 1022
JavaScript闭包详解
JavaScript闭包
最新发布
前端学习笔记
05-27 986
在了解闭包之前，需要先了解几个概念，这样更容易理解闭包的优缺点。js中的基础类型、对象、函数等内容在创建之初会被存储在内存中，当这些内容不再被调用的时候，说明这些内容就没有继续保留的必要了，也就是说，它们已经变成了垃圾。程序在运行过程中会产生很多垃圾，这些垃圾会占用很多的内存，JS引擎会定期对这些垃圾进行清除。无法被及时清除的无用内存。可以简单的理解成变量能被够调用的范围或区域。可以调用其它函数内部变量的函数。说人话就是，在函数内部定义一个新函数，并把这个新函数返回出去，就是闭包。
js闭包通俗讲解
Webbei的博客
09-07 496
在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问其外部函数中声明的变量，当通过调用一个外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包。闭包的不同在于，在销毁函数上下文时，发现该函数内变量被返回的函数调用，因为将产生一个函数名(closure)的对象，用来存放该局部变量。变量环境是一个栈结构。函数内的局部变量不能被外部任意访问，只能在该函数内被引用，这似乎是个极好的、使变量保持纯净的方法。
Javascript闭包的理解
u010990854的博客
05-04 855
Javascript闭包（closure）众说纷纭，对入门者来说是个可能有点迷的概念和技术。这里给出一种解读，希望绑到有需要的人。 大多数讲解闭包的文章，都是侧重于讲闭包在技术层面的实现，而忽略了闭包解决什么问题。如果你不知道一项技术是解决什么问题的，那么就很难真正掌握这个技术。所以接下来先用一点篇幅说一下闭包解决的是什么问题。 问题是什么？ 函数式编程语言，核心就是函数和变量。当你调用函数，你把若干变量输入到函数中，然后函数给出一个结果（也是一个变量）。例如最简单的，输入a和b，得到c是a+b的结果
js闭包
Cheng的博客
09-05 1154
闭包
js 闭包传参_javascript深入理解js闭包
weixin_26849971的博客
12-23 581
闭包(closure)是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。var n=999;function f1(){alert(n);}f1(); // 999另一方面...
js闭包实例汇总
10-25
在本文中，我们将深入探讨JavaScript中的闭包概念，通过一系列的实际代码示例来帮助理解闭包的工作原理及其用途。闭包是JavaScript语言的一种独特功能，允许一个函数访问并操作函数外部的变量，其核心概念是函数作用...
javascript 闭包详解
10-24
主要详细介绍了javascript 闭包的相关资料，十分详尽,需要的朋友可以参考下
JavaScript闭包函数访问外部变量的方法
10-25
JavaScript闭包函数是JavaScript语言中一个非常重要的特性，它允许一个函数访问并操作函数外部的变量。闭包的形成主要依赖于变量的作用域。在JavaScript中，变量的作用域分为全局作用域和局部作用域。局部作用域又...
chrome应用开发API之chrome.fileSystem
wangning_elsa的博客
02-13 6363
package apps较chrome拓展，chrome应用有更加严格的安全策略，有一些只在应用中支持的API，例如fileSystem 开发中遇到的不好查阅到的点确认需要开发的是拓展或者应用，应用对后台脚本的申明"app": { "background": { "scripts": ["background.js"] } }, 后台脚本创建的窗口（区别于浏览器窗口
JS浮点数计算失精
wangning_elsa的博客
02-11 4441
JS浮点数计算失精问题：二进制浮点数表示法并不能精确的表示类似0.1这样 的简单的数字，四舍五入到最接近的可表示的实数。执行一系列的运算，随着舍入误差的积累，运算结果会越来越不精确。舍入也会使我们通常所期望的算术运算定律产生一些出人意料的偏差。例如，实数满足结合律，这意味着，对于任意的实数x，y，z，总是满足(x + y) + z = x + (y + z)。这种计算结果可以胜任大多数的计算任务：浮
前端学习之路
wangning_elsa的博客
12-02 2195
export 和 module.export 的区别 https://www.jianshu.com/p/e452203d56c4 「中高级前端」从多线程来看 Event Loop https://juejin.im/post/5d5b4c2df265da03dd3d73e5 Vue2 watch immediate 反爬虫思路与解决办法（综合） bigsec.com/bigsec-news/an...
JS执行与页面渲染
wangning_elsa的博客
02-13 1947
Javascript执行顺序 浏览器页面加载解析渲染 ready与DOMContentLoaded
JavaScript闭包详解：权威指南
"闭包权威指南 - 由Michael Bolin撰写的专业JavaScript闭包解析书籍，中文版可在指定网站查看。" 闭包是JavaScript编程中一个核心且重要的概念，它允许函数访问并操作其自身作用域内的变量，即使该函数已经执行完毕...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值