箭头函数和普通函数的10个区别

简介: 9021年底了,突然想在这个最后一个月准备一下,试试机会,能否更进一步。所以开始准备一些基础知识,也随带总结出来给各位想换工作的同学。希望大家能找到自己想要的工作。祝大家好运!


9021年底了,突然想在这个最后一个月准备一下,试试机会,能否更进一步。所以开始准备一些基础知识,也随带总结出来给各位想换工作的同学。希望大家能找到自己想要的工作。祝大家好运!


总结回顾



1、箭头函数没有prototype属性


let fn = () => {};
fn.prototype === undefined; //true


2、箭头函数的this指向定义时外层第一个普通函数的this


let fn,
    barObj = { message: 111 },
    fooObj = { message: 222 };
function bar() {
    // 运行时实例
    fn();
}
function foo() {
    // 定义时实例
    fn = () => {
        console.log('输出:', this); // 输出: {message: 222}
    }
}
// 这里有一个问题就是,foo.call一定要在bar.call之前,大家想想为什么了?
foo.call(fooObj);
bar.call(barObj);


3、不能直接修改箭头函数的this


let fn,
    barObj = { message: 111 },
    fooObj = { message: 222 };
function bar() {
    // 运行时实例
    fn.call({message: 333});
    baz.call({message: 333})
}
function foo() {
    // 定义时实例
    fn = () => {
        console.log('输出:', this); // 输出: {message: 222}
    }
}
function baz() {
  console.log('输出:', this); // 输出: {message: 333}
}
foo.call(fooObj);
bar.call(barObj);
// 这里如何能修改箭头函数this的指向了,我们可以间接操作。
// 修改箭头函数的this指向定义时外层第一个普通函数的this,来达到我们的目的


4、当箭头函数外层没有普通函数时,它的this在严格和非严格模式都是指向window。



5、箭头函数没有外层函数直接使用arguments会报错


let foo = () => {
    console.log('输出:', arguments); 
}
foo()
复制代码



6、箭头函数有外层函数时,arguments继承自外层函数的arguments


function foo() {
  console.log(arguments);
  function boo () {
    console.log(arguments);
    function coo () {
      console.log(arguments);
      let aoo = () => {
        console.log(arguments);
      }
      aoo('外层4');
    }
    coo('最外层3');
  }
  boo('外层2');
}
foo('外层1');


7、使用new调用箭头函数会报错


let aoo = () => {
  console.log(arguments);
}
let boo = new aoo();



8、箭头函数没有外层函数时,new.target会报错


let a = () => {
    console.log(new.target);
};
a();



9、箭头函数不支持重名参数


function foo(a, a) {
    console.log(a, arguments); 
}
var boo = (a, a) => {
    console.log(a);
};
foo(1, 2);
boo(1, 2);



10、箭头函数语法更具优雅


  1. 箭头函数不用写function
  2. 箭头函数只有一个参数时,可以省略括号
  3. 箭头函数可以省略{}和return


参考: 论普通函数和箭头函数的区别以及箭头函数的注意事项和不适用场景

目录
相关文章
|
5月前
|
自然语言处理 JavaScript 前端开发
说说箭头函数的特点
说说箭头函数的特点
61 0
|
5月前
|
开发者
箭头函数
认识箭头函数
54 4
|
5月前
箭头函数是什么
箭头函数是什么
46 0
|
6天前
|
自然语言处理
箭头函数和普通函数的区别是什么?
箭头函数和普通函数的区别是什么?
|
2月前
|
缓存 JavaScript 前端开发
函数的定义、调用、箭头函数、闭包
函数的定义、调用、箭头函数、闭包
22 2
|
4月前
箭头函数和普通函数的区别
箭头函数和普通函数的区别
19 0
|
5月前
|
自然语言处理
解释一下箭头函数的this绑定行为。
箭头函数的`this`绑定遵循词法作用域,不同于普通函数的动态绑定。它在定义时即确定,不受调用方式影响。这解决了`this`丢失问题,提供了更简洁的语法。例如,当在一个对象中,箭头函数的`this`将指向全局对象或父级作用域,而不是对象本身,与普通函数表现不同,使用时需谨慎。
34 8
|
5月前
|
JavaScript 网络架构
箭头函数详解
箭头函数详解
30 1
面试官:箭头函数和普通函数的区别?箭头函数的this指向哪里?(二)
面试官:箭头函数和普通函数的区别?箭头函数的this指向哪里?(二)
|
11月前
|
JavaScript 前端开发
箭头函数和普通函数有什么区别
箭头函数和普通函数有什么区别
57 1
下一篇
无影云桌面