Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 函数/闭包/类
Blogger Information
Blog 55
fans 3
comment 0
visits 54660
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
函数/闭包/类
王佳祥
Original
637 people have browsed it

函数/闭包/类

1.函数默认值

  1.      //js原生函数没有默认值
  2.       function delay(timeout, callback) {
  3.         timeout = typeof timeout !== undefined ? timeout : 3000;
  4.         callback = typeof callback !== undefined ? callback : function () {};
  5.         setTimeout(callback, timeout);
  6.       }
  7.       delay();
  9.       //es6,可以给函数传递默认参数
  10.       function delay(timeout = 3000, callback = function () {}) {
  11.         setTimeout(callback, timeout);
  12.       }
  13.       delay();

2.传统函数表达式/回调的缺点与解决方案

  1.       let user = {
  2.         //属性
  3.         name: "peter",
  4.         //方法
  5.         getName: function () {
  6.           //将当前this放到一个临时变量中保存起来
  7.           let that = this;
  8.           console.log(that);
  9.           setTimeout(function () {
  10.             //回调函数默认作用域是全局
  11.             console.log(this);
  12.             console.log(that);
  13.             console.log("My name is ", that.name);
  14.           }, 1000);
  15.         },
  16.       };
  17.       user.getName();

3.箭头函数的小案例

  1.       //解决了函数表达式作用域的指向问题
  2.       let user = {
  3.         //属性
  4.         name: "peter",
  5.         //方法
  6.         getName: function () {
  7.           setTimeout(() => {
  8.             //回调函数默认作用域是全局
  9.             console.log(this);
  10.             console.log("My name is ", this.name);
  11.           }, 1000);
  12.         },
  13.       };
  14.       user.getName();
  15.       //箭头函数主要是替代之前的函数表达式
  16.       //箭头函数没有自己的this,支持词法作用域/块级作用域

四、箭头函数基本语法

  1.       //1.无参数
  2.       let f1 = function () {
  3.         console.log("无参数F1()");
  4.       };
  5.       f1();
  6.       //箭头函数
  8.       f1 = () => {
  9.         console.log("箭头函数——>F1()");
  10.       };
  11.       f1();
  12.       //只有一行代码{}可以省略
  13.       f1 = () => console.log("箭头函数——>F2()");
  14.       f1();
  15.       //懒得调用的话可以写成立即执行函数
  16.       (f1 = () => console.log("箭头函数——>F3()"))();
  17.       console.log("------------------------");
  18.       //2.单个参数
  19.       let f2 = function (item) {
  20.         console.log(`f1(${item})`);
  21.       };
  22.       f2("item");
  23.       //箭头函数
  24.       f2 = (item) => console.log(`箭头函数f2(${item})`);
  25.       f2("item");
  26.       (f2 = (item) => console.log(`箭头函数f2(${item})`))("item2");
  27.       //简化item可以省略()
  28.       //3.多个参数
  29.       let f3 = function (...items) {
  30.         console.log("f3()", items);
  31.       };
  32.       f3(1, 2, 3, 4);
  33.       //箭头函数
  34.       //有多条语句的话{}不能省略
  35.       f3 = (...items) => {
  36.         console.log(this);
  37.         console.log("箭头函数->f3()", items);
  38.       };
  39.       f3(5, 6, 7, 8);

五、…rest/spread

  1.       //...rest(剩余参数)，将多个参数归并到一个数组中,用在函数的参数列表中
  2.       let sum = (a, b) => a + b;
  3.       console.log(sum(5, 6));
  4.       //累加
  5.       sum = (...arr) => arr.reduce((prev, next) => prev + next, 0);
  6.       console.log(sum(4, 8, 3, 6));
  7.       //遍历
  8.       let f = (...items) => items.map((item) => console.log(item));
  9.       f("apple", "pear", "orange");
  10.       //2.  ...spread(扩展参数)，从一个集合中解析出一个个独立的元素,用在函数的调用的实际参数列表中
  11.       f = (a, b, c) => console.log(a + b + c);
  12.       f(3, 4, 5);
  13.       f(...[3, 4, 5]);
  14.       //混合在一起
  15.       f = (a, ...items) => console.log(a, items);
  16.       f(4, 5, 6, 7);
  17.       f(...[4, 5, 6], 7);

