0

0

JS作用域链和闭包实例分享

小云云

小云云

发布时间:2018-02-28 11:45:36

|

1465人浏览过

|

来源于php中文网

原创

执行上下文可以理解为当前代码的执行环境,它会形成一个作用域。 

  - 范围:一段或者一个函数
  - 全局:变量定义,函数声明 (在一段里)
  - 函数:变量定义,函数声明,this,arguments

console.log(a);var a = a;

fn('dong');function(){}

这段代码中现将var a与函数fn()提出来放在执行代码之前

++this++

var a = {    name:'A',    fn:function(){        console.log(this.name)
    }
}

a.fn();//this === A
a.fn.call({name:'B'})//this === {name :'B'}var fn1 = a.fn;
fn1(); //this==windowfn1;

this要在执行时才能确认值,定义时无法确认.

  • 作为构造函数执行

function Foo(name){
    this.name = name;
}var f = new ('dong');
  • 作为对象属性执行

var obj = {
    name :'a',
    printName:function(){
        console.log(this.name);
    }
}
obj.printName(); //a
  • 作为普通函数执行

function fn(){
    console.log(this);//this===window}
  • call apply bind

//callfunction fn1(name,age){
    alert(name,age);
    console.log(this);
}
fn1.call({x:100},'dong',200);//弹出dong 200//打印{x:100}//call将this指向第一个参数的值//常用它来改变函数的this值//apply与call类似//bindfunction fn1(name,age){
    alert(name);
    console.log(this);
}
fn.call({x:100},'dong',20);//this为{x:100}var fn2 =function (name,age){
    alert(name);
    console.log(this);
}.bind({y:200});//必须用函数表达式的方式fn2.call('dong',20); //this为{y:200}

++作用域++

//无块级作用域if(true){
var name = 'dong';
}
console.log(name);//函数和全局作用域var a =100;
function fn(){
    var a =200;
    console.log('fn',a);
}
console.log('global',a);fn();

++作用域链++

一个自由变量,一直不断地往父级作用域上找,形成的一个链式结构,就叫作用域链。

var a = 100;function(){
    var b = 200;
    console.log(a);//当前作用域中没有定义a,a就是自由变量
    console.log(b);
}
var a = 100;function F1(){
    var b =200;    function F2(){
        var c = 300;
        console.log(a);
        console.log(b);
        console.log(c);
    }
}

++闭包++

  • 函数作为返回值

  • 函数作为参数来传递

    AI at Meta
    AI at Meta

    Facebook 旗下的AI研究平台

    下载
function F1(){
    var a = 100;    return function(){
        console.log(a);
    }
}var f1 = F1();//表示变量f1是一个函数var a = 200;
f1(); //100//全局里的a与在F1作用域里的a是没有关系的,一个函数的父级作用域是它定义时候的作用域而不是它执行的作用域,所以a这个自由变量直接在它的父级作用域中直接找到。
function F1(){
    var a = 100;    return function(){
        console.log(a);
    }
}var f1 = F1();function F2(fn){
    var a = 200;
    fn();
}
F2(f1);//100

相关题目

  • 对变量提升的理解

  • 说明this几种不同的使用场地

作为构造函数执行;作为对象属性执行;作为普通对象执行;call apply bind (具体代码见上部分)
- 创建10个标签,点击的时候出来对应的序号

//考察作用域var i,a;for(var i = 0;i<10;i++){
    a = document.creatElement('a');
    a.innerHTML = i +
; a.addEventListener('click',function(e){ e.preventDefault(); alert(i); //自由变量需要从父级作用域获取值 }) document.body.appendChild(a); }//这时候监听事件里的函数的自由变量,已经变为10了,所以,不管点击哪个它的序号都是10
//正确方法var i;for (i = 0;i < 10;i++){
    (function(i){
        var a = document.creatElement('a');
        a.addEventListener('click',function(e){
            e.preventDefault();
            alert(i);  
        })
        document.body.appendChild(a);
    })(i);//自调用函数立即执行}//(function(i){})(i)//自执行函数,就是不用调用,只要定义完成就能立即执行的函数
  • 理解作用域

自由变量;作用域链,即自由变量的查找;闭包的两个场景。

  • 实际开发中闭包的应用(作用域的实际应用)

//主要作用用于封装变量,收敛权限funciton isFirstLoad(){    var _list = [];    return function(id){
        if(_list.indexOf(id) >= 0){            return false;
        }else{
            _list.push(id);            return true;
        }
    }
}//使用var firstLoad = idFirstLoad();
firstLoad(10); //truefirstLoad(10); //falsefirstLoad(20); //true//在isFirstLoad函数外面,根本不可能修改掉__ list的值

相关推荐:

javascript作用于作用域链实例分享

javascript中关于作用于作用域链的详解

Javascript-作用域和作用域链及闭包的详解(图文)

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

556

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

732

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

414

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

991

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

552

2023.09.20

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

43

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号