Trong Javascript, làm cách nào để tôi có thể liên kết các đối số với một hàm mà không ràng buộc thistham số?

Ví dụ:

//Example function.
var c = function(a, b, c, callback) {};

//Bind values 1, 2, and 3 to a, b, and c, leave callback unbound.
var b = c.bind(null, 1, 2, 3); //How can I do this without binding scope?

Làm cách nào để tránh tác dụng phụ của việc phải ràng buộc cả phạm vi của hàm (ví dụ: setting this= null)?

Biên tập:

Xin lỗi vì sự nhầm lẫn. Tôi muốn ràng buộc các đối số, sau đó có thể gọi hàm bị ràng buộc sau đó và nó hoạt động chính xác như thể tôi đã gọi hàm ban đầu và chuyển cho nó các đối số bị ràng buộc:

var x = 'outside object';

var obj = {
  x: 'inside object',
  c: function(a, b, c, callback) {
    console.log(this.x);
  }
};

var b = obj.c.bind(null, 1, 2, 3);

//These should both have exact same output.
obj.c(1, 2, 3, function(){});
b(function(){});

//The following works, but I was hoping there was a better way:
var b = obj.c.bind(obj, 1, 2, 3); //Anyway to make it work without typing obj twice?

Tôi vẫn còn mới về điều này, xin lỗi vì sự nhầm lẫn.

Cảm ơn!

Bạn có thể làm điều này, nhưng tốt nhất nên tránh nghĩ nó là "ràng buộc" vì đó là thuật ngữ được sử dụng để đặt giá trị "này". Có lẽ nghĩ về nó như là "gói" các đối số vào một hàm?

Những gì bạn làm là tạo một hàm có các đối số mong muốn được tích hợp vào nó thông qua các bao đóng:

var withWrappedArguments = function(arg1, arg2)
    {
        return function() { ... do your stuff with arg1 and arg2 ... };
    }(actualArg1Value, actualArg2Value);

Hy vọng tôi có cú pháp ngay tại đó. Những gì nó làm là tạo một hàm có tên là withWrappedArguments () (nói theo kiểu pedantic thì nó là một hàm ẩn danh được gán cho biến) mà bạn có thể gọi bất kỳ lúc nào ở bất kỳ đâu và sẽ luôn hoạt động với thực tếArg1Value và thực tếArg2Value và bất kỳ thứ gì khác bạn muốn đưa vào ở đó. Bạn cũng có thể yêu cầu nó chấp nhận các đối số khác tại thời điểm cuộc gọi nếu bạn muốn. Bí mật là dấu ngoặc đơn sau dấu ngoặc nhọn cuối cùng. Những điều này làm cho hàm bên ngoài được thực thi ngay lập tức, với các giá trị được truyền vào và tạo ra hàm bên trong có thể được gọi sau này. Các giá trị được truyền sau đó được đóng băng tại thời điểm hàm được tạo.

Đây là cách thực hiện hiệu quả của ràng buộc, nhưng theo cách này rõ ràng là các đối số được bao bọc chỉ đơn giản là các đóng trên các biến cục bộ và không cần phải thay đổi hành vi của điều này.

Trong ES6, điều này được thực hiện dễ dàng bằng cách sử dụng các tham số nghỉ kết hợp với toán tử trải rộng .

Vì vậy, chúng ta có thể định nghĩa một hàm bindArgshoạt động như thế nào bind, ngoại trừ việc chỉ có các đối số bị ràng buộc, chứ không phải là ngữ cảnh ( this).

Function.prototype.bindArgs =
    function (...boundArgs)
    {
        const targetFunction = this;
        return function (...args) { return targetFunction.call(this, ...boundArgs, ...args); };
    };

Sau đó, đối với một hàm foovà một đối tượng được chỉ định obj, câu lệnh

return foo.call(obj, 1, 2, 3, 4);

tương đương với

