Красивые замыкания для реализации перегрузки функций в js

внешний интерфейс JavaScript jQuery
Красивые замыкания для реализации перегрузки функций в js

введение

Недавно при изучении js я увидел проблему перегрузки функций.Вначале я видел только код реализации.Посмотрев код и подумав над ним полчаса я наконец прояснил принцип его реализации и ощутил изобретательность его реализации.Восхищение, также после того, как я понял принцип, я отправился в Интернет для поиска, только чтобы узнать, что этот метод реализации является реализацией перегрузки функций автором jQuery Джоном Резигом в "JavaScript Ninja Cheats", дизайн очень умный, напишите это Вэнь, позвольте мне поделиться с вами

Что такое перегрузка функций

Проще говоря, перегрузка — это ситуация, когда функции или методы имеют одинаковое имя, но разные списки параметров.Такие функции или методы с одинаковым именем и разными параметрами называются перегруженными функциями или методами.

Сначала посмотрим на эффект

 function addMethod (obj, name, fn) {
        var old = obj[name];
        obj[name] = function () {
            if (fn.length === arguments.length) {
                return fn.apply(this, arguments)
            } else if (typeof old === 'function') {
                return old.apply(this, arguments)
            }
        }
    }

    var person = {userName: 'bear鲍的小小熊'}

    addMethod(person, 'show', function () {
        console.log(this.userName + '---->' + 'show1')
    })
    addMethod(person, 'show', function (str) {
        console.log(this.userName + '---->' + str)
    })
    addMethod(person, 'show', function (a, b) {
        console.log(this.userName + '---->' + (a + b))
    })
    person.show()  
    person.show('bkl')
    person.show(10, 20)

выходной результат

    //bear鲍的小小熊---->show1
    //bear鲍的小小熊---->bkl
    //bear鲍的小小熊---->30

Мы добавляем к объекту метод show.Это метод show, параметры которого каждый раз передаются разные, и его обработка тоже разная.

Для лучшего понимания позже, вот объяснение свойства fn.length, которое может быть незнакомо всем, сначала взгляните на следующий код

function fn(a,b,c) {}
fn.length // 3
function fn(a,b,c,d) {}
fn.length // 4

fn.legnth, это количество формальных параметров при задании функции fn Ну что ж, продолжим

Эта функция addMethod, говоря простым языком, предназначена для добавления метода fn с заданным именем к объекту (для удобства всех в дальнейшем тексте мы будем использовать show в этом примере для обозначения имени), он использует функцию замыкание, Через переменную old сохраняется переданная fn каждый раз Каждый раз, когда мы вызываем этот метод show, в зависимости от переданных параметров наш код может использовать old много раз, чтобы найти переданную ранее функцию fn.

Давайте проанализируем этот метод. Чтобы увидеть его более интуитивно, мы немного модифицируем предыдущую функцию addMethod. Фактически мы добавили console.log(), который может помочь нам понять процесс выполнения функции.

    function addMethod (obj, name, fn) {
        var old = obj[name];
        obj[name] = function () {
            console.log(1) //打印1
            if(fn.length === arguments.length){
                console.log(2) // 打印2
                return fn.apply(this,arguments);
            }else if(typeof old === 'function'){
                console.log(3) // 打印3
                return old.apply(this,arguments);
            }
        }
    }
    addMethod(person, 'show', function () {
        console.log(this.userName + '---->' + 'show1')
    })
    addMethod(person, 'show', function (str) {
        console.log(this.userName + '---->' + str)
    })
    addMethod(person, 'show', function (a, b) {
        console.log(this.userName + '---->' + (a + b))
    })

Далее рассмотрим метод person.show: при отсутствии параметров передается один параметр, при передаче двух параметров конкретный процесс выполнения функции,

  • person.show(10, 20)
1
2
bear鲍的小小熊---->30

Видно, что когда передаются два параметра, печатаются только один 1 и один 2, и выполняется соответствующая функция выполнения.На самом деле, fn в области видимости функции person.show в это время является следующей функцией

    function (a, b) {
        console.log(this.userName + '---->' + (a + b))
    }
  • person.show('bkl')
1
3
1
2
bear鲍的小小熊---->bkl

Когда параметр передается, результатом выполнения является 1 --> 3 --> 1 --> 2 --> обработанный результат В этом процессе, когда выполняется метод person.show, fn.length === 2, а параметр, который мы передаем, равен 1, функция будет выполняться до тех пор, пока

return old.apply(this,arguments);

Что такое старое в это время?Старое в это время на самом деле является методом person.show перед выполнением следующей функции

    addMethod(person, 'show', function (a, b) {
        console.log(this.userName + '---->' + (a + b))
    })

После выполнения функция fn в рамках функции person.show представляет собой следующий метод

    function (str) {
        console.log(this.userName + '---->' + str)
    }
  • person.show()
1
3
1
3
1
2
bear鲍的小小熊---->show1

То же самое верно и для приведенного выше.По этому выводу нетрудно увидеть, что, когда никакие параметры не передаются, мы можем найти этот метод на всем пути через старую переменную замыкания.

    function () {
        console.log(this.userName + '---->' + 'show1')
    }

Эпилог

Таким образом, мы используем старую переменную в замыкании, чтобы конкатенировать методы, которые не передают параметры, передают один параметр и передают два параметра.Реализована перегрузка js.Еще раз вздох, этот метод действительно аккуратный.Реально красивый и очаровательный код

Если вы считаете, что это нормально, пожалуйста, поставьте лайк и поддержите это, спасибо!

Категории