练习
下面的代码输出多少？修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法
var fnArr = [];
for (var i = 0; i < 10; i++) {
fnArr[i] = function(){
return i;
};
}
console.log(fnArr[3]()); // => 10
/*
产生的原因是，
变量 i 和匿名函数 function(){return i;}
构成的闭包在 console.log(fnArr[3]()) 执行 fnArr[3]() 时，
所引用的变量 i 的值为10
*/
解决方法如下
// 方法一
var fnArr = [];
for (var i = 0; i < 10; i++) {
(function(i){
fnArr[i] = function(){
return i;
};
})(i);
}
console.log(fnArr[3]()); // => 3
// 方法二
var fnArr = [];
for (var i = 0; i < 10; i++) {
fnArr[i] = (function(i){
return function(){
return i;
};
})(i);
}
console.log(fnArr[3]()); // => 3
// 方法三
var fnArr = [];
for (let i = 0; i < 10; i++) {
fnArr[i] = function(){
return i;
};
}
console.log(fnArr[3]()); // => 3
封装一个汽车对象，可以通过如下方式获取汽车状态
var Car = (function(){
var speed = 0;
function setSpeed(s){
speed = s;
}
/* your code */
function getSpeed(){
return speed;
}
function accelerate(){
speed += 10;
}
function decelerate(){
speed >= 10 ? speed -= 10 : console.log(`减速幅度超过最低速度，请修正`);
}
function getStatus(){
return speed > 0 ? `running` : `stop`;
}
/* your code */
return {
setSpeed: setSpeed,
/* code */
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';
下面这段代码输出结果是？为什么？
var a = 1;
setTimeout(function(){
a = 2;
console.log("1: " + a);
}, 0);
var a;
console.log("2: " + a);
a = 3;
console.log("3: " + a);
// 运行结果如下
// 2: 1
// 3: 3
// <· undefined -->匿名函数默认返回的，忽略
// 1: 2
// 分析如下：
// 先将声明的变量提升，得到
var a;
var a;
a = 1;
setTimeout(function(){
a = 2;
console.log("1: " + a);
}, 0);
console.log("2: " + a);
a = 3;
console.log("3: " + a);
因为定时器的运行机制是，将指定的代码移出本次执行，等到下一轮 Event Loop 时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮 Event Loop 时重新判断。这意味着，setTimeout 指定的代码，必须等到本次执行的所有代码都执行完，才会执行。
// 所以，执行顺序为
// 1
console.log("2: " + a); // => 2: 1
// 2
a = 3;
console.log("3: " + a); // => 3: 3
// 3
a = 2;
console.log("1: " + a); // => 1: 2
下面这段代码输出结果是？为什么？
var flag = true;
setTimeout(function(){
flag = false;
}, 0);
while(flag) {}
console.log(flag);
// tips: 千万不要把这段代码放到控制台里运行，后果自负
依据 setTimeout 的运行机制，以上代码执行顺序如下
var flag = true;
while(flag) {}
console.log(flag);
flag = false;
/*
因为 flag = true，while(flag){} 是个死循环，
浏览器不会执行 console.log(flag)，更不会执行 flag = false
*/
下面这段代码输出？如何输出 delayer:0, delayer:1...（使用闭包来实现）
for (var i = 0; i < 5; i++) {
setTimeout(function(){
console.log('delayer:' + i);
}, 0);
console.log(i);
}
运行结果如下
// 0
// 1
// 2
// 3
// 4
// <· undefined --> 匿名函数默认返回的，忽略
// delayer:5
// delayer:5
// delayer:5
// delayer:5
// delayer:5
根据变量提升的规则，以及定时器的运行机制，以上代码整理如下
var i;
for (i = 0; i < 5; i++) {
console.log(i);
setTimeout(function(){
console.log('delayer:' + i);
}, 0);
}
// console.log(i) 的打印结果自不必说，当代码执行到 setTimeout 时，在下一轮事件循环中的匿名函数要打印5次 i ，其值已自增到5
改造如下
for (var i = 0; i < 5; i++) {
(function(i){
setTimeout(function(){
console.log('delayer:' + i);
}, 0);
})(i);
console.log(i);
}
结果如下
屏幕快照 2017-10-10 14.13.03.png
如何获取元素的真实宽高
var p = document.createElement("p");
var body = document.querySelector("body");
body.append(p);
var mp = document.querySelector("p");
// console.log(window.getComputedStyle(p, null))
// console.log(p.style)
function getStyle(element){ // 兼容低版本IE
return element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null);
}
console.log(getStyle(mp).height); // 0px
console.log(getStyle(mp).width); // 1264px
URL 如何编码解码？为什么要编码？
-
编码方法：
- encodeURI()
- encodeURIComponent()
-
解码方法：
- decodeURI()
- decodeURIComponent()
其中，
encodeURI与encodeURIComponent区别不编码字符 范围 encodeURI1. ASCII字母
2. 数字
3.~!@#$&*()=:/,;?+'编码范围小于 encodeURIComponentencodeURIComponent1. ASCII字母
2. 数字
3.~!*()'- 编码原因：
对 URL 来说，之所以要进行编码，是因为 URI 中有些字符会引起歧义，例如键值对的值中字符串包含=或&
URL编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符另外，你还清楚
URI与URL分别是什么吗？
URI 是统一资源标识符，而 URL 是统一资源定位符。因此，笼统地说，每个 URL 都是 URI，但不一定每个 URI 都是 URL
补全如下函数，判断用户的浏览器类型
function isAndroid(){
return navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1
}
function isIphone(){
return navigator.userAgent.indexOf('iPhone') > -1
}
function isIpad(){
return navigator.userAgent.indexOf('iPad') > -1
}
function isIOS(){
return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
}
小结
-
函数都是“自私”的，除非通过
return关键字，否则外界无法访问到函数的变量，而且就算return关键字将变量返回，外界也只能是“可远观而不可亵玩焉”（变量是朕的，朕不给，你不能抢；就算朕给你看，你也不能胡来，要听朕的话@_@）
正是由于函数的这一特性，ES5 才能通过函数来实现块级作用域，
if () {}、for () {}，如果为了美观，大可用{}将编写的代码包裹起来，但要记住，这些花括号{}在 ES5 中都不会形成块级作用域，函数的花括号{}形成的函数作用域才是“封闭”的ES6 中 单纯使用
{}会形成块级作用域
