PHP大牛成长之路：ES6的箭头函数与类的使用

1、箭头函数

箭头函数相当于匿名函数，简化了函数的定义，如以下例子：

      // ES5写法：匿名函数
      let fn1=function() {
        return "函数名叫：" + fn1.name;
      }
      console.log(fn1());  //函数名叫：fn1
      // ES6写法：箭头函数
      let fn2 = () => "函数名叫：" + fn2.name;
      console.log(fn2());  //函数名叫：fn2

1.1 箭头函数语法

1.1.1 无参数

      // 1. 无参数(匿名函数)
      let fn1 = function () {
        console.log(fn1.name);
      };
      fn1();
      // 无参数(箭头函数)
      fn1 = () => console.log(fn1.name);
      fn1();

1.1.2 单个参数

      // 2. 单个参数(匿名函数)
      let fn1 = function (name) {
        console.log(name);
      };
      fn1("PHP中文网");
      // 单个参数(箭头函数)
      fn1 = (name) => console.log(name);
      fn1("PHP中文网");

1.1.3 多个参数

      // 3. 多个参数(匿名函数)
      let fn = function (...items) {
        console.log(items);
      };
      fn(1, 2, 3, 4);
      // 多个参数(箭头函数)
      fn = (...items) => {
        console.log(this);
        console.log(items);
      };
      fn(5, 6, 7, 8);

1.2 箭头函数应用场景（解决 this 指向问题）

      // ES5写法：匿名函数
      let user = {
        // 属性
        name: "peter-zhu",
        // 方法
        getName: function () {
          // 回调this的作用域是函数本身
          console.log(this.name); // 输出："peter-zhu
          setTimeout(function () {
            //再次回调this的作用域是全局window
            console.log(this.name); // 输出为空：全局name为空值
          }, 1000);
        },
      };
      //调用对象方法：
      user.getName();

箭头函数的 this 永远指向其父作用域，轻松解决 this 指向问题

      // ES6写法：箭头函数
      let user = {
        // 属性
        name: "peter-zhu",
        // 方法
        getName: function () {
          // 回调this的作用域是函数本身
          console.log(this.name); // 输出："peter-zhu
          setTimeout(() =>{
            //再次回调this的作用域仍然是函数本身
            console.log(this.name); // 输出："peter-zhu
          }, 1000);
        },
      };
      //调用对象方法：
      user.getName();

2、类

2.1 原生js中没有类(通过”构造函数”模拟)

      // 原生js中没有类, 通过"构造函数"模拟类
      function Person(name) {
        // 属性
        this.name = name;
      }
      // 方法
      // 公共方法放在函数的原型对象上
      Person.prototype.sayName = function () {
        return this.name;
      };
      let person = new Person("杨过");
      let person1 = new Person("小龙女");
      console.log(person);
      console.log(person1.sayName());

2.2 ES6新增的类（可以看作构造函数的另一种写法）

    //   ES6中的类
      class PersonClass {
        // 构造方法
        constructor(name) {
          this.name = name;
        }
        // 原型方法
        sayName() {
          return this.name;
        }
      }
      person = new PersonClass("杨过");
      person1 = new PersonClass("小龙女");
      console.log(person);
      console.log(person1.sayName());

2.3 构造函数的原型属性与原型链

      //   ES6中的类
      class PersonClass {
        // 构造方法
        constructor(name) {
          this.name = name;
          this.age = 18;
        }
        // 原型方法
        sayName() {
          return this.name;
        }
      }
      // 使用prototype属性创建方法
      PersonClass.prototype.getAge = function () {
        return this.age;
      };
      person = new PersonClass("杨过");
      console.log(person);
      console.log(person.getAge());
      console.log(person.sayName());
      console.log(typeof(PersonClass)); //类的原型是：函数
      console.log(typeof(person));  //实例化后是：对象
      console.log(PersonClass.prototype === person.__proto__); //true 
    //   PersonClass.prototype与person.__proto__属性是相等的,
    // __proto__:函数与对象共有(原型链:当访问对象属性时,如果该对象内部不存在这个属性,就会向指向的那个对象里找(prototype相当于父对象))
    // prototype:函数所独有的,原型对象.

总结

• 了解了箭头函数的基本使用，语法简洁了，可读性实在太差，可能接触太少；
• ES6的类其实可以看作构造函数的另一种写法；
• 构造函数的原型属性与原型链：简单理解：__proto__是实例化后属性继承prototype原型方法；
  • __proto__:函数与对象共有(原型链:当访问对象属性时,如果该对象内部不存在这个属性,就会向指向的那个对象里找(prototype相当于父对象))
  • prototype:函数所独有的,原型对象.