การแทนที่ฟังก์ชั่น JavaScript ในขณะที่อ้างอิงถึงต้นฉบับ

ฉันมีฟังก์ชั่นa()ที่ฉันต้องการแทนที่ แต่ก็มีการa()ดำเนินการต้นฉบับในลำดับขึ้นอยู่กับบริบท ตัวอย่างเช่นบางครั้งเมื่อฉันสร้างหน้าฉันจะต้องการแทนที่เช่นนี้:

function a() {
    new_code();
    original_a();
}

และบางครั้งเช่นนี้

function a() {
    original_a();
    other_new_code();
}

ฉันจะได้รับสิ่งนั้นoriginal_a()จากภายในรถได้a()อย่างไร? เป็นไปได้ไหม

โปรดอย่าแนะนำทางเลือกอื่นสำหรับการขี่มากกว่าด้วยวิธีนี้ฉันรู้จากหลาย ๆ ฉันถามเกี่ยวกับวิธีนี้โดยเฉพาะ

คุณสามารถทำสิ่งนี้:

var a = (function() {
    var original_a = a;

    if (condition) {
        return function() {
            new_code();
            original_a();
        }
    } else {
        return function() {
            original_a();
            other_new_code();
        }
    }
})();

การประกาศoriginal_aภายในฟังก์ชั่นที่ไม่ระบุชื่อช่วยป้องกันไม่ให้เกิดความยุ่งเหยิงในเนมสเปซส่วนกลาง แต่ใช้ได้ในฟังก์ชั่นด้านใน

เช่นเดียวกับ Nerdmaster ที่กล่าวถึงในความคิดเห็นอย่าลืมใส่()ตอนท้าย คุณต้องการเรียกใช้ฟังก์ชั่นด้านนอกและเก็บผลลัพธ์ (หนึ่งในสองฟังก์ชั่นด้านใน) ลงไปaแต่ไม่เก็บฟังก์ชั่นด้านนอกaเอาไว้

รูปแบบหนังสือมอบฉันทะอาจช่วยให้คุณ:

(function() {
    // log all calls to setArray
    var proxied = jQuery.fn.setArray;
    jQuery.fn.setArray = function() {
        console.log( this, arguments );
        return proxied.apply( this, arguments );
    };
})();

ด้านบนล้อมรอบโค้ดในฟังก์ชันเพื่อซ่อน "proxied" -variable มันจะบันทึกวิธี setArray ของ jQuery ในการปิดและเขียนทับมัน จากนั้นพร็อกซีจะบันทึกการโทรทั้งหมดไปยังวิธีการและมอบหมายการโทรให้กับต้นฉบับ การใช้นำไปใช้ (สิ่งนี้ขัดแย้ง) รับประกันได้ว่าผู้โทรจะไม่สามารถสังเกตเห็นความแตกต่างระหว่างวิธีการดั้งเดิมและพร็อกซี

ขอบคุณพวกรูปแบบพร็อกซี่ช่วยจริงๆ ..... จริงๆแล้วฉันอยากจะเรียกฟังก์ชั่นสากล foo .. ในบางหน้าฉันต้องทำเพื่อตรวจสอบบางอย่าง ดังนั้นฉันทำต่อไปนี้

//Saving the original func
var org_foo = window.foo;

//Assigning proxy fucnc
window.foo = function(args){
    //Performing checks
    if(checkCondition(args)){
        //Calling original funcs
        org_foo(args);
    }
};

ขอบคุณสิ่งนี้ช่วยฉันจริงๆ

คุณสามารถแทนที่ฟังก์ชั่นโดยใช้โครงสร้างเช่น:

function override(f, g) {
    return function() {
        return g(f);
    };
}

ตัวอย่างเช่น:

 a = override(a, function(original_a) {
      if (condition) { new_code(); original_a(); }
      else { original_a(); other_new_code(); }
 });

แก้ไข: แก้ไขข้อผิดพลาด

ผ่านข้อโต้แย้งโดยพลการ:

a = override(a, function(original_a) {
    if (condition) { new_code(); original_a.apply(this, arguments) ; }
    else { original_a.apply(this, arguments); other_new_code(); }
});

คำตอบที่ @Matthew Crumley ให้ไว้คือการใช้ประโยชน์จากการแสดงออกของฟังก์ชั่นที่เรียกใช้ทันทีเพื่อปิดฟังก์ชั่น 'a' ที่เก่ากว่าลงในบริบทการดำเนินการของฟังก์ชันที่ส่งคืน ฉันคิดว่านี่เป็นคำตอบที่ดีที่สุด แต่โดยส่วนตัวแล้วฉันชอบที่จะใช้ฟังก์ชั่น 'a' เพื่อโต้แย้งกับ IIFE ฉันคิดว่ามันเป็นที่เข้าใจมากขึ้น

   var a = (function(original_a) {
        if (condition) {
            return function() {
                new_code();
                original_a();
            }
        } else {
            return function() {
                original_a();
                other_new_code();
            }
        }
    })(a);

ตัวอย่างด้านบนใช้ไม่ถูกต้องthisหรือส่งผ่านargumentsอย่างถูกต้องกับการแทนที่ฟังก์ชัน ขีดล่าง _.wrap () ล้อมฟังก์ชันที่มีอยู่ใช้thisและผ่านargumentsอย่างถูกต้อง ดู: http://underscorejs.org/#wrap

ฉันมีรหัสบางอย่างที่เขียนโดยคนอื่นและต้องการเพิ่มบรรทัดในฟังก์ชันที่ฉันไม่สามารถหาได้ในรหัส ดังนั้นเพื่อเป็นวิธีแก้ปัญหาฉันต้องการแทนที่มัน

