JavaScript函数进阶（三）

函数调用

1.构成函数主体的JavaScript代码在定义之时并不会执行，只有调用该函数时，它们才会执行。

2.有4种方式来调用JavaScript函数:
①作为函数
②作为方法·作为构造函数
③通过它们的call()和apply()方法间接调用

3.方法调用
①—般情况下，与普通函数的使用方式一致。
·方法是属于某个特定对象才能调用的函数。

②方法调用和函数调用有一个重要的区别,即︰调用上下文。
·属性访问表达式由两部分组成∶一个对象(o)和属性名(m)。在像这样的方法调用表达式里，对象o成为调用上下文，函数体可以使用关键字this引用该对象。

  let calculator = {
      oper1: 10,
      oper2: 20,
      add: function () {
        this.result = this.oper1 + this.oper2;
      },
    };
    calculator.add();
    console.log(calculator.result);

③调用上下文
关键字this没有作用域的限制，嵌套的函数不会从调用它的函数中继承this

   let obj = {
      x: 10,
      fn: function () {
        this.x++;
        function ff() {
          console.log(this.x);
        }
        ff();
      },
    };
    obj.fn();
  

   let obj = {
      x: 10,
      fn: function () {
        this.x++;
        let self = this;
        function ff() {
          console.log(self.x);
        }
        ff();
      },
    };
    obj.fn();

④构造函数调用
·如果函数或方法调用之前带有关键字new，它就是构造函数调用。
·构造函数调用和普通的函数调用以及方法调用在实参处理、调用上下文和返回值方面都有不同。

·构造函数调用创建一个新的空对象，这个对象继承自构造函数的prototype属性。
·构造函数试图初始化这个新创建的对象，并将这个对象用做其调用上下文，因此构造函数可以使用this关键字来引用这个新创建的对象。

·构造函数通常不使用return关键字，它们通常初始化新对象，当构造函数的函数体执行完毕时，它会显式返回该对象。

  function Car(name) {
      this.name = name;
      return null;
    }

⑤间接调用
·使用函数对象的call()和aapply()方法可以间接调用函数。
·第一个参数指定调用上下文（函数内部的this)，第二个参数给函数传递参数。

let obj1 = {
    x: 100,
    y: 200,
    show: function (n = 1, m = 1) {
      return `(${this.x * n},${this.y * m})`;
    },
    concat: function () {
      let r = [this.x, this.y];
      for (let a of arguments) r.push(a);
      return r;
    },
  };

let obj2 = { x: 111, y: 222 };
let r1 = obj1.show.call(obj2);
let r2 = obj1.show.call(obj2, 10, 100);
console.log(r1, r2);
let r3 = obj1.concat.call(obj2, 11, 22, 33);
let r4 = obj1.concat.apply(obj2, [2, 3, 4, 5]);
console.log(r3, r4);

⑥回调函数
·被作为实参传入另一函数，并在该外部函数内被调用，用以来完成某些任务的函数，称为回调函数。

  let arr = [1, 22, 13, 4, 5];
arr.sort(function (a, b) {
  return a - b;
});
arr.sort((a, b) => b - a);

let data = {
    x: 10,
    y: 20,
    show: function (how) {
      how(this.x, this.y);
    },
  };
  data.show(function (a, b) {
    console.log(`(${a},${b})`);
  });
  data.show((a, b) => {
    console.log(`${a}->${b}`);
  });