重寫 JavaScript 中的函式

Kailash Vaviya 2023年10月12日
  1. 重寫 JavaScript 中的自定義函式
  2. 重寫 JavaScript 中的內建函式
  3. 在 JavaScript 中嘗試過載函式
  4. 在繼承中使用 super 關鍵字返回上一個函式
重寫 JavaScript 中的函式

在本教程文章中,我們將介紹如何在 JavaScript 中重寫函式。我們還將介紹當我們過載函式或將其與繼承一起使用時 JavaScript 直譯器的行為方式。

JavaScript 不支援過載。但它允許重寫函式。在宣告兩個具有相同名稱和引數的函式的情況下,JavaScript 在解釋時會考慮最新的函式。這是在 JavaScript 中重寫函式的方法。

重寫 JavaScript 中的自定義函式

我們將建立兩個具有相同名稱 Emp_name 的自定義函式,以使用不同的 alert() 訊息顯示員工姓名。

沒有重寫功能的示例程式碼:

function Emp_name(e) {
  return 'Hello, ' + e + '! This is the default function\'s message.';
}
alert(Emp_name('Harry'));

具有重寫功能的示例程式碼:

function Emp_name(e) {
  return 'Hello, ' + e + '! This is the default function\'s message.';
}
alert(Emp_name('Harry'));

function Emp_name(e){
    return "Hello, " + e + "! This is overriden function's message.";
}
alert(Emp_name("Harry"));

重寫 JavaScript 中的內建函式

JavaScript 還允許以相同的方式重寫內建函式。當我們更改與預定義函式同名的函式的程式碼塊時,它會重寫預設函式並將其程式碼更改為新函式。我們將使用 Date() 函式並重寫它。預設情況下,Date() 函式顯示日期、日期和本地時間。我們將重寫它以顯示 alert() 訊息。

示例程式碼:

var d = new Date();
document.write(d);

function Date() {
  return 'This is the overriden function.';
}
alert(Date());

在 JavaScript 中嘗試過載函式

JavaScript 不允許過載函式。相反,它將重寫該函式。我們將建立兩個名為 sum 的函式來新增不同數量的引數。

function sum(i, j, k) {
  return i + j + k;
}

function sum(i, j) {
  return i + j;
}

alert('Sum of i+j+k is: ' + sum(4, 5, 8));
alert('Sum of i+j is: ' + sum(4, 5));

輸出將僅顯示兩個函式的前兩個引數的新增。這是因為不允許函式過載。因此,直譯器將考慮最新的函式和它定義的引數。所有附加引數都將被忽略。

在繼承中使用 super 關鍵字返回上一個函式

一旦我們重寫它,恢復前一個函式的唯一方法是使用 super 關鍵字。我們將建立兩個具有相同名稱和引數的函式,一個在父類中,一個在子類中。我們將使用 super 關鍵字來訪問父類函式,即使在重寫它之後也是如此。

class Parent {
  msg() {
    document.write('This is parent class msg.<br>');
  }
}
class Child extends Parent {
  msg() {
    super.msg();
    document.write('This is child class msg.');
  }
}
let p = new Parent();
let c = new Child();
p.msg();
c.msg();
作者: Kailash Vaviya
Kailash Vaviya avatar Kailash Vaviya avatar

Kailash Vaviya is a freelance writer who started writing in 2019 and has never stopped since then as he fell in love with it. He has a soft corner for technology and likes to read, learn, and write about it. His content is focused on providing information to help build a brand presence and gain engagement.

LinkedIn

相關文章 - JavaScript Function