普通函数:function fn(){}
箭头函数:let fn = ()=>{}
<script>
//普通函数的写法
function getName1(){
console.log('小马');
};
//调用函数 看控制台输出的结果是不是“小马”
getName1();
//箭头函数的写法
let getName2 = ()=>{
console.log('小红');
};
//调用函数
getName2();
</script>
输出结果:
心得:别看简单,不自己动手还是会忘。
箭头函数中的this:
//1.this是静态的。 this始终指向函数声明时所在作用域下的this的值
//普通函数的写法
function getName1(){
console.log(this.name);
};
//箭头函数的写法
let getName2 = ()=>{
console.log(this.name);
};
//设置window对象的name属性
window.name = '小马'; //也可以写成let name = '小马';
const otherName = {
name:'小红',
};
//调用函数
getName1();
getName2();
输出结果:
都是“小马”没有错,Why?
因为普通函数(也就是getName1)的作用域是window,箭头函数的this的作用域也是window,所以两个函数在控制台输出的值都是“小马”。
okok,接下来,我们再看看,如果用call方法改变this的指向,看看普通函数和箭头函数的区别:
//1.this是静态的。 this始终指向函数声明时所在作用域下的this的值
//普通函数的写法
function getName1(){
console.log(this.name);
};
//箭头函数的写法
let getName2 = ()=>{
console.log(this.name);
};
//设置window对象的name属性
window.name = '小马'; //也可以写成let name = '小马';
const otherName = {
name:'小红',
};
//调用函数
getName1(); //输出结果是:小马
getName2(); //输出结果是:小马
//call方法调用
getName1.call(otherName); //输出结果是:小红
getName2.call(otherName); //输出结果是:小马
普通函数输出的结果是 “小红” 没有问题,因为使用了call方法把this的指向改变为指向otherName了。
那有人会有疑问??? 那箭头函数不也使用call方法改变了this的指向吗?
是啊,是用了call方法尝试去改变,但是呢,箭头函数有一个特点就是:箭头函数的this是静态的,this始终指向函数声明时所在作用域下的this的值。(这句话给我记住)
扫描二维码关注公众号,回复:
15235035 查看本文章
(:所以,即使你用call尝试去改变它的指向,但是由于它的this是静态的,它的this始终指向函数声明时所在作用域下的this的值。 所以this还是指向window,所以输出的结果还是:“小马”)
箭头函数的简写(有2种情况):
//箭头函数的简写(有两种情况)
//1.省略小括号,当形参有且只有一个的时候
let add= n => { //这里的n省略了小括号!!!
return n + n;
};
console.log(add(3)); //输出的结果是:6
//2.省略花括号,当代码体只有一条语句的时候
//注意:花括号去掉的时候,return也应该省略
let pow = (n) => n * n;
console.log(pow(3)); //输出的结果是:9