JavaScript的级联函数用法简单示例【链式调用】

JavaScript的级联函数用法简单示例【链式调用】

级联调用也叫做链式调用，是一种在调用同一个对象的多个方法时可以省略中间变量的写法。这种写法在JavaScript中非常常见，例如jQuery的链式调用，可以让我们在一个语句中同时执行多个方法。

基本概念

所谓级联调用，就是一连串调用同一个对象的方法。在链式调用中，每个方法都返回对象本身，使得下一个方法可以继续调用对象的方法，从而形成一条“链”。

在JavaScript中，任何对象都可以实现链式调用。例如：

var obj = {
    func1: function() {
        console.log('func1');
        return this;
    },
    func2: function() {
        console.log('func2');
        return this;
    }
};

obj.func1().func2(); // 输出func1和func2

这个例子中，我们创建了一个对象obj，其中包含两个方法：func1和func2。在这个对象中，每个方法都返回this，这个this指的是当前对象，因此我们可以把多个方法调用连起来，形成链式调用。

示例说明

为了更好地说明链式调用的用法，我们来写两个方法：adder和multiplier，用于对数字进行加法和乘法运算。这两个方法分别是互不影响的，它们没有返回值，但都返回了对象自身，因此可以用级联调用的方式调用。

示例1

var calculator = {
  sum: 0,
  adder: function(num) {
    this.sum += num;
    return this;
  },
  multiplier: function(num) {
    this.sum *= num;
    return this;
  }
};

var result = calculator.adder(5).multiplier(10).adder(20).multiplier(2).sum;
console.log(result); // 输出150

在这个例子中，我们首先创建了一个名为calculator的对象，它包括两个方法adder和multiplier，以及一个属性sum，用于记录计算结果。在这两个方法中，我们都使用了关键字this，它指向当前对象calculator。接下来，我们调用了adder和multiplier方法，并使用级联调用的方式把这两个方法连起来。最后，我们取出了计算结果，输出了150。

需要注意的是，在adder和multiplier方法中，都使用了关键字return this，它使得这两个方法返回了对象自身，从而实现了链式调用。

示例2

我们来看一个更复杂的示例，该例子创建了一个包含四个动画效果的对象，它们分别是：move、rotate、scale和fadeOut。通过使用链式调用的方式，我们可以轻松地实现复杂的动画效果。

var animation = {
  element: null,
  duration: 0,
  move: function(x, y) {
    console.log('move', x, y);
    return this;
  },
  rotate: function(angle) {
    console.log('rotate', angle);
    return this;
  },
  scale: function(scaleX, scaleY) {
    console.log('scale', scaleX, scaleY);
    return this;
  },
  fadeOut: function() {
    console.log('fadeOut');
    return this;
  }
};

function animate(selector, time) {
  animation.element = document.querySelector(selector);
  animation.duration = time;
  return animation;
}

animate('#myDiv', 500).move(100, 100).rotate(45).scale(2, 2).fadeOut();

在这个例子中，我们首先定义了一个animation对象，它包括了四个动画效果的方法，分别是move、rotate、scale和fadeOut。在这些方法中，我们可以实现各种动画效果，例如调用真实的动画库、设置CSS属性等等。在这个例子中，我们仅仅打印了一些日志，以便测试。

接着，我们定义了一个函数animate，它带有两个参数selector和time，这两个参数分别用于指定动画对象所作用的元素和动画效果的时间。在animate函数内部，我们先设置了animation对象的属性element和duration，然后返回animation对象本身。

最后，我们调用了animate函数，并把它的返回值传递给move、rotate、scale和fadeOut等方法，从而实现了对元素的移动、旋转、缩放和淡出效果。

虽然这个例子没有实现真实的动画效果，但是它展示了链式调用的强大能力，我们可以轻松地把多个方法连在一起，实现复杂的动画效果。