作用域和闭包(以及this的用法)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了作用域和闭包(以及this的用法)相关的知识,希望对你有一定的参考价值。

执行上下文

在介绍作用域特性之前,我们先来回顾一下js的执行上下文(详细介绍:https://www.jianshu.com/p/8f19e45fd1f1
一段<script>或者一个函数之内,都会去生成一个执行环境(execution context,EC)或称之为执行上下文。
当一段JS代码执行的时候,JS解释器会通过两个阶段去产生一个EC。
1.创建阶段
o创建变量对象VO
o设置[[Scope]]属性的值: (指向作用域链)
o设置this的值: (指向一个EC,默认undefined)
2.初始化变量对象(即设置变量的值、函数的引用),然后解释/执行代码。
注意事项:
全局:针对一段<script>,它会生成一个全局的执行上下文,在执行之前会先去把“变量定义”和“函数声明”拿出来装在对象VO。
函数:针对一个函数,它会生成一个函数执行上下文,在函数执行之前会先把“变量定义”、“函数声明”、“arguments”拿出来封装在对象VO里边。

先执行变量定义后,变量值默认为undefined;
函数声明后不会立即执行,如果输出一下函数,能看到函数体所有的代码;而需要调用函数后(例如:fn();),函数体中的代码才会执行.
ps: arguments 是javascript里的一个内置对象,所有的函数都有属于自己的一个arguments对象,它包括了函所要调用的参数。
ps: 函数申明和函数表达式的区别
function fn(name){} 这是一个函数声明,而var a = function(){}这是函数表达式;
如果是函数表达式的写法,在执行之前先拿出来处理的就是var a;了,这时候a只是一个普遍变量(值为undefined)不是函数,这点要注意。

作用域

作用域指的是变量的适用范围。(详细介绍:https://www.w3cschool.cn/javascript_prototype/y2cjfozt.html

js无块级作用域(不过es6中let定义的变量只在代码块中有效,也就有了块级作用域)

 if (true){
    var name = ‘zhao‘;
}
console.log(name); //zhao,这里依然可以获取到上面代码块里边的变量。

只有函数和全局作用域

var a = 100
function fn(){
    var a =200;
    console.log(‘fn‘,a); // fn 200
}
console.log(‘global‘,a); //  global 100,获取不到函数内部的变量。

作用域链

var a = 100;
function fn1(){
    var b =200;
    function fn2(){
        var c =300;
        // 当前作用域没有定义的变量,即“自由变量”,a和b都是
        console.log(a); // 100
        console.log(b); // 200
        console.log(c); // 300
    }
    fn2();
}
fn1();

PS:自由变量因为在当前作用域没有定义,所以只能去父级作用域查找.
(注意:父级作用域是在函数“定义”的时候就已经确定了的,自由变量这种一层层往父级查找的链式结构也就是“作用域链”)

闭包

闭包实际上是对js作用域链的一种应用形式;主要利用了作用域链从父级函数获取变量的特性,从外部调用父级函数局部变量并且互不污染,或者子函数循环利用父级函数的变量达到某种计算用途。

闭包特性一:调用函数内部的变量,利用作用域链原理,能获取函数fn1的父级函数的局部变量进行计算。
闭包特性二:让这些变量的值始终保持在内存中,不会再fn1调用后被自动清除,再次执行fn1的时候还能继续上一次的计算。
注意:fn2创建的时候与fn1是相互独立的,其中的变量a也互不影响,好比父亲给每个孩子都准备了一个新的存钱罐。

场景一:函数作为返回值

function F1(){
    var a =100;
    // 返回一个函数(函数作为返回值),为了阅读方便也可以先定义一个函数,然后retrun函数名。
    return function(){
        console.log(a); //自由变量,去父作用域寻找
    }
    // 另外放回函数的形式也不只是return,同样在这里以事件的形式绑定在Dom上也是一样,再或者调用其他方法传递一个函数出去。
}
var f1 = F1();
var a=200;
f1(); // 100

场景二:函数作为参数传递

var b=111;
function f1(){
    var a =100;
    console.log(a,b);
}
function f2(fn){
    var a =200;
    var b=222;
    fn();
}
f2(f1); // 100,111  
//并且如果a在F1()没有定义的话,就会报错而不是获取f2中的a,因为它的定义时的父级作用域及之上(即全局作用域)都没有定义a;

应用举例一:setTimeout中的参数传递。
由于直接setTimeout(function(){},200)这么写的话,没办法传参,所以可以用闭包的形式来做。

var Fn=function(num){
    var a=10;
    return function(){
        var b=0;
        a+=num;
        b+=num;
        console.log(a,b);
    }
}
var fn1=Fn(1);
var fn2=Fn(1);
//闭包特性一:调用函数内部的变量,利用作用域链原理,能获取函数fn1的父级函数的局部变量a进行计算。
setTimeout(fn1,200); //输出的a=11,b=1;
//闭包特性二:让变量a的值始终保持在内存中,不会在fn1调用后被自动清除,再次执行fn1的时候还能继续上一次的计算。
setTimeout(fn1,500); //输出的a=12,b=1;
//特性二的注意事项:fn2创建的时候与fn1是相互独立的,对应的父级函数Fn的变量a也互不影响,好比父亲在每个孩子出生时都准备了一个新的存钱罐,每个孩子都用自己的。
setTimeout(fn2,800); //输出的a=11,b=1;

应用举例二:创建10个<a>标签,点击的时候弹出来对应的序号。

<body>
<script type="text/javascript">

    for(var i=0;i<10;i++){

        (function(i){

            var a=document.createElement(‘a‘);
            a.innerhtml=i+‘<br>‘;
            document.body.appendChild(a);
            a.addEventListener(‘click‘,function(e){
                e.preventDefault();  //取消默认事件,指a标签
                alert(i);
            });

        })(i);

    }
</script>
</body>

this

核心:this要在执行时才能确认值,定义时无法确认。

var a = {
    name: ‘A‘,
    fn: function (){
        console.log(this.name);
    }
}
a.fn(); // this === a (即使是b.a.fn(),this也是a)
a.fn.call({name: ‘B‘});  // this === {name: ‘B‘}
var fn1 = a.fn;
fn1();  // this === window

this几种不同的运用场景
1、作为构造函数执行:(例如:new Foo(),this指向这个新对象)
2、作为对象属性执行:(this指向对象)
3、作为普通函数执行:(this指向window)
4、call()、apply()、bind():(this指向传入的第一个对象参数,bind只有一个参数)
参考:https://www.w3cschool.cn/jsnote/jsnote-this.html

call,apply、bind都属于Function.prototype的一个方法,他们的作用改变函数的调用对象,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply,bind属性。既然作为方法的属性,那它们的使用就当然是针对方法的了,这几个方法是容易混淆的。
call,apply的用法差不多,只是参数稍微不同;(apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来。)

// 以最简单window对象为例
function sum(num1, num2) { 
return num1 + num2; 
} 
console.log(sum.call(window, 10, 10)); //20 
console.log(sum.apply(window,[10,10])); //20   这两都相当于window.sum(10,10); 
// 即语法:foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) 

而bind的用法有一点差别。(只是传一个参数对象,然后返回一个函数给接受的变量,再另外调用执行。)

window.color = "red"; 
var o = { color: "blue" }; 
function sayColor(){ 
alert(this.color); 
} 
var OSayColor = sayColor.bind(o); 
OSayColor(); //blue 

详情:https://www.w3cschool.cn/xqw2e7/9m2x12y0.html

以上是关于作用域和闭包(以及this的用法)的主要内容,如果未能解决你的问题,请参考以下文章

复习3----作用域和闭包

JavaScript中的作用域和闭包

你不知道的JavaScript(作用域和闭包)

了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化

js面试题知识点全解(一作用域和闭包)

作用域和闭包