一、普通函数
1.首先我们说一下普通函数function的使用方式
1.1当我们要定义函数的时候,有两种方法定义函数(function 函数名(){})(var 函数名=function (){})。例如以下代码进行定义fn1、fn2
var a=10;
function fn1(){
console.log(a);
} ;
var fn2=function(){
console.log(a);
} ;
1.2两种定义方式的不同
第一种方式具有函数提升,第二种没有函数提升,我们可以把下边的两段代码放入script标签中,运行会发现第一个输出的是undefined,第二个会报错;所以第二种方式不会有函数提升
fn1();
var a=10;
function fn1(){
console.log(a);
} ;
fn2();
var a=10;
var fn2=function(){
console.log(a);
} ;
1.3普通函数中的this指向1
我们script标签中输入这样一段代码,我们控制台输出的this是window,那么我们在对象里设置一个函数的时候this又会指向谁
<script>
var a=10;
function fn1(){
console.log(a);
console.log(this);
} ;
var fn2=function(){
console.log(a);
console.log(this);
} ;
fn2();
fn1();
</script>
1.4普通函数中的this指向2
我们在一个对象中定义一个函数,利用这个函数输出this,如下代码段,我们执行以后输出的是obj这个对象,说明此时this指向了这个对象,所以在普通函数中我们的this会指向函数外的第一个父类。
var obj={
fn(abc){
console.log(this);
}
}
obj.fn(123);
1.5定时器的this指向,我们在定时器中定义的函数输出this,当我们点击按钮的时候触发这个定时器,控制台输出的是window
<body>
<button id="add">点击触发</button>
<script>
var add=document.getElementById("add");
add.onclick=function(){
setInterval(function(){
console.log(this);
},1000);
setTimeout(function(){
console.log(this);
},1000);
} ;
</script>
</body>
1.6我们把定时器的方法放入对象中调用又会发生什么,我们这次通过调用对象下的方法来调用定时器时,this的输出是什么,仍然是windows
<body>
<button id="add">点击触发</button>
<script>
var add=document.getElementById("add");
add.onclick=function(){
obj.fun();
} ;
var obj={
fun(){
setInterval(function(){
console.log(this);
},1000);
setTimeout(function(){
console.log(this);
},1000);
}
}
</script>
</body>
二、箭头函数
1.箭头函数的用法
箭头函数的基本使用,空号中是填入参数,如果只有一个参数可以不写括号,
()=>{};
2.箭头函数的命名定义和使用;
var fn2 = () => {
console.log(11);
}
fn2();
3.箭头函数不具备函数提升,必须先定义才能调用;
4.箭头函数中的this(**重点):箭头函数中的this只会找上以及的父元素,只遵循这一点,如果上一级仍然为箭头函数,那么继续向上找。所以重要的是,如果我们在一个对象中定义一个箭头函数利用定时器进行输出this,那么zhegethis的值为这个对象,即如下代码的输出就是obj;
(我们在fun函数内用了两个定时器,一个用的function函数,一个用的箭头函数,箭头函数的this输出的是obj对象,另一个输出的window)
<body>
<button id="add">点击触发</button>
<script>
var add=document.getElementById("add");
add.onclick=function(){
obj.fun();
} ;
var obj={
a:12,
fun(){
setInterval(int=>{console.log(this);},1000);
setTimeout(function(){
console.log(this);
},1000);
}
}
</script>
</body>
5.我们把上述代码fun也改为箭头函数,两个定时器的输出都是window,但是两个this寻找的方式不同,一个是箭头函数的上一级仍然是箭头函数,再想上找为window,而另外一个定时器中的函数中的function中的定时器this直接指向window
<button id="add">点击触发</button>
<script>
var add=document.getElementById("add");
add.onclick=function(){
obj.fun();
} ;
var obj={
a:12,
fun:()=>{
setInterval(int=>{console.log(this);},1000);
setTimeout(function(){
console.log(this);
},1000);
}
}
</script>
</body>
6.箭头函数不能new 不能作为构造函数
7.箭头函数中没有argument(有rest);