如何让JavaScript函数将传入对象作为作用域直接访问其属性？

当然可以实现！下面给你几种实用的方案，从推荐到不推荐排序，帮你搞定这个需求：

1. ES6解构赋值（最推荐） #

这是现在前端社区最常用的做法，清晰、可控，还不会污染作用域。直接把options里需要的属性解构到函数内部的局部变量：

var opts = {hello: "it's me", imusthavetried: "a thousand times"};

function myFunction(options) {
  // 解构你需要的属性，想解构多少写多少
  const { hello, imusthavetried } = options;
  
  // 现在直接用变量名就行啦
  console.log(hello); // 输出: "it's me"
  console.log(imusthavetried); // 输出: "a thousand times"
}

myFunction(opts);

如果你需要所有属性，也可以用const { ...allProps } = options把整个对象展开，但还是建议按需解构，避免不必要的变量声明。

2. with语句（不推荐使用） #

你提到的“自动将options作为函数作用域”，早期JS里有个with语句可以做到，但它的问题很多，现在已经不建议使用了：

var opts = {hello: "it's me", imusthavetried: "a thousand times"};

function myFunction(options) {
  with(options) {
    // 这里可以直接用options的属性名
    console.log(hello);
    console.log(imusthavetried);
  }
}

myFunction(opts);

⚠️ 注意：

• with在ES5严格模式下会被禁用，现代项目基本都用严格模式
• 它会导致JS引擎无法优化代码，影响性能
• 如果函数内部有和options属性同名的变量，会出现优先级冲突，排查bug很麻烦

3. 手动遍历属性挂载到作用域（按需使用） #

如果你一定要手动遍历options的属性并挂载到作用域，可以通过遍历对象属性，把它们绑定到函数的this或者局部作用域（但局部作用域没法动态创建变量，所以用this更可行）：

var opts = {hello: "it's me", imusthavetried: "a thousand times"};

function myFunction(options) {
  // 遍历options的可枚举自有属性
  for (const key in options) {
    if (options.hasOwnProperty(key)) {
      this[key] = options[key];
    }
  }
  
  console.log(this.hello); // 输出: "it's me"
}

// 调用时绑定一个空对象作为this，避免污染全局作用域
myFunction.call({}, opts);

这种方法的缺点是需要处理this的指向问题，而且如果options里的属性名和函数内部变量冲突，会直接覆盖，风险较高，所以还是优先考虑解构赋值。

内容的提问来源于stack exchange，提问作者Ben Gubler