闭包、定时器的使用&BOM相关API

下面的代码输出多少？修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法

 var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );  //10

方法一：创建函数形成独立的作用域

var fnArr = [];
for (var i = 0; i < 10; i++) {
    var temp = function (i) {
        fnArr[i] = function () {
            return i;
        }
    }
    temp(i);
}
console.log(fnArr[3]()); //3

方法二：立即执行函数

var fnArr = [];
for (var i = 0; i < 10; i++) {
    !function (i) {
        fnArr[i] = function () {
            return i;
        }
    }(i);
}
console.log(fnArr[3]());

方法三：函数return函数

var fnArr = [];
for (var i = 0; i < 10; i++) {
    fnArr[i] = function (i) {
        return function () {
            return i;
        }
    }(i);
}
console.log(fnArr[3]());

方法四：通过let创建块级作用域

var fnArr = [];
for (let i = 0; i < 10; i++) {
    fnArr[i] = function () {
        return i;
    };
}
console.log(fnArr[3]());

封装一个汽车对象，可以通过如下方式获取汽车状态

var Car = (function () {
    var speed = 0;
    function setSpeed(s) {
        speed = s
    }
    function getSpeed() {
        return speed
    }
    function accelerate() {
        speed += 10
    }
    function decelerate() {
        speed -= 10
    }
    function getStatus() {
        if (speed > 0) {
            return 'running'
        } else {
            return 'stop'
        }
    }

    return {
        setSpeed: setSpeed,
        getSpeed: getSpeed,
        accelerate: accelerate,
        decelerate: decelerate,
        getStatus: getStatus
    }
})()

Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate();
Car.decelerate();
Car.getStatus();  //'stop';
//Car.speed;  //error

  let speed = 0;
  let Car = {
    setSpeed: function (s) {
      speed = s;
    },
    getSpeed: function () {
      return speed;
    },
    accelerate: function () {
      speed += 10;
    },
    decelerate: function () {
      speed -= 10;
    },
    getStatus: function () {
      if (speed > 0) {
        return "running";
      } else {
        return "stop";
      }
    },
  };

  Car.setSpeed(30);
  Car.getSpeed(); //30
  Car.accelerate();
  Car.getSpeed(); //40;
  Car.decelerate();
  Car.decelerate();
  Car.getSpeed(); //20
  Car.getStatus(); // 'running';
  Car.decelerate();
  Car.decelerate();
  Car.getStatus(); //'stop';

使用 localStorage封装一个 Storage 对象，达到如下效果

var Storage = (function () {
    return {
        set: function (key, values, expiredSeconds) {
            //设置的是一个JSON格式的字符串
            localStorage[key] = JSON.stringify({
                value: values,
                expired: expiredSeconds === undefined ? undefined : Date.now() + 1000 * expiredSeconds//如果不存在第三个参数(即数据永久有效)，返回undefined，如果存在，返回当前时间加上设定的时间(即生效截止日期)

            })
        },
        get: function (key) {
            if (localStorage[key] === undefined) {
                return//如果localStorage中只有键名没有对应键值，则直接return undefined，如Storage.set('name'); console.log(Storage.get('name'))  ==>undefined
            }
            //获取的是一个js对象
            var obj = JSON.parse(localStorage[key])//localStorage得到的键值是一个JSON格式的字符串，obj为JSON字符串反序列化得到的js对象
            if (obj.expired === undefined || Date.now() < obj.expired) {//如果expired没有被设置过，即永久有效时，或者当前时间小于设置时间，即还在有效期内时，返回js对象的值
                return obj.value
            } else {//否则删除键值
                delete localStorage[key]//删除键值后再获取键值得到的是undefined
            }
        }
    }
})()

Storage.set('name', '饥人谷')
Storage.set('age', 2, 30);  //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'], 60)

