【前端口试】作用域和闭包

2024年4月3日 189次阅读来源: ConardLi

1. 题目

说一下对变量提拔的明白

申明this的几种差别运用场景

建立10个a标签，点击的时刻弹出来响应的序号

怎样明白作用域

现实开辟中闭包的运用

手动完成call apply bind

2. 知识点

2.1 实行上下文

局限：一段script也许一个函数

全局：变量定义、函数声明 script

函数：变量定义、函数声明、this、arguments （实行之前）

函数声明和函数表达式的区分：

a(); //报错  函数表达式 变量声明 会提早。
var a = function(){}

b(); // 不报错  函数声明
function b(){}

变量定义时会默许把他的变量声明提拔：(仅限于他的实行上下文，比方一段script和一个函数中)

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

现实上是

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

2.2 this

this要在实行时才确认，定义时没法确认。

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

        a.fn();  // a
        a.fn.apply({name:'b'});  // b  a.fn.call({name:'b'});
        var fn1 = a.fn();
        fn1();  // undefined

this的运用场景

组织函数中（指向组织的对象）

    function Fun(name){
        this.name = name;
    }
    var f = new Fun('a');
    console.log(f.name);

对象属性中（指向该对象）

一般函数中（指向window）

call apply bind

都是用来转变一个函数的this指向，用法略有差别。

call：背面的参数为挪用函数的参数列表

function greet(name) {
  console.log(this.animal,name);
}

var obj = {
  animal: 'cats'
};

greet.call(obj,'猫咪');

apply：第二个参数为挪用函数的参数数组

function greet(name) {
  console.log(this.animal,name);
}

var obj = {
  animal: 'cats'
};

greet.apply(obj,['猫咪']);

bind：当绑定函数被挪用时，bind传入的参数会被插进去到目的函数的参数列表的最先位置，传递给绑定函数的参数会跟在它们背面。

var fun = function (name1,name2){
    console.log(this);
    console.log(name);
}.bind({a:1},"name1");
    fun("name2");

arguments中的this：

var length = 10;
function fn(){
    alert(this.length)
}
var obj = {
    length: 5,
    method: function(fn) {
        arguments[0]()
    }
}

obj.method(fn)//输出1
这里没有输出5，也没有输出10，反而输出了1，风趣。这里arguments是javascript的一个内置对象（可以拜见mdn：arguments – JavaScript），是一个类数组（就是长的比较像数组，然则短缺一些数组的要领，可以用slice.call转换，详细拜见上面的链接），其存储的是函数的参数。也就是说，这里arguments[0]指代的就是你method函数的第一个参数：fn，所以arguments[0]()的意义就是：fn()。

不过这里有个疑问，为什么这里没有输出5呢？我method内里用this，不应当指向obj么，最少也会输出10呀，这个1是闹哪样？

现实上，这个1就是arguments.length，也就是本函数参数的个数。为啥这里的this指向了arguments呢？由于在Javascript里，数组只不过运用数字做属性名的要领，也就是说：arguments[0]()的意义，和arguments.0()的意义差不多（固然这么写是不允许的），你更可以这么明白：

arguments = {
    0: fn, //也就是 functon() {alert(this.length)} 
    1: 第二个参数, //没有 
    2: 第三个参数, //没有
    ..., 
    length: 1 //只要一个参数
}

所以这里alert出来的效果是1。

假如要输出5应当咋写呢？直接 method: fn 就好了。

2.3 作用域

没有块级作用域

        if(true){
            var name = "test"
        }
        console.log(name);

只管不要在块中声明变量。

只要函数级作用域

2.4 作用域链

自在变量 当前作用域没有定义的变量即为自在变量。

自在变量会去其父级作用域找。是定义时的父级作用域，而不是实行。

        var a = 100;
        function f1(){
            var b = 200;
            function f2(){
                var c = 300;
                console.log(a); //自在变量
                console.log(b); //自在变量
                console.log(c);
            }
            f2();
        };
        f1();

2.5 闭包

　一个函数中嵌套别的一个函数，而且将这个函数return出去，然后将这个return出来的函数保留到了一个变量中，那末就建立了一个闭包。

闭包的两个运用场景

1.函数作为返回值

        function fun(){
            var a = 0;
            return function(){
                console.log(a); //自在变量，去定义时的父级作用域找
            }
        }

        var f1 = fun();
        a = 1000;
        f1();

2.函数作为参数

        function fun(){
            var a = 0;
            return function(){
                console.log(a); //自在变量，去定义时的父级作用域找
            }
        }

        function fun2(f2){
            a = 10000
            f2();
        }

        var f1 = fun();

        fun2(f1);

详细诠释看高等-闭包中的申明

闭包的两个作用：

可以读取其他函数内部变量的函数

可以让函数内部的变量一向保留在内存中

现实运用场景1：

闭包可以将一些不愿望暴露在全局的变量封装成“私有变量”。

