Js implements its own bind function, free binding context

• We are in the process of writing js often appear such logic requires temporary needs a method, an object used to handle some business, and such a method of logic has been in the method of another object or function definition, so we can no longer under the object to add the same way! So what do we do? Our logic is to call a method or function that already implements the business need, just change its line text to the current object, and the two methods that need to be used flexibly are apply and Call. Ok, let’s start with the following example code:

    var obj = {
        name : 'obj'.getName : function(prefix){
            prefix = prefix || 'hello';
            var _newValue = prefix + ' ' + this.name;
            console.log(_newValue);
            return_newValue; }};var obj1 = {
        name : 'obj1'
    };
    //We now need to implement obj1 to have the same getName method as obj
    obj.getName.call(obj1,'-prefix-obj1- hello');
    //Print - prefix-obj1-hello obj1Copy the code

At this point, we can implement the free context switch, here is the difference between apply and call: In terms of purpose, they are the same, the only difference is that the form of passing parameters is different. Apply is an array, while call is passed in one by one as we normally write functions, so how to use them depends on the form of the parameters of the specific business scenario, in general, you can use them as you like! Look at the following code:

    function sum() {var num = 0;
        for(var i = 0,len = arguments.length; i<len; i++){
            num + = arguments[i];
        };
        console.log(num);
        return num;
    };

    var arr = [1.2.5.7.78.14];
    var arrSum = sum.apply(null,arr);//output 107
    var argsSum = sum.call(null.1.2.5.7.78.14);//output 107
    //If the context is set to NULL, the browser is windowCopy the code

• First of all, I did spend some time writing it out. Why? To put it bluntly, some of the details of javascript can’t be figured out all at once. Ok, SO I’m going to explain each of the ways I’ve written to implement bind, with code examples, and what I thought.

• The first time I implemented it this way, the code is as follows:

    Function.prototype.bind = function(content) {var _function = this;//Use to preserve a reference to the original function
        var _args = Array.prototype.slice.call(arguments.1);//Used to extract arguments from the original function
        _function.apply(content,_args);
    };Copy the code

Bind bind bind bind bind bind bind bind bind bind bind bind bind bind The applications are as follows:

    var surname = 'global';
    var name = 'variable';
    function getFullName(surname.name) {var fullName = this.surname + this.name;
        console.log(fullName);
        return fullName;
    };
    var person = {
        surname : 'weeks',
        name:'jay'
    };
    getFullName.bind(person,surname,name);//The output jay ChouCopy the code

Well, we found that we can fulfill the requirements! GetFullName has two arguments, but now when I call it, the parameter value has changed. I don’t think this will work, because in the future, if the bind function is used by others, who will know that the new context is the first argument. Why can’t we just keep the function in its original form so that people don’t have to add an unnecessary parameter when they use it? And doesn’t the bind function above feel like it’s hard-coded? We also need to figure out where the argument is truncated to be the argument of our original function! Ok, we make the following modifications:

    //The second way
    Function.prototype.bind = function(content) {var _function = this;
        return function() {return _function.apply(content,arguments);
        };  
    };Copy the code

Let’s see how it is called in real production:

    var surname = 'global';
    var name = 'variable';
    var person = {
        surname : 'weeks',
        name:'jay'
    };
    var getFullName = function(surname.name) {var fullName = this.surname + this.name;
        console.log(fullName);
        return fullName;
    }.bind(person);
    getFullName(surname,name);//The output jay Chou
    //Or I could write it this way
    //var getFullName = function(surname,name){
    //  var fullName = this.surname + this.name;
    //  console.log(fullName);
    //  return fullName;
    //};
    //getFullName.bind(person)(surname,name);Copy the code

Well, this time we have implemented the familiar form of the original function call to make it easier to understand.

1. Instead of using slice to truncate the parameters of the original function, we keep the code of the original function, which is more flexible and conforms to the “closed-open loop” principle. 2. Instead of calling our function inside the bind function, we returned an anonymous function and then called our function inside the anonymous function. This is important because it allows us to do this without changing the argument sequence of our original function. Bind (); bind (); bind (); bind (); bind (); Bind (); arguments (); bind (); bind (); To illustrate this, let’s look at the following code:

    function supFun(supValue) {console.log(arguments);
        return function() {subFun.apply(null.arguments);
        };
    };
    function subFun(subValue1.subValue2) {console.log(arguments);
    };
    //Now we write our function call like this
    supFun('The parent variable')//This step prints arguments and we find that it is just the sequence of arguments to supFun - the parent variable
    ('The child variable 1'.'2 son variables');//We see that this step prints the sequence of arguments to subFun -- child variables 1 and 2Copy the code

To illustrate this process more vividly, an understanding sketch was drawn as follows:

• In fact, the implementation logic of this way is similar to the previous two ways, the principle is the same, the code is as follows:

    function bind(content.fn) {return function() {fn.apply(content,arguments);
        };
    };Copy the code

In practice, this is fine:

    window.name = 'window';
    var obj = {
        name : 'obj'
    };
    function getName() {console.log(this.name);
        return this.name;
    };
    bind(obj,getName)();//output "obj"Copy the code

Ok, we found that the above code works! This concludes my list of ways to implement the custom bind function! So let’s see how it works in real development!

• Implement the context specified by the binding as shown in the following example:

    var clicker = {
        isClick : false.clicked : function() {this.isClick = !this.isClick; }};.Copy the code