前端开发--箭头函数_前端箭头函数

#博学谷IT学习技术支持#

目录

箭头函数基本使用

利用箭头函数直接返回对象

箭头函数中this的问题

箭头函数不适合的场景

箭头函数基本使用

在ES6中可以使用 “箭头”（=>）来定义函数。

使用传统的方式定义一个函数。

示例代码如下：

        // 使用传统方式定义函数
        let f = function(x, y) {
            return x + y;
        }
        console.log(f(3, 6));

通过上面的代码，可以发现传统方式来定义函数的时候，比较麻烦。

箭头函数的使用

        let f = (x, y) => {
            return x + y
        };
        console.log(f(9, 8));

在调用f这个函数的时候，将9和8传递给了x,y这两个参数，然后进行加法运算。

如果参数只有一个，可以省略小括号。

        let f = num => {
            return num / 2;
        }
        console.log(f(6));

如果没有参数，只需要写一对小括号就可以。

        let f = () => {
            return 9 / 3;
        }
        console.log(f());

上面我们写的代码中，发现函数体中只有一条语句，那么这时是可以省略大括号的。

        let f = (x, y) => x + y;
        console.log(f(3, 6));

把上面的代码转换成ES5的写法，发现和我们前面写的代码是一样的。

var f = function f(x, y) {
  return x + y;
};
 
console.log(f(3, 6));

利用箭头函数直接返回对象

如果希望箭头函数直接返回一个对象，应该怎样写呢？

你可能认为很简单，可以采用如下的写法

        let f = (id, name) => {
            id: id,
            userName: name
        };
        console.log(f(1, 'zs'));

但是上面的写法是错误的，因为这时大括号被解释为代码块，解决的办法是：在对象外面加上小括号,

所以，正确的写法如下：

        let f = (id, name) => ({
            id: id,
            userName: name
        });
        console.log(f(1, 'zs'));

通过打印，发现输出的是一个对象。

可以采用如下的写法

        let f = (id, name) => {
            return {
                id: id,
                userName: name
            }
        };
        console.log(f(1, 'zs'));

箭头函数中this的问题

   let person = {
            userName: 'ls',
            getUserName() {
                console.log(this.userName)
            }
        }
        person.getUserName();

以上代码执行的结果为：'ls',并且在该程序中this 为当前的person对象。

将上面的代码修改一下，要求延迟1秒钟以后，再输出用户名的名称

        let person = {
            userName: 'ls',
            getUserName() {
                setTimeout(function() {
                    console.log(this.userName)
                }, 1000)
            }
        }
        person.getUserName();

上面的输出结果为：undefined，因为在setTimeout中this指的是window,而不是person对象。

可以将代码进行如下的修改：

        let person = {
            userName: 'ls',
            getUserName() {
                let that = this;
                setTimeout(function() {
                    console.log(that.userName)
                }, 1000)
            }
        }
        person.getUserName();

在进入setTimeout这个方法之前，提前将this赋值给that变量，然后在setTimeout中使用that,那么这时that指的就是person对象。

上面的解决方法比较麻烦，可以修改成箭头函数的形式，代码如下所示：

        let person = {
            userName: 'wangwu',
            getUserName() {
                setTimeout(() => {
                    console.log(this.userName);
                },1000)
            }
        }
        person.getUserName();

通过上面的代码，可以发现在箭头函数中直接使用this是没有问题的。

在箭头函数中是没有this的，如果在箭头函数中使用了this,那么实际上使用的是外层代码块的this. 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this

找出定义箭头函数的上下文（即包含箭头函数最近的函数或者是对象），那么上下文所处的父上下文即为this.

setTimeout函数中使用了箭头函数，箭头函数中用了this,而这时this指的是外层代码块也就是person ,所以箭头函数中使用的this指的就是person

箭头函数不适合的场景

第一：不能作为构造函数，不能使用new操作符

构造函数是通过new操作符生成对象实例的，生成实例的过程也是通过构造函数给实例绑定this的过程，而箭头函数没有自己的this，因此不能使用箭头函数作为构造函数。

如下代码：

  function Person(name) {
        this.name = name;
      }
      var p = new Person("zhangsan"); //正常

以上是我们前面经常使用的一种方式，没有问题

使用箭头函数作为构造函数时的情况

   let Person = (name) => {
        this.userName = name;
      };
      let p = new Person("lisi");

当执行上面的程序的时候，会出现错误

第二：没有prototype属性

因为在箭头函数中没有this,也就不存在自己的作用域，因此箭头函数是没有prototype属性的。

  let Person = (name) => {
        this.userName = name;
      };
      console.log(Person.prototype); // undefined

第三：不适合将原型函数定义成箭头函数

在给构造函数添加原型函数时，如果使用箭头函数，其中的this会指向全局作用域window,而不会指向构造函数。

因此并不会访问到构造函数本身，也就无法访问到实例属性，失去了原型函数的意义。

 function Person(name) {
        this.userName = name;
      }
      Person.prototype.sayHello = () => {
        console.log(this); // window
        console.log(this.userName); // undefined
      };
      let p = new Person("zhangsan");
      p.sayHello();