JS闭包的几种常见形式实例详解


Posted in Javascript onSeptember 16, 2017

作用域链:

//作用域链
  var a = 1;
  function test() {
    var b =2;
    return a;
  }
  alert(test());//弹出1;
  alert(b);//不能获取b
//scope chain
  var a = 1;
  function test() {
    var b = 2;
    function test1() {
      var c = 3;
      alert(a);
      alert(b);
      alert(c);
    }
    test1();
  }
  test();//弹出1,弹出2,弹出3;

词法作用域:

//词法作用域;
  function f1() {
    var a = 12;
    return f2();
  }
  function f2() {
    return a;
  }
  alert(f1());//并不能获取a,a在f2()中并未定义;
function f1() {
    var a = 1;
    return f2();
  }
  function f2() {
    var b = 3;
    alert(b);
    return a;
  }
  alert(f1());//弹出3,a在f2()中未定义

function f1() {
    var a = 1;
    return f2();
  }
  function f2() {
    var b = 3;
    alert(b);
    return a;
  }
  alert(f1());//弹出3,a在f2()中未定义,undefined
  var a=55;
  alert(f1());//弹出3,弹出55

如何通过闭包突破全局作用域链——几种常见形式

//通过闭包突破全局作用域链
  function f() {
    var a = "sun";
    return function () {
      return a;
    }
  }
  var test = f();
  alert(test());//弹出sun
var n;
function f() {
  var a = "sun";
  n = function () {
    return a;
  }
}
f();
alert(n());//弹出sun
  function f(param) {
    var n =function () {
      return param;
    };
    param++;
    return n;
  }
  var test = f(45);
  alert(test());//弹出46;

总结

以上所述是小编给大家介绍的JS闭包的几种常见形式 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
js自定义瀑布流布局插件
May 16 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
JS实现小星星特效
Dec 24 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 #Javascript
详解JS构造函数中this和return
Sep 16 #Javascript
Angular使用Md5加密的解决方法
Sep 16 #Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 #Javascript
EasyUI创建人员树的实例代码
Sep 15 #Javascript
webpack构建react多页面应用详解
Sep 15 #Javascript
详解Vue中一种简易路由传参办法
Sep 15 #Javascript
You might like
域名查询代码公布
2006/10/09 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
19个Android常用工具类汇总
2014/12/30 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
Pytest框架之fixture的详细使用教程
2020/04/07 Python
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
秋季运动会广播稿大全
2014/02/17 职场文书
项目经理任命书范本
2014/06/05 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
评先进个人材料
2014/12/29 职场文书
小学感恩主题班会
2015/08/12 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js