The 4 functions of object-oriented javascript-006-function.prototype.bind ()

Source: Internet
Author: User

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 ()

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.