进阶11-闭包 BOM
2017-09-26 本文已影响0人
Maaaax
题目1: 下面的代码输出多少？修改代码让 fnArri 输出 i。使用 两种以上的方法
var fnArr = [];
for (var i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); // 输出10
//////////方法一：用一个立即执行函数包裹起来，传递参数i
var fnArr = [];
for (var i = 0; i < 10; i++) {
!function (i) {
fnArr[i] = function () {
return i;
};
}(i)
}
console.log(fnArr[3]()); //输出3
////////////////方法二： 使用es6中的let声明替换var声明
var fnArr = [];
for (let i = 0; i < 10; i ++) {
fnArr[i] = function(){
return i;
};
}
console.log( fnArr[3]() ); //输出3
题目2： 封装一个汽车对象，可以通过如下方式获取汽车状态
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
}
})()
console.log(
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
)
题目3：下面这段代码输出结果是? 为什么?
var a = 1;
setTimeout(function(){
a = 2;
console.log(a); // 2,打印的是它所在函数作用域的a的值
}, 0);
var a ;
console.log(a); // 1，打印的是全局作用域下啊a=1的值
a = 3;
console.log(a) // 3，将a赋值为3之后打印出来
//输出结果： 1 3 2 ，因为setTimeout定时器中的函数最后执行
题目4：下面这段代码输出结果是? 为什么?
var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){} // 当代码执行到这一行的时候，此时flag为true，进入死循环，所以无输出
console.log(flag)
题目5： 下面这段代码输出？如何输出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 delayer:5(5次)
////////////////////////////////
//以下代码输出 delayer：0 delayer：1 ...
for(var i = 0; i<5; i++){
setTimeout((function (j){
return function(){
console.log('delayer:'+ j)
}
})(i),0)
console.log(i)
}
题目6： 如何获取元素的真实宽高
Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。
let style = window.getComputedStyle(element, [pseudoElt]);
<style>
#box{
background: #ccc;
width: 112px;
height: 223px;
}
</style>
<div id="box">content</div>
<script>
var div = document.getElementById('box')
window.getComputedStyle('div').width // '112px'
window.getComputedStyle('div').height // '233px'
</script>
题目7： URL 如何编码解码？为什么要编码？
之所以URL需要编码是因为Url中有些字符会引起歧义。在因特网中URL只能使用 ASCII 字符集来进行发送。也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。这意味着 如果URL中有汉字，就必须编码后使用。还有Ukey=value这种传参方式式中， Value中包含 ?或者 = 怎么办呢，那么势必会造成接收Url的服务器解析错误，因此必须将引起歧义的&和=符号进行转义，也就是对其进行编码。
Javascript中提供了3对函数用来对Url编码以得到合法的Url，它们分别是escape / unescape, encodeURI / decodeURI和encodeURIComponent / decodeURIComponent。由于解码和编码的过程是可逆的，因此这里只解释编码的过程。
这三个编码的函数——escape，encodeURI，encodeURIComponent——都是用于将不安全不合法的Url字符转换为合法的Url字符表示，它们安全字符不同：
下面列出了这三个函数的安全字符（即函数不会对这些字符进行编码）
escape（69个）：/@+-._0-9a-zA-Z
encodeURI（82个）：!#$&'()+,/:;=?@-.~0-9a-zA-Z
encodeURIComponent（71个）：!'()*-.~0-9a-zA-Z
题目8： 补全如下函数，判断用户的浏览器类型
function isAndroid(){
return /Android/.test(window.navigator.userAgent);
}
function isIphone(){
return /iPhone/.test(window.navigator.userAgent);
}
function isIpad(){
return /iPad/.test(window.navigator.userAgent);
}
function isIOS(){
return /(iPad)|(iPhone)/.test(window.navigator.userAgent);
}