假如有一个盘算乘积的函数，mult函数吸收一些number范例的参数，并返回乘积效果。为了进步函数机能，我们增添缓存机制，将之前盘算过的效果缓存起来，下次碰到一样的参数，就可以直接返回效果，而不需要介入运算。这里，寄存缓存效果的变量不需要暴露给外界，而且需要在函数运转完毕后，依然保留，所以可以采纳闭包。

上代码：

function calculate(param){
    var cache = {};
    return function(){
        if(!cache.parame){
            return cache.param;
        }else{
            //缓存盘算....
            //cache.param = result
            //下次接见直接取
        }
    }
}

现实运用场景2

连续局部变量的寿命

img 对象常常用于举行数据上报，以下所示：

var report = function( src ){
    var img = new Image();
    img.src = src;
};
report( 'http://xxx.com/getUserInfo' );

然则经由过程查询背景的纪录我们得知，由于一些低版本浏览器的完成存在 bug，在这些浏览器
下运用 report 函数举行数据上报会丧失 30%摆布的数据，也就是说， report 函数并非每一次
都胜利发起了 HTTP 要求。

丧失数据的原因是 img 是 report 函数中的局部变量，当 report 函数的
挪用完毕后， img 局部变量随即被烧毁，而此时也许还没来得及发出 HTTP 要求，所以此次要求
就会丧失掉。

如今我们把 img 变量用闭包关闭起来，便能处理要求丧失的题目：

var report = (function(){
    var imgs = [];
    return function( src ){
        var img = new Image();
        imgs.push( img );
        img.src = src;
    }
})();

闭包瑕玷：浪费资源！

3. 题目解答

3.1 说一下对变量提拔的明白

变量定义和函数声明

注重函数声明和函数表达式的区分

变量定义时会默许把他的变量声明提拔：(仅限于他的实行上下文，比方一段script和一个函数中)

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

现实上是

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

3.2 申明this的几种差别运用场景

组织函数中（指向组织的对象）
对象属性中（指向该对象）
一般函数中（指向window）
call apply bind

3.3 建立10个a标签，点击的时刻弹出来响应的序号

完成要领1：用let声明i

        var body = document.body;
        console.log(body);
        for (let i = 0; i < 10; i++) {
            let obj = document.createElement('i');
            obj.innerHTML = i + '<br>';
            body.appendChild(obj);
            obj.addEventListener('click',function(){
                alert(i);
            })
        }

完成要领2 包装作用域

    var body = document.body;
    console.log(body);
    for (var i = 0; i < 10; i++) {
        (function (i) {
            var obj = document.createElement('i');
            obj.innerHTML = i + '<br>';
            body.appendChild(obj);
            obj.addEventListener('click', function () {
                alert(i);
            })
        })(i)
    }

3.4 现实开辟中闭包的运用

可以读取其他函数内部变量的函数

可以让函数内部的变量一向保留在内存中

封装变量，权限收敛

运用1

var report = (function(){
    var imgs = [];
    return function( src ){
        var img = new Image();
        imgs.push( img );
        img.src = src;
    }
})();

用于防备变量烧毁。

运用2

    function isFirstLoad() {
        var arr = [];
        return function (str) {
            if (arr.indexOf(str) >= 0) {
                console.log(false);
            } else {
                arr.push(str);
                console.log(true);
            }
        }
    }

    var fun = isFirstLoad();
    fun(10);
    fun(10);

将arr封装在函数内部，制止随便修正，防备变量烧毁。

3.5 手动完成call apply bind

context 为可选参数，假如不传的话默许上下文为 window；
context 建立一个 Symbol 属性，挪用后即删除，不会影响context

    Function.prototype.myCall = function (context) {
      if (typeof this !== 'function') {
        return undefined; // 用于防备 Function.prototype.myCall() 直接挪用
      }
      context = context || window;
      const fn = Symbol();
      context[fn] = this;
      const args = [...arguments].slice(1);
      const result = context[fn](...args);
      delete context[fn];
      return result;
    }

apply完成相似call，参数为数组

    Function.prototype.myApply = function (context) {
      if (typeof this !== 'function') {
        return undefined; // 用于防备 Function.prototype.myCall() 直接挪用
      }
      context = context || window;
      const fn = Symbol();
      context[fn] = this;
      let result;
      if (arguments[1] instanceof Array) {
        result = context[fn](...arguments[1]);
      } else {
        result = context[fn]();
      }
      delete context[fn];
      return result;
    }

1.推断是不是为组织函数挪用

2.注重参数要插进去到目的函数的最先位置

    Function.prototype.myBind = function (context) {
      if (typeof this !== 'function') {
        throw new TypeError('Error')
      }
      const _this = this
      const args = [...arguments].slice(1)
      return function F() {
        // 推断是不是用于组织函数
        if (this instanceof F) {
          return new _this(...args, ...arguments)
        }
        return _this.apply(context, args.concat(...arguments))
      }
    }

    原文作者：ConardLi
    原文地址: https://segmentfault.com/a/1190000018177147
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。