闭包、定时器、BOM
2017-04-13 本文已影响21人
饥人谷_米弥轮
1.下面的代码输出多少？修改代码让fnArr[i]() 输出 i。使用两种以上的方法
var fnArr = [];
// 1.
for(var i = 0; i < 10; i++){
(function(n){
fnArr[i] = function(){
return n;
}
})(i);
}
// 2.
for(var i = 0; i < 10; i++){
fnArr[i] = (function(n){
return function(){
return n;
}
})(i);
}
console.log(fnArr[3]());
2.封装一个汽车对象，可以通过如下方式获取汽车状态
var Car = (function(){
var speed = 0;
function setSpeed(s){
speed = s
}
function getSpeed(){
console.log(speed);
}
function accelerate(){
speed += 10;
}
function decelerate(){
speed -= 10;
}
function getStatus(){
if(speed > 0) {
console.log('running');
}else{
speed = 'error';
console.log('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
3.下面这段代码输出结果是? 为什么?
var a = 1;
setTimeout(function(){
a = 2;
console.log(a);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);
- 结果是1,3,2
- 经过变量提升，第一个输出的为1，第二个输出为3
- setTimeout(code|function,millisec)会放在执行代码队列的最后面，最后输出为2
4.下面这段代码输出结果是? 为什么?
var flag = true;
setTimeout(function(){
flag = false;
},0)
while(flag){}
console.log(flag);
- 结果是一直不停循环直到浏览器崩溃
-
while(flag=true) {}会一直运行，而setTimeout(code|function,millisec)会放在执行代码队列的最后面，所以flag一直都是true
-
5.下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）
for(var i=0;i<5;i++){
setTimeout(function(n){
return function(){
console.log('delayer:' + n );
}
}(i), 0);
console.log(i);
}
6.如何获取元素的真实宽高
<head>
<meta charset="utf-8">
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
var box = document.querySelector('.box');
console.log(getComputedStyle(box,null)['margin']);
</script>
</body>
7.URL 如何编码解码？为什么要编码？
-
JavaScript提供四个URL的编码/解码方法。
- decodeURI() //解码
- decodeURIComponent() //解码
- encodeURI() //编码
- encodeURIComponent() //编码
-
区别
-
encodeURI方法不会对下列字符编码
- ASCII字母
- 数字
- ~!@#$&*()=:/,;?+'
-
encodeURIComponent方法不会对下列字符编码
- ASCII字母
- 数字
- ~!*()'
所以encodeURIComponent比encodeURI编码的范围更大。
-
当我们需要编码一个URL并且要使用的时候，使用encodeURI来编码。当需要编码URL中的参数时，用encodeURIComponent，因为后面的/是需要编码的。
<button class="btn">点我</button> <script type="text/javascript"> var btn = document.querySelector('.btn'); btn.addEventListener('click',function(){ var param = "http://www.cnblogs.com/season-huang/"; param = encodeURI(param); var url = "http://www.cnblogs.com?next=" + param; console.log(url); window.open(url) }) </script>
8.补全如下函数，判断用户的浏览器类型
function isAndroid(){
return /android/i.test(navigator.userAgent);
}
function isIphone(){
return /iphone/i.test(navigator.userAgent);
}
function isIpad(){
return /ipad/i.test(navigator.userAgent);
}
function isIOS(){
return /(ipad)|(iphone)/i.test(navigator.userAgent);
}
- 闭包概念
-
官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
-
闭包的特点：
- 1.作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
- 2.一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
- 简单的说，javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
-
function closure(){
var str = "I'm a part variable.";
return function(){
alert(str);
}
}
var fObj = closure();
fObj();
- 在上面代码中，str是定义在函数closure中局部变量，若str在closure函数调用完成以后不能再被访问，则在函数执行完成后str将被释放。但是由于函数closure返回了一个内部函数，且这个返回的函数引用了str变量，导致了str可能会在closure函数执行完成以后还会被引用，所以str所占用的资源不会被回收。这样closure就形成了一个闭包。
