1.
1 //the role of Function.prototype.bind ()2 3 //1.Creating a bound function4 This. x = 9; 5 varmodule = {6x:81,7GetX:function() {return This. x;}8 };9 TenConsole.log (Module.getx ());//Bayi One A varRetrievex =Module.getx; - Console.log (Retrievex ()); - //9, because in the case, ' this ' refers the //To the global object - - //Create a new function with ' this ' bound to module - //New Programmers might confuse the + //global var x with module ' s property x - varBoundgetx =Retrievex.bind (module); +Console.log (Boundgetx ());//Bayi A at //2.Partially Applied Functions - - //The next simplest use of bind () are to make a function with pre-specified initial arguments. These arguments (if any) follow the provided this value and is then inserted at the start of the arguments passed to the Target function, followed by the arguments passed to the bound function, and whenever the bound function is called. - functionlist () { - returnArray.prototype.slice.call (arguments); - } in - varList1 = List (1, 2, 3);//[1, 2, 3] to Console.log (list1); + //Create a function with a preset leading argument - varLeadingthirtysevenlist = List.bind (Undefined, 37); the Console.log (leadingthirtysevenlist); * varList2 =leadingthirtysevenlist (); $ //[Panax Notoginseng]Panax Notoginseng Console.log (list2); - varList3 = Leadingthirtysevenlist (1, 2, 3); the //[Panax Notoginseng, 1, 2, 3] + Console.log (LIST3); A the //3.With setTimeout + - //y default within window.settimeout (), the This keyword is set to the window (or global) object. When working with class methods. Require this to refer to class instances, your may explicitly bind the CALLBAC K function, in order to maintain the instance. $ functionLatebloomer () { $ This. Petalcount = Math.ceil (Math.random () * 12) + 1; - } - the //Declare Bloom after a delay of 1 second -LateBloomer.prototype.bloom =function() {WuyiWindow.settimeout ( This. Declare.bind ( This), 1000); the }; - WuLateBloomer.prototype.declare =function() { -Console.log (' I am a beautiful flower with ' + About This. Petalcount + ' petals! '); $ }; - - varFlower =NewLatebloomer (); - Flower.bloom (); A //After 1 second, triggers the ' Declare ' method + the //3.Bound functions used as constructors - //Bound functions is automatically suitable for use and the new operator to construct new instances created by the TA Rget function. When a bound function was used to construct a value, the provided this is ignored. However, provided arguments is still prepended to the constructor call: $ functionPoint (x, y) { the This. x =x; the This. y =y; the } the -Point.prototype.toString =function() { in return This. x + ', ' + This. Y; the }; the About varp =NewPoint (1, 2); theP.tostring ();//' All ' the the //Not supported in the polyfill below, + - //works fine with native bind: the Bayi varYaxispoint = Point.bind (NULL, 0/*x*/); the the - varEmptyobj = {}; - varYaxispoint = Point.bind (emptyobj, 0/*x*/); the the varAxispoint =NewYaxispoint (5); theAxispoint.tostring ();//' 0,5 ' the -Console.log (AxispointinstanceofPoint);//true theConsole.log (AxispointinstanceofYaxispoint);//true theConsole.log (NewPoint (17, 42)instanceofYaxispoint);//true the 94 //Example can be run directly in your JavaScript console the //... continuing from above the the //Can still be called as a normal function98 //(although usually this is undesired) AboutConsole.log (Yaxispoint (13)); - 101Console.log (emptyobj.x + ', ' +emptyobj.y);102 //> ' 0,13 '103 104 //4.Creating Shortcuts the varSlice =Array.prototype.slice;106 107 // ...108 109 slice.apply (arguments); the //same as "slice" in the previous example111 varUnboundslice =Array.prototype.slice; the varSlice =Function.prototype.apply.bind (unboundslice);113 the // ... the the Slice (arguments);117 118 //Polyfill119 //The BIND function is a addition to ECMA-262, 5th edition; As such it could not be present in all browsers. You can partially work around the inserting the following code at the beginning of your scripts, allowing use of much Of the functionality of BIND () in implementations that does not natively support it. - if(!Function.prototype.bind) {121Function.prototype.bind =function(othis) {122 if(typeof This!== ' function ') {123 //closest thing possible to the ECMAScript 5124 //Internal iscallable function the Throw NewTypeError (' Function.prototype.bind-what is trying-be bound are not callable ');126 }127 - varAargs = Array.prototype.slice.call (arguments, 1),129Ftobind = This, theFnop =function() {},131Fbound =function() { the returnFtobind.apply ( This instanceofFnop133? This134 : Othis,135 Aargs.concat (Array.prototype.slice.call (arguments)));136 };137 138 if( This. prototype) {139 //Function.prototype doesn ' t has a prototype property $Fnop.prototype = This. prototype;141 }142Fbound.prototype =NewFnop ();143 144 returnFbound;145 };146}
The 4 functions of object-oriented javascript-006-function.prototype.bind ()