Advantages of overriding functions?

Question

function a(){
    alert('A');
    a = function(){
        alert('B');
    };
}

function a(){
    alert('A');
    return function(){
        alert('B');
    };
}

This function rewrites itself after being called for the first time, thus avoiding unnecessary repetition of operations every time it is called. How to understand this specifically? Isn’t the function execution thread the same before and after rewriting the function?

Answer 1

For example, different browsers have different API names, and if you want to encapsulate a unified interface, your code will look like this

function fn(){
    if(chrome){
        fn = function(){};
    }else if(firefox){
        fn = function(){};
    }
    fn();
}

Answer 2

Differentiates a Boolean state without using extra variables and without using if-else.
For example, some behaviors have different logic in initialized and uninitialized situations, then you can write like this:

var initiated = false
function action () {
    if (initiated) {
        // action 1
    } else {
        // action 2
        initiated = true
    }
}

The bad thing here is that a global variable is introduced. Then this variable can be encapsulated into an internal state, which can be written like this:

class Action {
    constructor () {
        this.initiated = false
        this._init()
    }
    _init () {
        // action 2
        this.initiated = true
    }
    action () {
        // action 1
    }
}

var myAction = new Action()
myAction.action()

If you use the method mentioned by the questioner:

function action () {
    // action 2
    return function () {
        // action 1
    }
}

var myAction = action()
myAction()

In addition, this way of writing feels very functional (I don’t know much about functional expressions, so I don’t dare to be absolute). So here is the problem of programming paradigm.
Feel the following three different ways of writing:

Process-oriented:

function logger (type, content) {
    var now = new Date()
    if (type === 'debug') {
        console.log('DEBUG::' + now + ' ' + content)
    } else if (type === 'info') {
        console.log('INFO::' + now + ' ' + content)
    }
}

logger('debug', 'xxx')
logger('info', 'xxx')

Object-oriented:

class Logger {
    _now () {
        return new Date()
    }
    debug (content) {
        console.log('DEBUG::' + this._now() + ' ' + content)
    }
    info (content) {
        var now = new Date()
        console.log('INFO::' + this._now() + ' ' + content)
    }
}

var logger = new Logger()
logger.debug('xxx')
logger.info('xxx')

Functional expression:

function logger (type) {
    var prefix = ''
    if (type === 'debug') {
        prefix = 'DEBUG'
    } else if (type === 'info') {
        prefix = 'INFO'
    }
    
    return function (content) {
        var now = new Date()
        console.log(prefix + '::' + now + ' ' + content)
    }
}

var debugLogger = logger('debug')
var infoLogger = logger('info')

debugLogger('xxxx')
infoLogger('xxxx')

The functional method has many advantages. You need to understand functional programming for this.

Answer 3

The browser API example upstairs is a good example. Generally speaking, function rewriting is more about avoiding certain unnecessary operations so as to optimize code performance. Let me give you another example. More commonly used:

//就比如说我们经常要通过addEventListener来绑定事件，但是在某些老版本浏览器可能用的是attachEvent和on，这时我们可以：
var bindEvent = function(target,event,handle){
    //下面就是针对性的重写
    if(target.addEventListener){
        bindEvent = function(target,event,handle){
            target.addEventListener(event,handle,false);
        };
    } else if( target.attachEvent ){
        bindEvent = function(target,event,handle){
            target.attachEvent("on"+event,handle);
        };
    } else {
        bindEvent = function(target,event,handle){
            target["on"+event] = handle;
        };
    }
    bindEvent(target,event,handle);
};

Answer 4

Simply put

The first time you run a function, alert('A') is executed, and the second time it is executed, alert('B').

It is not so much to avoid repeating unnecessary operations as it is to perform additional operations. When it is run for the first time, it does thing A, and when it runs later, it does thing B.