ไม่มีวิธีแก้ปัญหาใดที่เหมาะกับฉัน

นี่คือสิ่งที่ทำงานในกรณีของฉัน:

if (typeof originalFunction === "undefined") {
    originalFunction = targetFunction;
    targetFunction = function(x, y) {
        //Your code
        originalFunction(a, b);
        //Your Code
    };  
}

ฉันได้สร้างผู้ช่วยตัวเล็กสำหรับสถานการณ์ที่คล้ายกันเพราะฉันมักจะต้องการแทนที่ฟังก์ชั่นจากห้องสมุดหลายแห่ง ผู้ช่วยนี้ยอมรับ "namespace" (คอนเทนเนอร์ฟังก์ชัน) ชื่อฟังก์ชันและฟังก์ชันแทนที่ มันจะแทนที่ฟังก์ชั่นเดิมใน namespace ที่อ้างถึงด้วยใหม่

ฟังก์ชั่นใหม่ยอมรับฟังก์ชั่นเดิมเป็นอาร์กิวเมนต์แรกและฟังก์ชั่นเดิมข้อโต้แย้งเป็นส่วนที่เหลือ มันจะรักษาบริบททุกครั้ง สนับสนุนฟังก์ชั่นโมฆะและไม่เป็นโมฆะเช่นกัน

function overrideFunction(namespace, baseFuncName, func) {
    var originalFn = namespace[baseFuncName];
    namespace[baseFuncName] = function () {
        return func.apply(this, [originalFn.bind(this)].concat(Array.prototype.slice.call(arguments, 0)));
    };
}

ตัวอย่างการใช้ Bootstrap:

overrideFunction($.fn.popover.Constructor.prototype, 'leave', function(baseFn, obj) {
    // ... do stuff before base call
    baseFn(obj);
    // ... do stuff after base call
});

ฉันไม่ได้สร้างการทดสอบประสิทธิภาพใด ๆ มันอาจจะเพิ่มค่าใช้จ่ายที่ไม่พึงประสงค์ซึ่งอาจหรือไม่สามารถเป็นเรื่องใหญ่ขึ้นอยู่กับสถานการณ์

ในความเห็นของฉันคำตอบยอดนิยมไม่สามารถอ่าน / บำรุงรักษาได้และคำตอบอื่น ๆ ไม่ได้ผูกบริบทอย่างเหมาะสม นี่เป็นวิธีแก้ปัญหาที่อ่านได้โดยใช้ไวยากรณ์ ES6 เพื่อแก้ปัญหาทั้งสองนี้

const orginial = someObject.foo;
someObject.foo = function() {
  if (condition) orginial.bind(this)(...arguments);
};

ดังนั้นคำตอบของฉันคือการแก้ปัญหาที่ทำให้ฉันสามารถใช้ตัวแปร _this ที่ชี้ไปยังวัตถุดั้งเดิมได้ ฉันสร้างอินสแตนซ์ใหม่ของ "Square" แต่ฉันเกลียดวิธีที่ "Square" สร้างขนาด ฉันคิดว่าควรทำตามความต้องการเฉพาะของฉัน อย่างไรก็ตามเพื่อที่จะทำเช่นนั้นฉันต้องการให้สแควร์มีฟังก์ชั่น "GetSize" ที่อัปเดตพร้อมกับ internals ของฟังก์ชั่นที่เรียกฟังก์ชั่นอื่น ๆ ที่มีอยู่แล้วในสแควร์เช่น this.height this.GetVolume () แต่เพื่อที่จะทำเช่นนั้นฉันจำเป็นต้องทำเช่นนี้โดยไม่ต้องแฮ็คบ้า นี่คือทางออกของฉัน

Object initializer หรือฟังก์ชันตัวช่วยอื่น ๆ

this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(
  this.viewerContainer)
var viewer = this.viewer;
viewer.updateToolbarButtons =  this.updateToolbarButtons(viewer);

ฟังก์ชั่นในวัตถุอื่น ๆ

updateToolbarButtons = function(viewer) {
  var _viewer = viewer;
  return function(width, height){ 
blah blah black sheep I can refer to this.anything();
}
};

ไม่แน่ใจว่าจะใช้งานได้ในทุกสถานการณ์หรือไม่ แต่ในกรณีของเราเราพยายามแทนที่describeฟังก์ชันใน Jest เพื่อให้เราสามารถแยกชื่อและข้ามdescribeบล็อกทั้งหมดหากตรงตามเกณฑ์

นี่คือสิ่งที่ใช้ได้กับเรา:

function describe( name, callback ) {
  if ( name.includes( "skip" ) )
    return this.describe.skip( name, callback );
  else
    return this.describe( name, callback );
}

สองสิ่งที่สำคัญที่นี่:

1. () =>เราไม่ได้ใช้ฟังก์ชั่นลูกศร

   ลูกศรฟังก์ชั่นการเปลี่ยนแปลงการอ้างอิงถึงและเราจำเป็นที่จะต้องมีของไฟล์thisthis

2. การใช้this.describeและการthis.describe.skipแทนเพียงและdescribedescribe.skip

อีกครั้งไม่แน่ใจว่าเป็นของมีค่าสำหรับใคร แต่แรกเริ่มเราพยายามที่จะหนีไปด้วยคำตอบที่ยอดเยี่ยมของ Matthew Crumley แต่จำเป็นต้องทำให้วิธีการของเราเป็นหน้าที่และยอมรับ params เพื่อแยกวิเคราะห์พวกเขาในเงื่อนไข