搜索
博主信息
博文 63
粉丝 8
评论 8
访问量 63725
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PHP大牛成长之路:ES6的箭头函数与类的使用
周Sir-BLOG
原创
946人浏览过

1、箭头函数

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

  1. // ES5写法:匿名函数
  2. let fn1=function() {
  3. return "函数名叫:" + fn1.name;
  4. }
  5. console.log(fn1()); //函数名叫:fn1
  6. // ES6写法:箭头函数
  7. let fn2 = () => "函数名叫:" + fn2.name;
  8. console.log(fn2()); //函数名叫:fn2

1.1 箭头函数语法

1.1.1 无参数

  1. // 1. 无参数(匿名函数)
  2. let fn1 = function () {
  3. console.log(fn1.name);
  4. };
  5. fn1();
  6. // 无参数(箭头函数)
  7. fn1 = () => console.log(fn1.name);
  8. fn1();

1.1.2 单个参数

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

1.1.3 多个参数

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

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

  1. // ES5写法:匿名函数
  2. let user = {
  3. // 属性
  4. name: "peter-zhu",
  5. // 方法
  6. getName: function () {
  7. // 回调this的作用域是函数本身
  8. console.log(this.name); // 输出:"peter-zhu
  9. setTimeout(function () {
  10. //再次回调this的作用域是全局window
  11. console.log(this.name); // 输出为空:全局name为空值
  12. }, 1000);
  13. },
  14. };
  15. //调用对象方法:
  16. user.getName();

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

  1. // ES6写法:箭头函数
  2. let user = {
  3. // 属性
  4. name: "peter-zhu",
  5. // 方法
  6. getName: function () {
  7. // 回调this的作用域是函数本身
  8. console.log(this.name); // 输出:"peter-zhu
  9. setTimeout(() =>{
  10. //再次回调this的作用域仍然是函数本身
  11. console.log(this.name); // 输出:"peter-zhu
  12. }, 1000);
  13. },
  14. };
  15. //调用对象方法:
  16. user.getName();

2、类

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

  1. // 原生js中没有类, 通过"构造函数"模拟类
  2. function Person(name) {
  3. // 属性
  4. this.name = name;
  5. }
  6. // 方法
  7. // 公共方法放在函数的原型对象上
  8. Person.prototype.sayName = function () {
  9. return this.name;
  10. };
  11. let person = new Person("杨过");
  12. let person1 = new Person("小龙女");
  13. console.log(person);
  14. console.log(person1.sayName());

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

  1. // ES6中的类
  2. class PersonClass {
  3. // 构造方法
  4. constructor(name) {
  5. this.name = name;
  6. }
  7. // 原型方法
  8. sayName() {
  9. return this.name;
  10. }
  11. }
  12. person = new PersonClass("杨过");
  13. person1 = new PersonClass("小龙女");
  14. console.log(person);
  15. console.log(person1.sayName());

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

  1. // ES6中的类
  2. class PersonClass {
  3. // 构造方法
  4. constructor(name) {
  5. this.name = name;
  6. this.age = 18;
  7. }
  8. // 原型方法
  9. sayName() {
  10. return this.name;
  11. }
  12. }
  13. // 使用prototype属性创建方法
  14. PersonClass.prototype.getAge = function () {
  15. return this.age;
  16. };
  17. person = new PersonClass("杨过");
  18. console.log(person);
  19. console.log(person.getAge());
  20. console.log(person.sayName());
  21. console.log(typeof(PersonClass)); //类的原型是:函数
  22. console.log(typeof(person)); //实例化后是:对象
  23. console.log(PersonClass.prototype === person.__proto__); //true
  24. // PersonClass.prototype与person.__proto__属性是相等的,
  25. // __proto__:函数与对象共有(原型链:当访问对象属性时,如果该对象内部不存在这个属性,就会向指向的那个对象里找(prototype相当于父对象))
  26. // prototype:函数所独有的,原型对象.

总结

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

批改状态:合格

老师批语:箭头函数是一个重要的特色, 一定要熟悉它
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学