let bar = foo.bindArgs(1, 2);
return bar.call(obj, 3, 4);

trong đó chỉ các đối số thứ nhất và thứ hai được liên kết bar, trong khi ngữ cảnh objđược chỉ định trong lời gọi được sử dụng và các đối số phụ được nối sau các đối số ràng buộc. Giá trị trả về chỉ được chuyển tiếp.

Ở bản địa bind phương thức , thisgiá trị trong hàm kết quả bị mất. Tuy nhiên, bạn có thể dễ dàng mã hóa lại miếng đệm thông thường để không sử dụng đối số cho ngữ cảnh:

Function.prototype.arg = function() {
    if (typeof this !== "function")
        throw new TypeError("Function.prototype.arg needs to be called on a function");
    var slice = Array.prototype.slice,
        args = slice.call(arguments), 
        fn = this, 
        partial = function() {
            return fn.apply(this, args.concat(slice.call(arguments)));
//                          ^^^^
        };
    partial.prototype = Object.create(this.prototype);
    return partial;
};

Thêm một triển khai nhỏ nữa chỉ cho vui:

function bindWithoutThis(cb) {
    var bindArgs = Array.prototype.slice.call(arguments, 1);

    return function () {
        var internalArgs = Array.prototype.slice.call(arguments, 0);
        var args = Array.prototype.concat(bindArgs, internalArgs);
        return cb.apply(this, args);
    };
}

Cách sử dụng:

function onWriteEnd(evt) {}
var myPersonalWriteEnd = bindWithoutThis(onWriteEnd, "some", "data");

var b = function() {
    return c(1,2,3);
};

Hơi khó để nói chính xác cuối cùng bạn muốn làm gì vì ví dụ này hơi tùy ý, nhưng bạn có thể muốn xem xét các thành phần (hoặc currying): http://jsbin.com/ifoqoj/1/edit

Function.prototype.partial = function(){
  var fn = this, args = Array.prototype.slice.call(arguments);
  return function(){
    var arg = 0;
    for ( var i = 0; i < args.length && arg < arguments.length; i++ )
      if ( args[i] === undefined )
        args[i] = arguments[arg++];
    return fn.apply(this, args);
  };
};

var c = function(a, b, c, callback) {
  console.log( a, b, c, callback )
};

var b = c.partial(1, 2, 3, undefined);

b(function(){})

Liên kết đến bài viết của John Resig: http://ejohn.org/blog/partial-functions-in-javascript/

Có thể bạn muốn liên kết tham chiếu cuối cùng của điều này nhưng mã của bạn: -

var c = function(a, b, c, callback) {};
var b = c.bind(null, 1, 2, 3); 

Đã áp dụng ràng buộc cho ví dụ này và sau này bạn không thể thay đổi nó. Những gì tôi sẽ đề xuất rằng sử dụng tham chiếu cũng như một tham số như thế này: -

var c = function(a, b, c, callback, ref) {  
    var self = this ? this : ref; 
    // Now you can use self just like this in your code 
};
var b = c.bind(null, 1, 2, 3),
    newRef = this, // or ref whatever you want to apply inside function c()
    d = c.bind(callback, newRef);

Sử dụng a protagonist!

var geoOpts = {...};

function geoSuccess(user){  // protagonizes for 'user'
  return function Success(pos){
    if(!pos || !pos.coords || !pos.coords.latitude || !pos.coords.longitude){ throw new Error('Geolocation Error: insufficient data.'); }

    var data = {pos.coords: pos.coords, ...};

    // now we have a callback we can turn into an object. implementation can use 'this' inside callback
    if(user){
      user.prototype = data;
      user.prototype.watch = watchUser;
      thus.User = (new user(data));
      console.log('thus.User', thus, thus.User);
    }
  }
}

function geoError(errorCallback){  // protagonizes for 'errorCallback'
  return function(err){
    console.log('@DECLINED', err);
    errorCallback && errorCallback(err);
  }
}

