Интервьюер Netease: Пожалуйста, реализуйте перегрузку JS? Но не перегружайте ТС!

внешний интерфейс JavaScript опрос
Интервьюер Netease: Пожалуйста, реализуйте перегрузку JS? Но не перегружайте ТС!

предисловие

Всем привет, я Линь Сансинь,Расскажите о самых сложных вопросах знаний самыми простыми и понятными словамимой девиз,Основа является предпосылкой передовыхЭто мое первоначальное намерение. Сегодня я задам вам вопрос, который является вопросом интервью Netease.

  • Одноклассник: "Как реализовать перегрузку JS?"
  • Я: «Есть ли у JS перегрузки? Разве не только у TS?»
  • Одноклассник: «Да, это вопрос интервью от NetEase».
  • Я: «Хорошо, давай подумаем!»

image.png

что перегружает

первый раз я увидел重载Это слово еще выучили раньшеJavaЯ всегда чувствовал, чтоJavaScriptне перегружается до тех пор, покаTypeScript, поэтому я всегда чувствую, чтоJavaScriptбез перегрузок,TypeScriptДа, но теперь похоже, что я был неправ.

Я понимаю перегрузку: одна и та же функция, разное количество параметров, выполнение другого кода, например:

/*
* 重载
*/
function fn(name) {
  console.log(`我是${name}`)
}

function fn(name, age) {
  console.log(`我是${name},今年${age}岁`)
}

function fn(name, age, sport) {
  console.log(`我是${name},今年${age}岁,喜欢运动是${sport}`)
}

/*
* 理想结果
*/
fn('林三心') // 我是林三心
fn('林三心', 18) // 我是林三心，今年18岁
fn('林三心', 18, '打篮球') // 我是林三心，今年18岁，喜欢运动是打篮球

но прямоJavaScriptТак писать точно нельзя. Давайте посмотрим на фактические результаты выполнения приведенного выше кода. Вы можете видеть, что последнийfnОпределение переопределяет первые два, поэтому оно не реализовано.重载Эффект

我是林三心,今年undefined岁,喜欢运动是undefined
我是林三心,今年18岁,喜欢运动是undefined
我是林三心,今年18岁,喜欢运动是打篮球

мой подход

На самом деле, чтобы достичь идеала重载Эффект, у меня еще есть способ, я могу просто написатьfnфункции, и судить в этой функцииargumentsДлину массива-подобного, выполняющего разные коды, можно сделать重载Эффект

function fn() {
  switch (arguments.length) {
    case 1:
      var [name] = arguments
      console.log(`我是${name}`)
      break;
    case 2:
      var [name, age] = arguments
      console.log(`我是${name},今年${age}岁`)
      break;
    case 3:
      var [name, age, sport] = arguments
      console.log(`我是${name},今年${age}岁,喜欢运动是${sport}`)
      break;
  }
}

/*
* 实现效果
*/
fn('林三心') // 我是林三心
fn('林三心', 18) // 我是林三心，今年18岁
fn('林三心', 18, '打篮球') // 我是林三心，今年18岁，喜欢运动是打篮球

Но одноклассник сказал, что интервьюер NetEase, похоже, думал, что это можно реализовать вот так, но если бы был лучший способ реализовать это, я был ошеломлен.

высококлассная практика

image.png

После того, как я поискал информацию в Интернете, я нашел относительно высококлассный метод, который можно использовать闭包реализовать重载Эффект. Этот метод полностью используется в «Секретах ниндзя JavaScript», написанных Джоном Резигом, отцом JQuery.闭包Особенности!

function addMethod(object, name, fn) {
  var old = object[name]; //把前一次添加的方法存在一个临时变量old里面
  object[name] = function () { // 重写了object[name]的方法
    // 如果调用object[name]方法时，传入的参数个数跟预期的一致，则直接调用
    if (fn.length === arguments.length) {
      return fn.apply(this, arguments);
      // 否则，判断old是否是函数，如果是，就调用old
    } else if (typeof old === "function") {
      return old.apply(this, arguments);
    }
  }
}

addMethod(window, 'fn', (name) => console.log(`我是${name}`))
addMethod(window, 'fn', (name, age) => console.log(`我是${name},今年${age}岁`))
addMethod(window, 'fn', (name, age, sport) => console.log(`我是${name},今年${age}岁,喜欢运动是${sport}`))

/*
* 实现效果
*/

window.fn('林三心') // 我是林三心
window.fn('林三心', 18) // 我是林三心，今年18岁
window.fn('林三心', 18, '打篮球') // 我是林三心，今年18岁，喜欢运动是打篮球

использованная литература

Эпилог

Если вы считаете, что эта статья вам немного поможет, поставьте лайк и поддержите Линь Сансиня, ха-ха. Или присоединяйтесь к моей группе, ха-ха, давайте ловить рыбу и учиться вместе: meron857287645

Категории