zoukankan      html  css  js  c++  java
  • JavaScript Patterns 6.7 Borrowing Methods

    Scenario

    You want to use just the methods you like, without inheriting all the other methods that you’ll never need. This is possible with the borrowing methods pattern, which benefits from the function methods  call() and apply().

    // call() example
    
    notmyobj.doStuff.call(myobj, param1, p2, p3);
    
    // apply() example
    
    notmyobj.doStuff.apply(myobj, [param1, p2, p3]); 

    Example: Borrow from Array

    // Example for calling the slice
    
    function f() {
    
        var args = [].slice.call(arguments, 1, 3);
    
        return args;
    
    }
    
    // example
    
    f(1, 2, 3, 4, 5, 6); // returns [2,3]

    Borrow and Bind

    When borrowing methods either through call()/apply() or through simple assignment, the object that this points to inside of the borrowed method is determined based on the call expression. But sometimes it’s best to have the value of  this “locked” or bound to a specific object and predetermined in advance. 

    var one = {
    
        name: "object",
    
        say: function (greet) {
    
            return greet + ", " + this.name;
    
        }
    
    };
    
    var two = {
    
        name: "another object"
    
    }; 
    
    var say = one.say; 
    
    // passing as a callback
    
    var yetanother = {
    
        name: "Yet another object",
    
        method: function (callback) {
    
            return callback('Hola');
    
        }
    
    }; 
    
    one.say('hi'); // "hi, object"
    
    one.say.apply(two, ['hello']); // "hello, another object"
    
    say('hoho'); // "hoho, undefined"
    
    yetanother.method(one.say); // "Holla, undefined"

    Solution

    This bind() function accepts an object o and a method m, binds the two together, and then returns another function. The returned function as access to  o and  m via a closure. Therefore even after  bind() returns, the inner function will have access to  o and  m, which will always point to the original object and method.

    function bind(o, m) {
    
        return function () {
    
            return m.apply(o, [].slice.call(arguments));
    
        };
    
    } 
    
    var twosay = bind(two, one.say);
    
    twosay('yo'); // "yo, another object"

     

    Disadvantage

    The price you pay for the luxury of having a bind is the additional closure.

    Function.prototype.bind()

    ECMAScript 5 adds a method bind() to Function.prototype, making it just as easy to use as apply() and call().

    var newFunc = obj.someFunc.bind(myobj, 1, 2, 3);

     

    Implement Function.prototype.bind() when your program runs in pre-ES5 environments.

    It’s using partial application and concatenating the list of arguments—those passed to  bind()(except the first) and those passed when the new function returned by  bind() is called later. 

    var twosay2 = one.say.bind(two);
    
    twosay2('Bonjour'); // "Bonjour, another object"

    References: 

    JavaScript Patterns - by Stoyan Stefanov (O`Reilly)

  • 相关阅读:
    angular中集中页面传参(我只是知识的搬运工)
    使用Cookie传递参数 ,a页面保存Cookie,b页面读取,代码如下:
    获取并处理地址栏中参数方法
    常见的css命名规范/ID命名规范/常用功能模块的命名
    angularjs 1.x 项目完整的较完整的登录验证具体代码(仅供参考)
    用angular自带的方法获取input中内容(以用户名和密码为例)的字符串长度方法
    jquery 层弹窗传值
    伯乐在线node高手的基础经验 您值得一读
    javascript 代码规范
    正确看待技术
  • 原文地址:https://www.cnblogs.com/haokaibo/p/Borrowing-Methods.html
Copyright © 2011-2022 走看看