明天的内容其实挺有重量的,首先我要说一下明天是温习的最初一天,过后学到这里就断了,心田有点小冲动,因为终于完结了温习的苦楚,还是承受新常识比拟有能源,明天的内容也是挺够重量的是一些对于闭包、递归、以及函数的办法的一些利用
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>
前端爱好者,望大佬给个内推机会!!!