精华内容
下载资源
问答
  • 箭头函数和普通函数

    2021-07-01 16:30:47
    箭头函数和普通函数的区别 1、定义方式 // 箭头函数 function func=()=>{ // code } //普通函数 function func() { // code } 2、是否匿名 箭头函数都是匿名函数,而普通函数可以有匿名函数也可以有具体名 // ...

    1、定义方式

    // 箭头函数
    function func=()=>{
    	// code
    }
    //普通函数
    function func() {
    	// code
    }
    

    2、是否匿名
    箭头函数都是匿名函数,而普通函数可以有匿名函数也可以有具体名

    // 箭头函数
    let func=()=>{
    	// code
    }
    //具名函数
    function func() {
    	// code
    }
    //匿名函数
    let func = function(){
    	// code
    }
    

    3、箭头函数不能用于构造函数,不能使用new

    function Person(name,age){
    	this.name = name;
    	this.age = age;
    }
    let xhh = new Person('小花花',18);
    console.log(xhh.name);	//	小花花
    console.log(xhh.age);	// 18
    

    Person 用作构造函数,可以通过Person创建实例对象。
    4、箭头函数中this指向不同
    4.1 箭头函数本身不创建this,它在声明时可以捕获其所在上下文的this供自己使用(并且this一旦被捕获,就不再发生变化)

    var name = "张三"
    function wrap(){
    	this.name = "李四"let func=()=> {
    	console.log(this.name);
    }
    	func();
    }
    let en = new wrap();//李四
    

    分析:
    构造函数:wrap()
    this指向:创建的实例化对象en
    箭头函数this指向:实例化对象en

    4.2 结合call().apply()方法使用
    箭头函数结合call(),apply()方法调用一个函数时,只传入参数,对this没有影响。

    let obj = {
    	a:10,
    	b:function(n) {
    		let f = (n) => n+this.a;//this指向obj
    		return f(n);
    	},
    	c:function(n) {
    		let f = (n) => n + this.a;//this指向obj
    		let m = {
    			a:20
    		}
    		return f.call(m,n);
    	}
    }
    console.log(obj.b(1));//11
    console.log(obj.c(1));//11
    

    面试中可能会问到的问题:
    两者区别、箭头函数的this指向、是否能new、能否调用apply,bind、结果是什么,只调用只能绑定参数不能修改this指向。
    箭头函数的this永远指向其上下文的this,无法改变指向;普通函数的this指向调用它的对象。
    参考:https://blog.csdn.net/qq_42258904/article/details/110083064

    展开全文
  • js代码-箭头函数和普通函数的区别
  • 箭头函数和普通函数的区别箭头函数和普通函数的区别 箭头函数和普通函数的区别 1、箭头函数不能通过arguments获取形参,但是能通过rest获取形参。 2、箭头函数this指向定义箭头函数时的上下文对象,而普通函数的...

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

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

    1、箭头函数不能通过arguments获取形参,但是能通过rest获取形参。
    2、箭头函数this指向定义箭头函数时的上下文对象,而普通函数的this指向调用者.

    附上代码:
    在这里插入图片描述

    展开全文
  • 箭头函数和普通函数无区别
    展开全文
  • js箭头函数和普通函数区别 实验环境:nodejs v12.16.1 箭头函数不能作为构造函数,而普通函数可以 箭头函数没有原型,而普通函数有。 箭头函数return可以省略语句块。 箭头函数不绑定arguments(注意:浏览器...

    js箭头函数和普通函数区别

    实验环境:nodejs v12.16.1

    1. 箭头函数不能作为构造函数,而普通函数可以 在这里插入图片描述

    2. 箭头函数没有原型,而普通函数有
      在这里插入图片描述

    3. 箭头函数return可以省略语句块。(如果=>右边不是语句块,则代表return右边的表达式或对象)
      在这里插入图片描述

    4. 箭头函数不绑定arguments(注意:浏览器环境下获取箭头函数的arguments会报错),而普通函数argument绑定了参数列表对象
      在这里插入图片描述

    5. this指向问题[重点,也是难点]

      • 箭头函数的this指向上层函数作用域的this对象,如果没有上层函数作用域,则指向顶部this(在浏览器中顶部this则是window)。普通函数的this指向该函数的调用者
      • call, apply, bind会改变普通函数的this,但不会改变箭头函数的this
        在这里插入图片描述
        实践是检验真理的有效标准,在此,我们必须更加深入了解,再耐心看一个复杂的例子:
        依然是nodejs环境下:
      data = 40; // 全局作用域赋予data=40
      this.data = 30; // 给顶部this赋予data=30
      let pig = {
          data: 80,
      };
      let o = {
          data: 10,
          a(n) {
              let f = (n) => {
                  // 分析如下:
                  // 首先f是箭头函数,那么f的this指向上层函数作用域的this,f的上层函数作用域是a,因此f的this指向a的this
                  // 由于a是普通函数,因此a的this指向a的调用方
                  // 因此f的this指向a的调用方
                  return n + this.data;
              };
              return f(n);
          },
          b(n) {
              let f = (n) => {
                  return n + this.data;
              };
              let other = {
                  data: 20,
              };
              // 分析如下:
              // 和函数a的情形分析一样,这里的f的this指向是b的调用方
              // 然而 call,bind,apply 并不会改变箭头函数的调用方,因此f.call(other, n)并不会把this指向other
              return f.call(other, n);
          },
          c(n) {
              let f = function (n) {
                  // 分析如下:
                  // f是普通函数,因此f的this指向f的调用方
                  return n + this.data;
              };
              let other = {
                  data: 20,
              };
              // 分析如下:
              // call会改变普通函数的调用方,因此f.call(other, n)把this指向了other
              return f.call(other, n);
          },
          d: (n) => {
              let f = (n) => {
                  // 分析如下:
                  // f是箭头函数,因此f的this指向上层函数作用域d的this
                  // 由于d也是箭头函数,由于d没有再上层的函数作用域了,因此d的this指向顶部this
                  // 因此f的this指向顶部this
                  return n + this.data;
              };
              return f(n);
          },
          e(n) {
              let f = function (n) {
                  return n + this.data;
              };
              let other = {
                  data: 20,
              };
              // g的this指向other了
              let g = f.bind(other);
              return g(n);
          },
          e1(n) {
              let f = function (n) {
                  return n + this.data;
              };
              // 注意,nodejs下这里f的调用方是global(注意nodejs下的顶层this并不等于global,顶层this是当前模块的this)
              return f(n);
          },
          e2(n) {
              let f = (n) => {
                  return n + this.data;
              };
              let other = {
                  data: 20,
              };
              // bind对箭头函数不起作用,f的this -> e2的this -> e2的调用方
              let g = f.bind(other);
              return g(n);
          },
      };
      
      console.log(o.a(1)); // 11
      console.log(o.b(1)); // 11
      console.log(o.c(1)); // 21
      console.log(o.d(1)); // 31
      console.log(o.e(1)); // 21
      console.log(o.e1(1)); // 41
      console.log(o.e2(1)); // 11
      
      console.log(`============接下来比较复杂,但是要搞清楚=========================`);
      
      // 分析:
      // o.a普通函数,因此bind把o.a的this指向pig
      // o.a里面的f的this指向o.a的调用方,因此f的this指向pig
      console.log(o.a.call(pig, 1)); // 81
      
      console.log(o.b.call(pig, 1)); // 81
      
      console.log(o.c.call(pig, 1)); // 21
      
      console.log(o.d.call(pig, 1)); // 31
      
      console.log(o.e.call(pig, 1)); // 21
      
      console.log(o.e1.call(pig, 1)); // 41
      
      // 分析
      // o.e2普通函数,因此bind把o.e2的this指向pig
      // o.e2里面的f是箭头函数,因此f指向上层函数作用域o.e2的this,而o.e2的this指向了pig,因此f的this指向pig
      // o.e2里面的f是箭头函数,不会被bind改变指向,因此g的this也指向pig
      console.log(o.e2.call(pig, 1)); // 81
      
    6. 箭头函数内不能用yield且不能用作Generator函数,而普通函数可以。

    展开全文
  • 箭头函数和普通函数 1箭头函数是匿名函数,不能作为构造函数,不能使用new 2 箭头函数不能绑定arguments,取而代之用rest参数…解决 3 箭头函数没有原型prototype属性 4 箭头函数的this永远指向其上下文的this,没有...
  • JS中箭头函数和普通函数的区别 ES6标准新增了一种新的函数:箭头函数Arrow Function let fn = () => {}; 箭头函数是一种非常好用的语法,其有着简洁的函数声明方法,还有很多的简写方式,下面详细的介绍一些箭头...
  • 1: 箭头函数和普通函数区别? 构造函数(function) 可以使用new 生成实例, 那么箭头函数可以吗? 为什么? 1.1: 1: // (ES6 中每一个函数都可以使用形参赋默认值和剩余运算符) // 普通函数 function fn (x)...
  • 普通函数和箭头函数的区别: 箭头函数的this指向规则: 箭头函数没有prototype(原型),所以箭头函数本身没有this let a = () =>{}; console.log(a.prototype); // undefined 箭头函数的this指向
  • 箭头函数普通函数的简写,而箭头函数和普通函数的差异如下: 1、this指向。箭头函数的this永远指向其上下文的this,没有办法改变其指向;而普通函数的this指向调用它的对象 2、不可以使用 arguments 对象,该对象...
  • 箭头函数和普通函数的区别? 1.箭头函数是匿名函数,不能作为构造函数,不能使用new //箭头函数 let fun =()=>{ consloe.log(我是箭头函数); }; //普通函数 function fun(){ consloe.log(我是普通函数); } 箭头...
  • 面试官:“你说一下,箭头函数和普通函数有什么区别” 那现在我们就来讨论一下这个问题? 普通函数 const fun = function(){ return 100; } console.log(fun()) //在控制台打印的结果就是 100 箭头函数 //多...
  • 一、箭头函数箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ … }和...三、箭头函数和普通函数的区别 1. 箭头函数是匿名函数,不能作为构造函数,不能使用new: let
  • JavaScript之class中的箭头函数和普通函数1. 前言2. 实例代码3 通过实例调用方法3.1 调用箭头函数方法3.2 调用普通函数方法3.3 小结4. 通过方法的引用调用方法4.1 调用箭头函数方法4.2 调用普通函数方法4.3 小结 1. ...
  • ES6 的箭头函数和普通函数的区别? 语法更加简洁、清晰 箭头函数没有自己的this,它会捕获自己在定义时(注意,是定义时,不是调用时)所处的外层执行环境的this,并继承这个this值。所以,箭头函数中this的指向在...
  • 箭头函数和普通函数的区别 1、箭头函数是匿名函数,不能作为构造函数,不能使用new 箭头函数相当于匿名函数,并简化了函数定义。箭头函数有两种格式:一种只包含一个表达式,{ }和return可以省略不写,另一种可以...
  • ES6 中的箭头函数和普通函数有哪些区别 ? 箭头函数没有 prototype(原型): function test1 () { console.log(test1.prototype) } test1() //普通函数 constructor: f test1() const test2 = () => { ...
  • es6中的箭头函数和普通函数有什么区别? 1、普通函数的this总是指向他的调用者,箭头函数中没有自己的this,所以它的this指向其定义的环境,任何方法都改变不了他的this指向{call bind apply} 2、箭头函数没有自己...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,806
精华内容 15,522
关键字:

箭头函数和普通函数