1.
var fnArr = []
for (var i=0;i<10;i++){
fnArr[i]=function(){
return i;
}
}
console.log(fnArr[3]()) //10;产生10个fnArr[i]，但是都输出了i=10
使用立即执行函数生成闭包，利用其内部函数读取该函数局部作用域
3种方式生成闭包
var fnArr = []
for(var i=0;i<10;i++){
fnArr[i] = (function(){
var n = i
return function(){
return n;
}
}
})()
console.log(fnArr[3]()) //3
//典型闭包，内部匿名函数访问外部函数作用域
var fnArr = []
for(var i =0; i<10 ; i++){
(function (n){
fnArr[i] = function(){
return n;
}
}
)(i)
};
console.log(fnArr[3]()) //3
<-------------------------------------------------->
var fnArr = []
for(var i =0; i<10 ; i++){
(function (n){
var n = i
fnArr[i] = function(){
return n;
}
}
)()
};
console.log(fnArr[3]()) //3
//这2种方法类似，匿名函数作为变量赋值给fnArr[i]
//在立即执行函数这个闭包的作用域中
//return n的值就是i的值
2.
输出汽车参数的函数
var Car = (function(){
var speed = 0;
function setSpeed(s){
return speed = s
}
function getSpeed(){
console.log(speed)
}
function accelerate(){
return speed += 10
}
function decelerate(){
if (speed>0)
return speed -= 10
}
function getStatus(){
if(speed>0) console.log('running');
else 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.
setTimeout输出优先级
var a = 1;
setTimeout(function(){
a = 2;
console.log(a); //2；优先级最低 -----Ⅲ
}, 0);
var a ;
console.log(a); //1； -----Ⅰ
a = 3;
console.log(a); //3；-----Ⅱ
4.
var flag = true;
setTimeout(function(){ //无法执行到setTimeout
flag = false;
},0)
while(flag){} //flag=true,while函数无限循环
console.log(flag); //浏览器卡死，无结果
5.
原代码输出
for(var i=0;i<5;i++){
setTimeout(function(){
console.log('delayer'+i)
},0);
console.log(i) //0,1,2,3,4,(5)delayer5
}
//按优先级先输出0，1，2，3，4；
console.log(i)输出完了之后，才轮到setTimeout输出，
这时候i++后，i变成了5，再马上一次性输出5个delayer5
修改代码输出
for(var i=0;i<5;i++){
setTimeout((function(){
var n = i
return function(){
console.log('delayer'+n) //delayer0，delayer1，
// delayer2，delayer3，
// delayer4
}
})(),0);
console.log(i) //0，1，2，3，4
}
<-------------------------------------------------------->
for(var i=0;i<5;i++){
(function(n){
var n = i
setTimeout(function(){
console.log('delayer'+n) //delayer0，delayer1，
//delayer2，delayer3，
//delayer4
},0);
})(i);
console.log(i) //0，1，2，3，4
}
6.
获取元素的真实宽高
<!DOCTYPE html>
<html>
<head>
<title>获取元素的真实宽高</title>
<style type="text/css">
.box{
width: 40px;
height: 20px;
}
</style>
</head>
<body>
<div class="box">
hello
</div>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0]
var width = getComputedStyle(box)['width']
var height = getComputedStyle(box)['height']
</script>
</body>
</html>
7.
var a = 'https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=ASCII&*'
var encoUrl = encodeURL(a) //简单编码
var encoRrlCpt =encodeURLcomponent(a) //全面编码
var decorUrl = decodeURL(a) //简单解码
var decoUrlCpt = decodeURLcomponent(a) //全面解码
var loginUrl = encodeURLcomponent('http://jirengu.com/login.php?' + 'back='+ a) //页面跳转返回需要全面解码
8.
判断浏览器的类型
function isAndroid(){
return /Android/.test(navigator.userAgent)
}
function isIphone(){
return /iphone/.test(navigator.userAgent)
}
function isIpad(){
return /ipad/.test(navigator.userAgent)
}
function isIOS(){
return /ios/.test(navigator.userAgent)
}
console.log(isAndroid())
console.log(isIphone())
console.log(isIpad())
console.log(isIOS())
网友评论