console.log(Storage.get('name'))  // ‘饥人谷’
console.log(Storage.get('age'))    //  如果不超过30秒，返回数字类型的2；如果超过30秒，返回 undefined，并且 localStorage 里清除 age 字段
console.log(Storage.get('teachers'))  //如果不超过60秒，返回数组； 如果超过60秒，返回undefined

下面这段代码输出结果是? 为什么?

var a = 1;
setTimeout(function () {
    a = 2;
    console.log(a);//最后打印2
}, 0);
var a;
console.log(a);//首先打印1
a = 3;
console.log(a);//接着打印3

首先提升一下变量，改写后代码如下：

var a
a = 1;

setTimeout(function () {
    a = 2;
    console.log(a);
}, 0);

console.log(a);

a = 3;
console.log(a);

结果：1,3,2
原因：异步延迟到同步代码执行结束后才允许执行

  • 代码从上往下依次执行，首先全局中声明了一个变量a且赋值为1，接着读到setTimeout定时器，虽然设置延迟时间为0，但只要有定时器的存在，解析器都会首先去执行别的代码，全部执行完之后，如果时间到了，就去执行定时器中的代码，时间没到就继续等到时间到了再执行定时器中的代码。所以首先执行第二句console.log(a)，打印的是全局中a的值1，所以首先打印1
  • 接着读到a=3，即给全局中的变量a赋值为3，打印3
  • 以上代码执行完毕，就来处理定时器中的内容，延迟为0毫秒，所以从以上过程来看实际上这个延迟比0毫秒多，因为解析器先去做了别的事情，0毫秒在这里的意思即不需要等待，立即执行，所以执行第一个参数函数体中的内容，执行到a=2，而函数中没有声明变量a，所以向外层作用域，即全局中进行查找，在全局中找到了a，于是在函数作用域中将a赋值为2并打印出来，结果为2

下面这段代码输出结果是? 为什么?

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);
  • 没有任何输出
  • 因为setTimeout会在当前代码执行队列结束后执行，while循环结束后才会执行setTimeout中的函数，所以while循环的条件永远是true，会无限循环下去，而while中没有任何代码，所以打印flag没有任何输出

下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）

for(var i=0;i<5;i++){
    setTimeout(function(){
         console.log('delayer:' + i );//delayer:5,delayer:5,delayer:5,delayer:5,delayer:5
    }, 0);
    console.log(i);//0,1,2,3,4
}
  • 首先打印外层的console.log(i)得到输出依次为0，1，2，3，4
  • 接着执行内层console.log('delayer:' + i)得到输出依次为delayer:5,delayer:5,delayer:5,delayer:5,delayer:5

闭包实现

for (var i = 0; i < 5; i++) {
    !function () {
        var j = i
        setTimeout(function () {
            console.log('delayer:' + j);
        }, 0);
    }()
}

如何获取图片的真实宽高

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="jquery.min.js"></script>  -->
    <style>

    </style>
</head>