六、对象字面量的扩展

  1.       //1.传统：对象字面量的声明
  2.       let createUser = (id, name, email) => ({
  3.         id: id,
  4.         name: name,
  5.         email: email,
  6.       });
  7.       let user = createUser(1, "admin", "admin@qq.com");
  8.       console.log(user);
  9.       //当对象中的属性与属性值同名时可省去变量值
  10.       createUser = (id, name, email) => ({ id, name, email });
  11.       user = createUser(2, "wang", "wang@qq.com");
  12.       console.dir(user);
  14.       //2.方法简化
  15.       let site = {
  16.         siteName: "php中文网",
  17.         getSite: function () {
  18.           return this.siteName;
  19.         },
  20.       };
  21.       console.log(site);
  22.       //es6方法简化
  23.       let prop = "siteName";
  24.       site = {
  25.         prop: "php中文网",
  26.         //：function去掉
  27.         getSite() {
  28.           return this.siteName;
  29.         },
  30.       };
  31.       console.log(site);
  32.       let prefix = "user-";
  33.       user = {
  34.         [prefix + "name"]: "Trump",
  35.         [`${prefix}email`]: "trump@qq.com",
  36.       };
  37.       console.log(user);

七、闭包原理

  1.       //mdn:闭包是可以访问自由变量的函数
  2.       function foo(a) {
  3.         //函数中有二类变量是自己的
  4.         //1.函数参数
  5.         //2.私有变量
  6.         //只要不是a,b之外的，都是自由变量
  7.         let b = 10;
  8.         console.log(a, b);
  9.         console.log(c);
  10.       }
  11.       console.log(foo());
  12.       //从技术角度看，任何一个函数都是闭包
  13.       //实际开发中，闭包需要满足两个条件
  14.       //1.即使出啊关键它的上下文已经销毁，它仍然存在（例如，内部函数从父函数中返回）
  15.       //2.在代码中引用了自由变量
  16.       //简化一下
  17.       //1.函数中必须要有一个子函数，且返回这个函数
  18.       //2.在这个子函数中，引用了父函数中的变量

八、闭包的应用场景

  1.       //1.访问函数中的私有变量
  2.       let foo = () => {
  3.         //私有变量
  4.         let username = "peter";
  5.         //子函数(闭包),当前的username相对于闭包(子函数get)来说是自由变量
  6.         let get = () => username;
  7.         return get;
  8.       };
  9.       let get = foo();
  10.       console.log(get);
  11.       console.log(get());
  12.       //2.快速创建多个全局可用的API
  13.       //要求这个脚本返回四个接口api
  14.       let set, inc, dec, print;
  15.       let manager = () => {
  16.         let num = 10;
  17.         //设置器
  18.         set = (val) => (num = val);
  19.         //递增器
  20.         inc = () => num++;
  21.         //递减器
  22.         dec = () => num--;
  23.         //打印
  24.         print = () => console.log(num);
  25.       };
  26.       //初始化
  27.       manager(10);
  28.       print();
  29.       inc();
  30.       print();
  31.       set(20);
  32.       print();
  33.       dec();
  34.       print();

九、es6中的类

  1.       //原生js没有类，通过"构造函数"模拟类
  2.       function Person(name) {
  3.         this.name = name;
  4.       }
  5.       //公共方法放在函数的原型对象上
  6.       Person.prototype.sayName = function () {
  7.         return this.name;
  8.       };
  9.       let person = new Person("孙悟空");
  10.       let person1 = new Person("齐天大圣");
  11.       console.log(person);
  12.       console.log(person1);
  14.       //es6
  15.       class PersonClass {
  16.         //构造方法
  17.         constructor(name) {
  18.           this.name = name;
  19.         }
  20.         //原型方法
  21.         sayName() {
  22.           return this.name;
  23.         }
  24.       }
  25.       person = new PersonClass("灭绝师太");
  26.       console.log(person.sayName());
  28.       //函数
  29.       function fn(a, b) {}
  30.       console.dir(fn);
  31.       //prototype:原型属性:当函数当成非构造函数调用时，没有用
  32.       //__proto__:原型链属性，因为函数也是对象
  33.       //任何对象都有一个__proto__
  34.       console.log({});
  35.       console.log({}.toString());
  36.       //__proto__:原型链属性
  37.       //构造函数的原型属性 prototype,上面是当前构造函数的所有实例所共享的属性和方法
  38.       function A() {
  39.         //以下是伪代码，用于辅助理解
  40.         //1.生成新对象
  41.         /* this = New A; */
  42.         //A.prototype上的内容，是每个实例/对象上都应该有的公共成员
  43.         //2.从A.prototype上复制所有属性和方法到这个新对象上this
  44.         //this.toString = A.prototype.toString;
  45.         //this.valueof = A.prototype.valueof;
  46.         //.....
  47.         //3.
  48.         //return this
  49.       }
  50.       console.dir(A);
  51.       let a = new A();
  52.       console.log(a);
  53.       //函数有两个重要的属性
  54.       //原型属性:prototype,做为构造函数的时候才会用到，当该属性的指针指向新对象的__proto__
  55.       //原型链属性: __proto__,因为任何一个对象都有这个属性，指向自己的公共方法函数也是对象，当然也有这个属性

