解决 ES8 对象属性简写方案中的坑点-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 语言的不断发展，我们通过 ES6、ES7、ES8 等版本不断获取新的语法特性。其中 ES8 中引入的对象属性简写方案相比较之前的属性定义方式，实现起来更加简洁明了，代码可读性得到了很大提升。但是在实践过程中，我们可能会遇到一些坑点。本篇文章将介绍如何解决这些坑点。

对象属性简写

在 ES8 中，我们可以通过以下方式定义对象属性：

let a = 1;
let b = 2;
let c = {a, b}; // {a: 1, b: 2}

相比之前的定义方式：

let c = {a: a, b: b};

我们可以看到，使用对象属性简写可以使得代码更加简洁，易于阅读和维护。

坑点

属性名和变量名相同

在对象属性简写中，如果属性名和变量名相同，则可以省略属性名。例如：

let a = 1;
let c = {a}; // {a: 1}

但是，如果我们在定义对象时，属性名和变量名相同，那么就会出现问题：

let a = 1;
let c = {
  a,
  fn() {
    console.log(a); // undefined
  }
};

在上述代码中，我们定义了一个对象 c，其中有一个属性 a 和一个方法 fn。但是在方法中，我们无法访问到 a 的值，而是得到了 undefined。

出现这个问题的原因是，在定义对象时，属性名和变量名相同的时候，JS 引擎会认为我们传入的是一个值，而不是变量名，因此方法 fn 中的参数名 a 和对象 c 中的属性 a 并不是同一个变量。

要解决这个问题，我们需要使用参数解构。例如：

let a = 1;
let c = {
  a,
  fn({a}) {
    console.log(a); // 1
  }
};
c.fn(c);

在上述代码中，我们通过参数解构，将对象属性和方法中的参数名 a 绑定在了一起，这样在方法 fn 中就可以正确访问到对象属性 a 的值了。

访问父级作用域的变量

有时候我们需要在对象属性中访问父级作用域的变量。例如：

// javascriptcn.com 代码示例
let a = 1;
let fn = function() {
  let a = 2;
  return {
    a,
    fn1() {
      console.log(a);
    }
  };
};
let c = fn();
console.log(c.a);  // 2
c.fn1();           // 2

在上述代码中，我们定义了一个函数 fn，其中有一个变量 a 和一个对象 c。对象 c 中有一个属性 a 和一个方法 fn1。在方法 fn1 中，我们希望访问到变量 a，但是如果我们使用对象属性简写做法，会出现问题：

// javascriptcn.com 代码示例
let a = 1;
let fn = function() {
  let a = 2;
  return {
    a,        // 等同于 a: a
    fn1() {
      console.log(a);
    }
  };
};
let c = fn();
console.log(c.a);  // 2
c.fn1();           // 2

在上述代码中，我们使用对象属性简写将变量 a 赋值给了对象属性。但是在方法 fn1 中，我们无法访问变量 a。出现这个问题的原因是，在对象属性简写中，我们定义的属性名和变量名相同，如果变量名和属性名不同，则可以正常访问变量，例如：

// javascriptcn.com 代码示例
let a = 1;
let fn = function() {
  let b = 2;
  return {
    a: b,
    fn1() {
      console.log(b);
    }
  };
};
let c = fn();
console.log(c.a);  // 2
c.fn1();           // 2

如果我们希望在对象属性简写中访问到父级作用域的变量，可以使用参数解构和 bind 方法。例如：

// javascriptcn.com 代码示例
let a = 1;
let fn = function() {
  let a = 2;
  return {
    a,
    fn1: function() {
      console.log(this.a);
    }.bind({a})
  };
};
let c = fn();
console.log(c.a);  // 2
c.fn1();           // 2

在上述代码中，我们使用 bind 方法将对象 c 绑定在方法 fn1 中，这样就可以访问到父级作用域的变量 a 了。

总结

在对象属性简写中，我们需要注意属性名和变量名相同、访问父级作用域变量等一些问题。通过参数解构和 bind 方法，我们可以解决这些问题，写出更加简洁易读的代码。在编写 JavaScript 代码时，我们需要注意语法特性的细节和坑点，这对我们的代码质量和开发效率都有很大的提升。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6533457f7d4982a6eb6c6ecb