Computer >> Máy Tính >  >> Lập trình >> Javascript

Giải thích các Nguyên mẫu gốc trong JavaScript.

Thuộc tính nguyên mẫu là phần cốt lõi của javaScript vì JavaScript là một ngôn ngữ dựa trên nguyên mẫu. Nguyên mẫu được sử dụng để triển khai kế thừa trong JavaScript. Tất cả các đối tượng gốc được xây dựng và tùy chỉnh đều có thuộc tính nguyên mẫu có thể được sử dụng để mở rộng chức năng của chúng bằng cách thêm các thuộc tính và phương thức mới vào chúng. Chỉ có thể chỉnh sửa các nguyên mẫu gốc hoặc có thể thêm các nguyên mẫu mới vào chúng nhưng không thể xóa chúng.

Sau đây là mã cho các nguyên mẫu gốc trong JavaScript -

Ví dụ

<!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,.sample {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
   .sample {
      color: red;
   }
</style>
</head>
<body>
<h1>Native Prototypes in JavaScript</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to convert the above string to alternate case using prototype
</h3>
<script>
   let resEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   let BtnEle = document.querySelector(".Btn");
   String.prototype.alternateCase = function () {
      let newString = "";
      for (let i = 0; i < this.length; i++) {
         if (i % 2 == 0) {
            newString += this[i].toUpperCase();
         }
         else {
            newString += this[i].toLowerCase();
         }
      }
      return newString;
   };
   let a = "HELLO WORLD";
   sampleEle.innerHTML += a;
   BtnEle.addEventListener("click", () => {
      resEle.innerHTML += a.alternateCase();
   });
</script>
</body>
</html>

Đầu ra

Đoạn mã trên sẽ tạo ra kết quả sau -

Giải thích các Nguyên mẫu gốc trong JavaScript.

Khi nhấp vào nút 'BẤM VÀO ĐÂY' -

Giải thích các Nguyên mẫu gốc trong JavaScript.