十、学习总结

1.函数默认值

  • js原生函数没有默认值

  • es6,可以给函数传递默认参数

2.传统函数表达式/回调的缺点与解决方案

  • 回调函数默认作用域是全局

  • 当this指向全局时，可以把this放到一个临时变量中保存起来

3.箭头函数的小案例

  • 箭头函数解决了函数表达式作用域的指向问题

  • 箭头函数主要是替代之前的函数表达式

  • 箭头函数没有自己的this,支持词法作用域/块级作用域

4.箭头函数基本语法

  1. f1 = () => {
  2.         console.log("箭头函数——>F1()");
  3.       };
  4. f1();

  • 只有一行代码{}可以省略

  • 单个参数的箭头函数

  1. f2 = (item) => console.log(`箭头函数f2(${item})`);
  2. f2("item");
  • 多个参数的箭头函数
  1. let f3 = function (...items) {
  2.         console.log("f3()", items);
  3.       };
  4. f3(1, 2, 3, 4);
  • 有多个参数的箭头函数{}不能省略

五、…rest/spread

  • …rest(剩余参数)，将多个参数归并到一个数组中,用在函数的参数列表中

  • …spread(扩展参数)，从一个集合中解析出一个个独立的元素,用在函数的调用的实际参数列表中

六、对象字面量的扩展

  • 当对象中的属性与属性值同名时可省去变量值

  • es6方法简化，可以去掉:function改为()

  1. let prop = "siteName";
  2.       site = {
  3.         prop: "php中文网",
  4.         //：function去掉
  5.         getSite() {
  6.           return this.siteName;
  7.         },
  8.       };
  9. console.log(site);

七、闭包原理

  • 闭包是可以访问自由变量的函数

  • 函数中有二类变量是自己的:1.函数参数2.私有变量;只要不是a,b之外的，都是自由变量

  • 函数中必须要有一个子函数，且返回这个函数

  • 在这个子函数中，引用了父函数中的变量

八、闭包的应用场景

  • 访问函数中的私有变量
  1. let foo = () => {
  2.         //私有变量
  3.         let username = "peter";
  4.         //子函数(闭包),当前的username相对于闭包(子函数get)来说是自由变量
  5.         let get = () => username;
  6.         return get;
  7.       };
  8. let get = foo();
  9. console.log(get);
  10. console.log(get());
  • 快速创建多个全局可用的API
  1. let set, inc, dec, print;
  2.       let manager = () => {
  3.         let num = 10;
  4.         //设置器
  5.         set = (val) => (num = val);
  6.         //递增器
  7.         inc = () => num++;
  8.         //递减器
  9.         dec = () => num--;
  10.         //打印
  11.         print = () => console.log(num);
  12.       };
  13. //初始化
  14. manager(10);
  15. print();
  16. inc();
  17. print();

九、es6中的类

  • 原生js没有类，通过”构造函数”模拟类

  • 公共方法放在函数的原型对象

  • 函数对象都有一个子对象 prototype对象

  • prototype表示该函数的原型，也表示一个类的成员的集合

  • es6

  1. class PersonClass {
  2.         //构造方法
  3.         constructor(name) {
  4.           this.name = name;
  5.         }
  6.         //原型方法
  7.         sayName() {
  8.           return this.name;
  9.         }
  10.       }
  11. person = new PersonClass("灭绝师太");
  12. console.log(person.sayName());

  • js在创建对象的时候，都有一个叫做 __proto__的内置属性，用于指向创建它的函数对象的原型对象 prototype

  • 原型链的基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法

  • 每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针（ constructor），而实例则包含一个指向原型对象的内部指针（ __proto__）

  • 函数有两个重要的属性:

    1. 原型属性:prototype,做为构造函数的时候才会用到，当该属性的指针指向新对象的__proto__
    2. 原型链属性: __proto__,因为任何一个对象都有这个属性，指向自己的公共方法函数也是对象，当然也有这个属性
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：非常的规范, 希望坚持
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post