资讯专栏INFORMATION COLUMN

JS核心知识点梳理——上下文、作用域、闭包、this(下)

XUI / 3278人阅读

摘要:引言前面两篇文章介绍了上下文作用域闭包。这里我精心挑选了一些特别经典的面试题不定期更新,跪求收藏。闭包组这类题目还是挺简单的,我总结了几个要注意的地方有没有闭包如果有闭包,看创建了几个闭包。不要在脑子里想,每步的结果用纸和笔演算下

引言

前面两篇文章介绍了上下文、作用域、闭包、this。这里我精心挑选了一些特别经典的面试题(不定期更新,跪求收藏)。相信通过这些题目能让你完全通关JS三座大三中的之一。

闭包组:

这类题目还是挺简单的,我总结了几个要注意的地方
1.有没有闭包
2.如果有闭包,看创建了几个闭包。换句话说,是在一个闭包内直接操作还是操作完一个闭包,再创建一个新的闭包继续操作
3.注意数据的归属,即数据存放在哪个上下文环境

1、
var n=0;
    function a(){
        var n=10;
        function b(){
            n++;
            console.log(n);
        }
        b();
        return b;
    }
    var c=a();
    c();
    console.log(n);
//11 12 0
2、
var a=9; 
function fn(){ 
    a=0;       //如果这里是var a = 0 ,答案是多少
    return function(b){ 
        return b+a++; 
    }    
}
var f=fn();
console.log(f(5));
console.log(fn()(5));
console.log(f(5));
console.log(a);

// 5 5 6 2
// 如果是var a = 5 5 6 9
3、
var ary=[1,2,3,4];
function fn(ary){
    ary[0]=0;    
    ary=[0];    
    ary[0]=100;    
    return ary; 
}
var res=fn(ary);    
console.log(ary);    
console.log(res);
// [0,2,3,4] [100]
4、
function fn(i) {
    return function (n) {
        console.log(n + (i++));
    }
}
var f = fn(10);
f(20);
fn(20)(40);
fn(30)(50);
f(30);

//30 60 80 41
5、
var i = 10;
function fn() {
    return function (n) {
        console.log(n + (++i));
    }
}
var f = fn();
f(20);
fn()(20);
fn()(30);
f(30);
//31 32 43 44
6、以下代码的功能是要实现为5个input按钮循环绑定click点击事件,绑定完成后点击1、2、3、4、5五个按钮分别会alert输出0、1、2、3、4五个字符。(腾讯)

请问如下代码是否能实现?
如果不能实现那么现在的效果是什么样的?
应该做怎样的修改才能达到我们想要的效果,并说明原理?

1.不能实现
2.因为js没有块作用域,所以公用的外层作用域的i,当点击触发函数的时候 ,应当注意外层的i是5了,所以全部打印5没毛病
3.
解决思路1:没有块作用域我就用es6的let形成块作用域

 for(let i=0;i

解决思路2:每次绑定的时候i其实都是正确的,我能不能用另外一个变量将每次的i存起来呢?

//这样行吗?
for(var i=0;i

那么我应该让回调函数定义的时候里面的代码能立即执行,接收到参数0,1,2,3,4

for(var i=0;i
for(var i=0;i

还能怎么优化?既然i能传进去,我为啥还要而外用个变量保存呢?

for(var i=0;i
this组:

这类题目严格按上篇文章的分析思路,不复杂,就是麻烦一点。不要在脑子里想,每步的结果用纸和笔演算下

1、
var num = 10;
var obj = {num: 20};
obj.fn = (function (num) {
    this.num = num * 3;
    num++;
    return function (n) {
        this.num += n;
        num++;
        console.log(num);
    }
})(obj.num);
var fn = obj.fn;
fn(5);
obj.fn(10);
console.log(num, obj.num);
//22 23 65 30

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109645.html

相关文章

  • JS核心识点梳理——作用闭包this(中)

    摘要:引言满满的干货,面试必系列,参考大量资料,并集合自己的理解以及相关的面试题,对核心知识点中的作用域闭包上下文进行了梳理。本篇重点介绍闭包和。所以,有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 满满的干货,面试必bei系列,参考大量资料,并集...

    rottengeek 评论0 收藏0
  • JS核心识点梳理——作用闭包this(上)

    摘要:引言满满的干货,面试必系列,参考大量资料,并集合自己的理解以及相关的面试题,对核心知识点中的作用域闭包上下文进行了梳理。如果在小区这个作用域找到了张老师,我就会在张老师的辅导下学钢琴我张老师房间钢琴构成了学琴的上下文环境。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 满满的干货,面试必bei系列,参考大...

    Andrman 评论0 收藏0
  • JavaScript - 收藏集 - 掘金

    摘要:插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins译者:jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

    izhuhaodev 评论0 收藏0
  • 好程序员Web前端培训入门之JS基础知识梳理汇总

    摘要:好程序员前端培训入门之基础知识梳理汇总,前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错。作用域链的前端,始终是当前执行代码所在环境的变量对象。   好程序员Web前端培训入门之JS基础知识梳理汇总,Web前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错。不论是专业还是非专业,有基础亦或是无基础,都想通过学习Web前端实现高薪就业。不过,学习要一...

    int64 评论0 收藏0
  • 好程序员Web前端培训入门之JS基础知识梳理汇总

    摘要:好程序员前端培训入门之基础知识梳理汇总,前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错。作用域链的前端,始终是当前执行代码所在环境的变量对象。   好程序员Web前端培训入门之JS基础知识梳理汇总,Web前端工程师是当前各大企业都比较稀缺的人才,薪资待遇和就业前景都很不错。不论是专业还是非专业,有基础亦或是无基础,都想通过学习Web前端实现高薪就业。不过,学习要一...

    kviccn 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<