明天的内容其实挺有重量的，首先我要说一下明天是温习的最初一天，过后学到这里就断了，心田有点小冲动，因为终于完结了温习的苦楚，还是承受新常识比拟有能源，明天的内容也是挺够重量的是一些对于闭包、递归、以及函数的办法的一些利用
1、
先来一个开胃小菜，es5 新增的扭转 this 指向的一个办法，bind，我感觉他与另外两个不同，认为他不会被调用，刚开始意识我还认为这个用的起码应该，其实才察觉这才是大哥，他用的最多，他的一个案例也很经典，点击一个按钮，点过后就禁用三秒后就须要回到能够点击的状态，对于定时器的 this 指向问题，在正文外面也说了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button> 点击 </button>
<script>
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
this.disabled = true
setTimeout(function() {this.disabled = false}.bind(this),3000)
// 这里不能用 call apply 因为这里不能立刻执行 什么叫做立刻执行 也就是当运行完禁用按钮过后运行定时器的时候 不必期待立刻执行 所以就看不到咱们须要的成果 所以这里就要利用 bind 来达到即实现了扭转 this 又不会立刻执行
})
</script>
</body>
</html>2.
而后明天的第二个案例是对于闭包的，点击 li 输入索引号，感觉与闭包打交道最多的明天哈，根本都是解决一些回调函数的异步问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 以前的办法就增加类名点哪个取哪个即可，当初要用闭包的想法实现
var lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
/* 这里间接输入 i 是不行的，为什么不行因为这关乎到一个同步与异步工作的状况，后面的 for 循环是同步工作，最先执行完，而异步工作也就是
回调函数，典型的事件、定时器、ajax 这三个必须等到同步工作执行完了才回去执行异步工作，所以这里间接输入 i 的话只会失去最初一个 i
这里不必以前老办法，那就须要用到闭包的利用了，for 循环四次那就失去四个立刻执行函数，把 i 传进去，再在外面绑定事件，接管 i 的值 */
(function(i) {lis[i].onclick = function() {console.log(i);
// 还有这里是有闭包的产生的，用到了局部变量 i
}
})(i)
}
</script>
</body>
</html>3.
第三个是三秒后输入 li 外面的内容，很显著要用到定时器，很显著又要碰到异步回调函数了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var lis = document.querySelectorAll('li')
for (var i = 0 ; i < lis.length; i++) {/* setTimeout(function() {console.log(lis[i].innerHTML);
},3000)
这样做会报错，为什么，还是那个情理，这里是异步工作，等你定时器开始运行了，i 曾经来到了最初一个 */
(function(i) {setTimeout(function() {console.log(lis[i].innerHTML);
}, 3000);
}) (i)
}
</script>
</body>
</html>4.
第四个感觉是一个综合利用闭包的案例，说实话这种解决形式，我第一次见，而且也并没有想到能这么来解决，一个对于打车价格的案例，对于这些不相熟的我当前必定会多加练习的，毕竟当初做了第二遍就曾经开始缓缓相熟这种编程形式了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 打车起步价 13（3 公里以内）超出一公里多收五元 用户能够输出计算打车的价格 如果有拥挤状况 多收取十元
// 这个利用的迷茫点在于 公里以及拥挤状况我想的是用 prompt 由用户来输出 然而如果要更联合开发的话 应该是为函数的实参
var car = (function() {
var start = 13
var price = 0
// 重点 返回一个对象 外面有办法 那么此时造成了闭包 同时里面也能够间接调用且可输出实参
return {price : function(n) {if (n <= 3) {price = start} else {price = start + (n - 3) * 5
}
return price
},
du : function(flag) {return flag ? price + 10 : price}
}
})()
// 把立刻执行函数赋值给这个 car 意思就是首先要立刻执行 而后外面有个 return 返回值 所以就会把这个 return 给到这个 car
console.log(car.price(5))
console.log(car.du(true))
</script>
</body>
</html>5.
插入一个思考题，这道题对我最大的一个感触就是，函数的那个双重调用形式，而且调来调去就调到里面来了，this 还变成了 window，第一个函数挺能阐明一些问题的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 有无闭包产生？后果是什么？/* var name = 'window object'
var object = {
name : 'my object',
getNameObject : function() {return function() {console.log(this.name);
}
}
}
console.log(object.getNameObject()()); */
// 首先下面的输入模式要搞清楚 先是调用对象外面的办法 调用过后相当于返回了一个函数 所以要持续调用该函数
// 明确了执行办法过后 要留神调用返回了函数过后 相当于这个函数申明 到了该函数内部来了
/* // var f = (object.getNameObject() 那么此时 f = function() {console.log(this.name);
} */
// 所以要留神此时的 this 是 Window 所以就晓得输入什么了吧 而后就是闭包的问题这里很显著没有闭包 尽管造成了函数嵌套 然而没有变量的利用
// 第二个
var name = 'window object'
var object = {
name : 'my object',
getNameObject : function() {
var that = this
return function() {console.log(that.name);
}
}
}
console.log(object.getNameObject()())
// 这个很显著造成了闭包 且 输入也是属性的 name 然而此时的 this 他还是 window
</script>
</body>
</html>前端爱好者，望大佬给个内推机会！！！