<body>
    <div>
        ![](http://upload-images.jianshu.io/upload_images/6851923-b0f3eadfdd4257c3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    </div>

    <script>
        // JS写法一
        function $(selector) {
            return document.querySelector(selector);
        }
        $('img').onload = function () {
            console.log(this.width) //打印$('img').width结果相同
            console.log(this.height)
        }

        //JS写法二
        // var img = document.querySelector('img')
        // img.addEventListener('load', function () {
        //     console.log(this.width) //打印$('img).width结果相同
        //     console.log(this.height)
        // })

        //jQuery写法
        // $('img').on('load', function () {
        //     console.log($(this).width())
        //     console.log($(this).height())
        // })
    </script>
</body>

</html>

如何获取元素的真实宽高

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="jquery.min.js"></script>  -->
    <style>
        div {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 1px solid black;
        }

        div {
            width: 200px;
            color: red;
        }
    </style>
</head>

<body>
    <div>
    </div>

    <script>
        // JS写法一
        // function $(selector) {
        //     return document.querySelector(selector);
        // }
        // console.log($('div').offsetWidth)
        // console.log($('div').offsetHeight)


        // JS写法二
        var div = document.querySelector('div')
        function getStyle(curEle, attr) {
            console.log(window.getComputedStyle(curEle)[attr])
        }
        getStyle(div, 'color')
        getStyle(div, 'width')
        getStyle(div, 'height')


        // 或者
        // function getStyle(curEle, attr) {
        //     var relStyle = window.getComputedStyle ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr]//兼容低版本IE
        //     console.log(relStyle)
        // }
        // getStyle(div, 'width');
        // getStyle(div, 'height');
    </script>
</body>

</html>

window.onload 和 document.onDOMContentLoaded 有什么区别

当DOM结构加载解析完成会触发DOMContentLoaded事件；当页面上所有的DOM结构、样式表、脚本、图片、flash等资源都加载完成后会触发onload事件。
二者触发时机不同，onload后触发。

区分二者：
当我们需要给一些元素绑定事件处理函数，但那个元素还没有加载到页面上，绑定事件已经执行完了，这时是没有效果的，这两个事件就是用来避免这样一种情况。
将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函数。
当然DOMContentLoaded机制更加合理，因为我们可以容忍图片，flash延迟加载，却不可以容忍看见内容后页面不可交互。

URL 如何编码解码？为什么要编码？

URL只能使用ASCII字符集通过因特网进行发送，也就是说URL中只能包含英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号，这意味着如果URL中包含汉字就必须编码后使用。麻烦的是，RFC 1738没有规定具体的编码方法，而是交给应用程序（浏览器）自己决定。这导致"URL编码"成为了一个混乱的领域。
解决办法：使用一些具体的方法进行编解码。

  • 两种编码方式
    • encodeURI()
    • encodeURIComponent()
  • 两种解码方式
    • decodeURI()
    • decodeURIComponent()

其中，encodeURIComponent()与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。decodeURI()和decodeURIComponent()区别与上同理。

补全如下函数，判断用户的浏览器类型

function isAndroid() {
    return /android/i.test(navigator.userAgent)
}
funcnction isIphone(){
    return /iphone/i.test(navigator.userAgent)
}
function isIpad() {
    return /ipad/i.test(navigator.userAgent)
}
function isIOS() {
    return /iphone|ipad/i.test(navigator.userAgent)
}

cookie & session &localStorage 分别是什么

  • cookie:
    • cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息。
      在控制台用 「document.cookie」查看你当前正在浏览的网站的cookie。
      一般浏览器存储cookie 最大容量为4k。
  • session:
    • session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie
  • localStorage:
    • localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
      不参与网络传输。
      一般用于性能优化，可以保存图片、js、css、html 模板、大量数据

参考资料：
从onload和DOMContentLoaded谈起

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,657评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,662评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,143评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,732评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,837评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,036评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,126评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,868评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,315评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2赞 351

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,637评论 18赞 139
  • 闭包定时器bom
    题目1: 下面的代码输出多少？修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法 题目2： 封装一个...
    Taaaaaaaurus阅读 342评论 0赞 0
  • 进阶任务11-闭包、定时器、BOM
    下面的代码输出多少？修改代码让 fnArri 输出 i。使用两种以上的方法 以上代码输出为10 修改后代码一： 修...
    RookieD阅读 167评论 0赞 0
  • 借来的城市（1）悄无声息
    已经是后半夜了，小黄猫苗苗还是不敢睡觉，因为它责任重大！ 这里是利民小卖部，小田村最受欢迎的地方。店里空间不大，但...
    唐路小镇阅读 324评论 2赞 3
  • 你是怎样理解时间的？
    时间，一个可以令人快乐也可以让人悲伤的词，一个可以忽快忽慢的词，一个令人喜欢又令人憎恨的词，时间，你怎么解释？...
    miss雅雅阅读 314评论 0赞 0