普通函数与箭头函数

喜欢ヅ旅行 2021-12-17 09:33 343阅读 0赞

const shape = {
      radius: 10,
      diameter() {
        return this.radius * 2;
      },
      perimeter: () => 2 * Math.PI * this.radius
    };
    
    shape.diameter();
    shape.perimeter();

*  A: `20` and `62.83185307179586`
 *  B: `20` and `NaN`
 *  C: `20` and `63`
 *  D: `NaN` and `63`

#### 答案: B ####

请注意，`diameter`是普通函数，而`perimeter`是箭头函数。

对于箭头函数，`this`关键字指向是它所在上下文（定义时的位置）的环境，与普通函数不同！ 这意味着当我们调用`perimeter`时，它不是指向`shape`对象，而是指其定义时的环境（window）。没有值`radius`属性，返回`undefined`。

练习

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5   <meta charset="UTF-8">
     6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8   <title></title>
     9 </head>
    10 
    11 <body>
    12 <div id="div">2233</div>
    13 <ul>
    14   <li>
    15     知识点一：
    16     Math.PI 表示一个圆的周长与直径的比例，约为3.14159
    17     Math.PI = π≈3.14159
    18   </li>
    19   <li>
    20     知识点二：
    21     js里面的换行 \n
    22   </li>
    23   <li>
    24     知识点三：
    25     \n换行在document.write中不起作用
    26   </li>
    27   <li>
    28     知识点四：
    29       js里innerText用法是 = 赋值，而不是innerText()
    30   </li>
    31   <li>
    32     知识点五：
    33       document.getElementById与document.write输出顺序的不同
    34   </li>
    35 </ul>
    36 </body>
    37 
    38 </html>
    39 <script type="text/javascript">
    40   const shape = {
    41     radius: 10,
    42     a(){
    43       return this.radius * 2
    44     },
    45     b: () => 2 * Math.PI * this.radius
    46   }
    47   let result = `方法a的结果是：${shape.a()}; \n 方法b的结果是：${shape.b()}`
    48   document.write(`document.write输出结果：${result}`)
    49   document.getElementById('div').innerText = `document.getElementById输出结果：\n ${result}`
    50 </script>

index.html

转载于:https://www.cnblogs.com/wang715100018066/p/11081872.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211217/c7631d63dca7491397523cbaff34a7dc.png