function getUserPos(user, error, opts){
  nav.geo.getPos(geoSuccess(user), geoError(error), opts || geoOpts);
}

Về cơ bản, hàm bạn muốn truyền các tham số để trở thành một proxy mà bạn có thể gọi để truyền một biến và nó trả về hàm mà bạn thực sự muốn thực hiện.

Hi vọng điêu nay co ich!

Một người dùng ẩn danh đã đăng thông tin bổ sung này:

Xây dựng dựa trên những gì đã được cung cấp trong bài đăng này - giải pháp thanh lịch nhất mà tôi đã thấy là Curry lập luận và ngữ cảnh của bạn:

function Class(a, b, c, d){
    console.log('@Class #this', this, a, b, c, d);
}

function Context(name){
    console.log('@Context', this, name);
    this.name = name;
}

var context1 = new Context('One');
var context2 = new Context('Two');

function curryArguments(fn) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function bindContext() {
      var additional = Array.prototype.slice.call(arguments, 0);
      return fn.apply(this, args.concat(additional));
    };
}

var bindContext = curryArguments(Class, 'A', 'B');

bindContext.apply(context1, ['C', 'D']);
bindContext.apply(context2, ['Y', 'Z']);

Đối với ví dụ bạn đã đưa ra, điều này sẽ làm được

var b= function(callback){
        return obj.c(1,2,3, callback);
};

Nếu bạn muốn bao vây rõ ràng các thông số:

var b= (function(p1,p2,p3, obj){
        var c=obj.c;
        return function(callback){
                return c.call(obj,p1,p2,p3, callback);
        }
})(1,2,3,obj)

Nhưng nếu vậy bạn chỉ nên kiên trì giải pháp của mình:

var b = obj.c.bind(obj, 1, 2, 3);

Đó là cách tốt hơn.

Đơn giản như thế?

var b = (cb) => obj.c(1,2,3, cb)
b(function(){}) // insidde object

Giải pháp chung hơn:

function original(a, b, c) { console.log(a, b, c) }
let tied = (...args) => original(1, 2, ...args)

original(1,2,3) // 1 2 3
tied(5,6,7) // 1 2 5

Sử dụng LoDash bạn có thể sử dụng _.partialchức năng.

const f  = function (a, b, c, callback) {}

const pf = _.partial(f, 1, 2, 3)  // f has first 3 arguments bound.

pf(function () {})                // callback.

Tại sao không sử dụng một trình bao bọc xung quanh hàm để lưu nó dưới dạng mythis?

function mythis() {
  this.name = "mythis";
  mythis = this;
  function c(a, b) {
    this.name = "original";
    alert('a=' + a + ' b =' + b + 'this = ' + this.name + ' mythis = ' + mythis.name);
    return "ok";
  }    
  return {
    c: c
  }
};

var retval = mythis().c(0, 1);

jQuery 1.9 mang lại chính xác tính năng đó với chức năng proxy.

Kể từ jQuery 1.9, khi ngữ cảnh là null hoặc không được xác định, hàm proxied sẽ được gọi với đối tượng này giống như đối tượng được gọi với proxy. Điều này cho phép $ .proxy () được sử dụng để áp dụng một phần các đối số của một hàm mà không thay đổi ngữ cảnh.

Thí dụ:

$.proxy(this.myFunction, 
        undefined /* leaving the context empty */, 
        [precededArg1, precededArg2]);

Trường hợp sử dụng jquery:

thay thế:

for(var i = 0;i<3;i++){
    $('<input>').appendTo('body').click(function(i){
        $(this).val(i); // wont work, because 'this' becomes 'i'
    }.bind(i));
}

dùng cái này:

for(var i = 0;i<3;i++){
    $('<input>').appendTo('body').click(function(e){
        var i = this;
        $(e.originalEvent.target).val(i);
    }.bind(i));
}