如何创建带点语法的自定义JavaScript函数？

你要实现的web.ask("how to...")这种写法，本质是调用对象的方法——web是一个对象，ask是这个对象的函数属性（也就是方法）。下面是几种常用的实现方式：

1. 对象字面量（最简单的方式） #

直接定义一个包含方法的对象，适合不需要多个实例的场景：

// 定义web对象及它的方法
const web = {
  ask: function(question) {
    // 这里写方法的具体逻辑，比如打印提问、发起请求等
    console.log(`处理提问：${question}`);
  },
  // 还可以添加其他相关方法
  confirm: function(message) {
    return window.confirm(message);
  }
};

// 调用方法
web.ask("how to...");

2. 构造函数（适合创建多个实例） #

如果需要多个独立的web实例，可以用构造函数：

// 定义构造函数
function WebHelper() {
  // 给实例添加ask方法
  this.ask = function(question) {
    console.log(`收到提问：${question}`);
  };
}

// 创建实例
const web = new WebHelper();
// 调用方法
web.ask("how to...");

// 还可以创建另一个独立实例
const anotherWeb = new WebHelper();
anotherWeb.ask("another question");

3. ES6类（更规范的面向对象写法） #

用ES6的类语法，结构更清晰：

class Web {
  // 定义ask方法
  ask(question) {
    console.log(`处理提问内容：${question}`);
  }

  // 可扩展其他类方法
  search(keyword) {
    console.log(`执行搜索：${keyword}`);
  }
}

// 实例化类
const web = new Web();
web.ask("how to...");
web.search("javascript tips");

4. 模块化场景（前端工程化中常用） #

如果是在Vue、React等模块化项目里，可以把对象或类封装成模块导出：

// 在webUtils.js文件中导出
export const web = {
  ask(question) {
    console.log(`提问：${question}`);
  }
};

// 在需要使用的文件中导入
import { web } from './webUtils.js';
web.ask("how to...");

内容的提问来源于stack exchange，提问作者Zidan gaming 00