Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

อธิบายฟังก์ชันชวเลขใน JavaScript?


มีการใช้ฟังก์ชันลูกศรที่เรียกว่าฟังก์ชันชวเลขใน ES2015 และช่วยให้เราเขียนฟังก์ชันได้สั้นลง พวกเขาไม่ได้ผูกมัดกับสิ่งนี้และได้รับสิ่งนี้จากบริบทโดยรอบ

ต่อไปนี้เป็นรหัสที่แสดงฟังก์ชันชวเลขใน JavaScript -

ตัวอย่าง

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>Shorthand function in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to invoke arrow and normal function</h3>
<script>
   let resEle = document.querySelector(".result");
   let objYear, obj1Year;
   let obj = {
      name: "rohan",
      age: 20,
      birthday() {
         function birthYear() {
            objYear = new Date().getFullYear() - this.age;
         }
         birthYear();
      },
   };
   let obj1 = {
      name: "Shawn",
      age: 22,
      birthday() {
         let birthYear = () => {
            obj1Year = new Date().getFullYear() - this.age;
         };
         birthYear();
      },
   };
   document.querySelector(".Btn").addEventListener("click", () => {
      obj.birthday();
      obj1.birthday();
      resEle.innerHTML += " Without arrow function : Birth Year = " + objYear + " ";
      resEle.innerHTML += " With arrow function : Birth Year = " + obj1Year + " ";
   });
</script>
</body>
</html>

ผลลัพธ์

รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -

อธิบายฟังก์ชันชวเลขใน JavaScript?

เมื่อคลิกปุ่ม 'คลิกที่นี่' -

อธิบายฟังก์ชันชวเลขใน JavaScript?