全局变量var
var存在缺陷:
1.var可以重定义
例一
<script>
var xxx=10;
var xxx=11;
console.log(xxx);
</script>
结果:
例二
<button class="btn">按钮1</button> <button class="btn">按钮2</button> <button class="btn">按钮3</button> <button class="btn">按钮4</button> <button class="btn">按钮5</button> <script> var nodes=document.getElementsByClassName('btn'); for (var i=0;i<nodes.length;i++){ nodes[i].onclick=function () { console.log(i); } } </script>
依次点击按钮1-5:
var nodes=document.getElementsByClassName('btn'); for (let i=0;i<nodes.length;i++){ nodes[i].onclick=function () { console.log(i); } }
将i的作用于改为let之后依次点击按钮1-5:
2.var不具有块级元素
<script>
var xxx=10;
{
var xxx=11;
console.log(xxx);
}
console.log(xxx);
</script>
结果:
解决方案:
1.老办法闭包
var pi = 10000; {//{}表示一个块 (function() { var pi = 3; console.log(pi); }) //(function(){})将function定义为一个方法 ();//()代表调用方法 } console.log(pi);
结果,块里面的pi为3,外边pi为1000
2.新办法用let定义为局部变量
var pi=1000;
{
let pi=33;
console.log(pi);
console.log(this.pi);
}
console.log(pi);
this.pi可以获取外面一级的pi值
常量const
const pi=3.14;
pi=10;
console.log(pi);
这里提示定义为常量之后不可以修改值
闭包函数传参
<script>
(function (a,b) {
var pi=1000;
console.log(pi);
console.log(a+b);
})
//调用这个闭包函数并传递两个参数
(1111,2222);
</script>
闭包函数结果
闭包注意:写了一个闭包函数必须要有();进行调用,必须成对出现。如果有多个闭包函数也是这样一个闭包定义对应一个闭包调用。
箭头函数
<scirpt> var person = { name: 'zz', age: 1, work: function (a, b) { console.log('a+b=', a + b); }, //箭头函数写法一 func1: (a, b) => { console.log('a+b=', a + b); }, //箭头函数写法二 // 使用单参数的时候可以不适用()将其括起来 func2: a => console.log('单参数:', a), //箭头函数写法三 // 无参的时候 func3:()=>console.log('无参数') }; person.work(1, 3); person.func1(1, 3); person.func2(10); person.func3();</script>
结果:
this
第一种情况
var person = { name: 'zz', age: 1, work: function (a, b) { //一般函数this拿到了对象本身 console.log('这是一般函数',this); console.log('a+b=', a + b); }, func1: (a, b) => { console.log('a+b=', a + b); //箭头函数this 拿到的时window对象 console.log('这是箭头函数:',this); }, func11(a,b){ //一般函数this拿到了对象本身 console.log('a+b=',a+b); console.log('这是一般函数',this); } }; person.work(1, 3); person.func1(1, 3); person.func11(1, 3);
结果:
第二种情况
<script> var person = { name: '张三', age: 1, work: function () { //方法内的方法 function internal() { //一般函数this拿到了window console.log('一般函数:') console.log(this); } internal(); }, work2: function () { //方法内的方法 //这里不能写成这个样子: hun:()=>{} //这是因为hun()这个方法在这里只是一个方法名,不是对象的属性是一个方法和上面的箭头函数有一点点不一样 var hun=() => { console.log('箭头函数:') console.log(this); }; hun(); } } person.work(); person.work2();</script>
结果:
第三种情况
<scirpt> $('food').each(function(){ $(this);})
这里each()中的$(this)获取的是food遍历的对象,是因为each函数自身经过加工处理过所以这里的this指向的是food遍历对象
以下内容转载自:https://blog.51cto.com/2014fontend/2327334
1.普通函数的this:指向它的调用者,如果没有调用者则默认指向window.
2.箭头函数的this: 指向箭头函数定义时所处的对象,而不是箭头函数使用时所在的对象,默认使用父级的this.
3.箭头函数中的this,首先从它的父级作用域中找,如果父级作用域还是箭头函数,再网上找,如此直至找到this的指向