学习ES2015遇语法问题：Dog对象动态方法定义报错求助

嘿，刚接触ES6（也就是你说的ES2015）的时候踩这些小坑太正常了！我帮你拆解下问题出在哪，再给你修正后的代码：

问题1：计算属性名的模板字符串用错了引号 #

你写的['${loud}Bark']用了单引号，这会让JS把它当成字面量字符串，不会解析里面的${loud}变量，所以你的dog对象里实际的属性名是${loud}Bark，而不是你想要的loudBark——这就是调用dog.loudBark提示不是函数的核心原因！

模板字符串必须用**反引号（`）**包裹，才能让JS解析里面的变量。

问题2：loudBark方法里的函数调用错误 #

this.bark.toUpperCase()这行里，this.bark是函数本身，你需要先调用它拿到返回值，再转成大写，也就是要改成this.bark().toUpperCase()。

另外，ES2015里对象的方法也可以用简写语法，不用写function () {}，直接写() {}就行，更简洁。

修正后的完整代码 #

// 全局变量name和loud
const name = 'Cody';
const loud = 'loud';

// 全局作用域的dog对象，完全符合你的要求和ES2015简写语法
const dog = {
  // 方法简写
  bark() {
    return 'ruff ruff!';
  },
  // 属性简写：和全局变量name同名，直接写变量名即可
  name,
  // 计算属性名：用反引号包裹模板字符串，解析loud变量生成loudBark
  [`${loud}Bark`]() {
    // 先调用bark方法拿到返回值，再转大写
    return this.bark().toUpperCase();
  },
};

现在测试一下：

• dog.name会返回'Cody'
• dog.bark()返回'ruff ruff!'
• dog.loudBark()返回'RUFF RUFF!'，完全符合预期～

额外补充ES2015的几个语法点（帮你巩固） #

• 属性简写：当对象属性名和变量名完全一致时，可以省略key: value的写法，直接写变量名
• 方法简写：对象中的方法可以直接写methodName() {}，替代旧写法methodName: function() {}
• 计算属性名：用[表达式]来动态生成属性名，模板字符串是常用的表达式之一，记得用反引号包裹才能解析变量

内容的提问来源于stack exchange，提问作者Alex Dunne