5.对象扩展:简洁写法.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. var name = '大侠';
  12. var age = 18;
  13. // 希望 obj对象具有name和age属性 对应值 为name变量以及age变量的值
  14. // es5之前
  15. var obj1 = {
  16. name: name, // 重复出现 name
  17. age: age, // 重复出现 age
  18. }; // {name: '大侠', age: 18}
  19. //! ES6 上面写法就可以用 短语法来写
  20. var obj2 = {
  21. name,
  22. age,
  23. }; // {name: '大侠', age: 18}
  24. //! ES6 方法的添加也有短语法
  25. // ES5 之前
  26. var obj3 = {
  27. hi: function () {
  28. console.log('obj3:hi');
  29. },
  30. };
  31. // ES6 短语法
  32. var obj4 = {
  33. hi() {
  34. console.log('obj4:hi');
  35. },
  36. };
  37. obj3.hi();
  38. obj4.hi();
  39. // 如果属性简洁写法中 不存在该变量 就会报错 sex is not defined
  40. var obj5 = {
  41. sex,
  42. };
  43. // 给obj5 添加 sex属性,对应属性值 为 作用域中sex变量的值
  44. // 由于 作用域中没有定义sex变量,因此就报错 ReferrenceError:sex is not defined
  45. //
  46. </script>
  47. </body>
  48. </html>