当前位置：首页 > JavaScript

js 级联的实现

2026-02-03 05:54:53JavaScript

级联的实现方式

在 JavaScript 中，级联（Cascading）通常指通过链式调用方法或属性来实现连续操作。以下是几种常见的实现方式：

方法链式调用

通过在每个方法中返回 this 实现链式调用：

js 级联的实现

class CascadeExample {
  setName(name) {
    this.name = name;
    return this;
  }

  setAge(age) {
    this.age = age;
    return this;
  }

  logInfo() {
    console.log(`Name: ${this.name}, Age: ${this.age}`);
    return this;
  }
}

const example = new CascadeExample();
example.setName("John").setAge(25).logInfo();

使用函数式编程

通过高阶函数实现级联效果：

js 级联的实现

const cascade = (initialValue) => {
  let value = initialValue;
  const wrapper = {
    add: (x) => {
      value += x;
      return wrapper;
    },
    multiply: (x) => {
      value *= x;
      return wrapper;
    },
    getValue: () => value
  };
  return wrapper;
};

const result = cascade(5).add(3).multiply(2).getValue();
console.log(result); // 16

DOM 操作级联

在 DOM 操作中实现级联样式修改：

function $(selector) {
  return {
    element: document.querySelector(selector),
    css: function(prop, value) {
      this.element.style[prop] = value;
      return this;
    },
    hide: function() {
      this.element.style.display = 'none';
      return this;
    },
    show: function() {
      this.element.style.display = '';
      return this;
    }
  };
}

$('#myElement').css('color', 'red').hide();

Promise 链式调用

利用 Promise 的链式特性实现异步级联：

function fetchData(url) {
  return fetch(url)
    .then(response => response.json())
    .then(data => {
      console.log(data);
      return data;
    })
    .catch(error => {
      console.error(error);
    });
}