JavaScript高级——函数与对象的补充

  // 定义对象并给对象添加属性和方法
  var obj = {};
  obj.name = "zgc";
  obj.bar = function () {};
  // console.log(obj);
  // 注意: 在 JS 中函数也属于对象的一种,所以可以给函数添加属性和方法
  function foo(a, b, c) {
    console.log(a, b, c);
  }
  var bar = function (m, n, ...args) {};
  function test(x, y = 0) {}
  // 1. 自定义属性
  foo.message = "Hello";
  console.log("访问foo的属性", foo.message); // Hello
  // 2. 默认函数对象中已经有两个自己的属性了
  // (1) name属性 (了解)
  console.log(foo.name, bar.name); // foo bar
  // 将多个函数放入数组中,可以以name区分
  var fns = [foo, bar];
  for (var fn of fns) {
    console.log(fn.name);
  }
  // (2) length属性, 参数个数的长度
  // 这个长度是指本来因该获取的参数的个数, 即形参的个数(因为函数在调用时参数可能多传或少传, 所以实参的个数未必等于形参的个数)
  // 剩余参数是不会算在length里面的, 赋默认值的参数也不会算在length里面
  console.log(foo.length, bar.length, test.length); // 3,2,1
  foo(1, 2); // 1 2 undefined
  foo(1, 2, 3, 4); // 1 2 3

  // 剩余参数（亦称 rest 参数） 用于获取函数的多余参数，这样就不要使用 arguments 对象了
  // 如果函数的最后一个形参是...为前缀的，且搭配的变量是一个数组，该变量将多余的参数放入数组中
  // 注意1: 和参数对象不同, 剩余参数只包含那些没有对应形参的实参, 而且是真实的数组，可直接使用所有数组方法
  // 注意2: 函数剩余参数之后不能再有其他参数（即 只能是最后一个参数），否则会报错
  // 注意3: 函数的 length 属性，不包括函数剩余参数
  function add(x, y, ...values) {
    let sum = 0;
    console.log(x, y); // 2,4
    console.log(values); // [6, 8]
    for (var val of values) {
      sum += val;
    }
    console.log(sum); // 14
  }
  add(2, 4, 6, 8);
  console.log(add.length); // 2

  // 纯函数，符合函数在相同的输入值时，需产生相同的输出
  function sum(a, b) {
    return a + b;
  }
  // 不是一个纯函数，因为在我们程序执行的过程中，变量num很可能会发生改变
  let num = 1;
  function add(x) {
    return x + num;
  }
  add(1);
  // 不是一个纯函数
  var address = "北京";
  function printInfo(info) {
    console.log(info.name); // 有输出数据
    info.age = 18; // 对参数进行修改
    address = info.address; // 修改全局变量
  }
  var obj = {
    name: "zgc",
    address: "上海",
  };
  printInfo(obj);
  // 在JavaScript中内置的API也存在有纯函数，我们拿Array对象中的方法来说
  // filter 过滤数组中的元素，它不对原数组进行操作是一个纯函数
  var names = ["张三", "李四", "王五", "赵六"];
  var newNames1 = names.filter((n) => n !== "张三");
  console.log(newNames1); // [ '李四', '王五', '赵六' ]
  console.log(names); // [ '张三', '李四', '王五', '赵六' ]
  // splice 截取数组的时候会对原数组进行操作，所以不是一个纯函数。
  var newNames2 = names.splice(2);
  console.log(newNames2); // [ '王五', '赵六' ]
  console.log(names); // [ '张三', '李四' ]

  // 普通函数
  function foo(x, y, z) {
    console.log(x + y + z);
  }
  foo(10, 20, 30); // 60
  // 柯里化函数
  function bar(x) {
    return function (y) {
      return function (z) {
        console.log(x + y + z);
      };
    };
  }
  bar(1)(2)(3); // 6
  // 柯里化箭头函数写法
  // const baz = (x) => {
  //   return (y) => {
  //     return (z) => {
  //       console.log(x + y + z);
  //     };
  //   };
  // };
  var baz = (x) => (y) => (z) => console.log(x + y + z);
  baz(1)(3)(5); // 9
  // 封装一个函数: 自动生成柯里化函数
  function currying(fn) {
    function curryFn(...args) {
      if (args.length >= fn.length) {
        // return fn(...args);
        return fn.apply(this, args);
      } else {
        return function (...newArgs) {
          // return curryFn(...args.concat(newArgs));
          return curryFn.apply(this, args.concat(newArgs));
        };
      }
    }
    return curryFn;
  }
  const curryFn1 = currying(foo);
  curryFn1(10, 20)(30); // 60
  curryFn1(10)(20)(30); // 60
  curryFn1(10).call("this", 20)(30); // 60

  // 要求: 需要将N个数字分别进行调用double方法乘以2，再调用square方法平方。
  var count = 10;
  // 普通情况下：
  function double(num) {
    return num * 2;
  }
  function square(num) {
    return num * num;
  }
  function add(num) {
    return num + 10;
  }
  var result = square(double(count));
  console.log("普通函数", result);
  // 组合函数情况下：
  function getNum(num) {
    return square(double(count));
  }
  var result = getNum(count);
  console.log("组合函数", result);
  // 封装通用性组合函数:
  function getComposeFn(...fns) {
    // 边界判断:
    // if (fns.length <= 0) return;
    // for (var fn of fns) {
    //   if (typeof fn !== "function") throw new Error("传入的参数必须为函数");
    // }
    return function (...args) {
      console.log(args);
      var result = fns[0].apply(this, args);
      for (var i = 1; i < fns.length; i++) {
        result = fns[i].apply(this, [result]);
      }
      return result;
    };
  }
  var composeFn = getComposeFn(double, square, add);
  const res = composeFn(10);
  console.log("res", res); // 410

  // 1. 在js文件下给整个文件开启"严格模式":
  "use strict";
  // 2. 给某个函数开启"严格模式":
  function foo() {
    "use strict";
  }
  // 注意: 严格模式要在文件或者函数的开头使用"use strict";来开启
  // 3. 如 class/module 默认是在严格模式运行的
  // 4. 常见的严格模式限制
  // (1) 无法意外创建全局变量
  // 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。
  // v = 1; // 报错，v未声明
  // for (i = 0; i < 2; i++) {
  //   // 报错，i未声明
  // }
  // (2) 禁止this关键字指向全局对象
  // 正常模式下，函数内部的this可能会指向全局对象，严格模式禁止这种用法，避免无意间创造全局变量。
  // 正常模式
  function f() {
    console.log(this === window);
  }
  f(); // true
  // 严格模式
  function f() {
    "use strict";
    console.log(this === undefined);
  }
  f(); // true
  // (3) 对象不能有重名的属性
  // 正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。
  var o = {
    p: 1,
    p: 2,
  }; // 语法错误
  // (4) 函数不能有重名的参数
  // 正常模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，这属于语法错误。
  function f(a, a, b) {
    // 语法错误
  }