面向对象的JavaScript-006-Function.prototype.bind() 的4种作用

              1
            //
             Function.prototype.bind() 的作用
              2
              3
            //
             1.Creating a bound function
              4
            this.x = 9; 
  5var module = {
  6       x: 81,
  7       getX: function() { returnthis.x; }
  8    };
  9 10     console.log(module.getX()); // 81 11 12var retrieveX = module.getX;
 13    console.log(retrieveX()); 
 14// 9, because in this case, "this" refers 15// to the global object 16 17// Create a new function with ‘this‘ bound to module 18// New programmers might confuse the 19// global var x with module‘s property x 20var boundGetX = retrieveX.bind(module);
 21     console.log(boundGetX()); // 81 22 23// 2.Partially applied functions 24 25// The next simplest use of bind() is to make a function with pre-specified initial arguments. These arguments (if any) follow the provided this value and are then inserted at the start of the arguments passed to the target function, followed by the arguments passed to the bound function, whenever the bound function is called. 26function list() {
 27return Array.prototype.slice.call(arguments);
 28    }
 29 30var list1 = list(1, 2, 3); // [1, 2, 3] 31    console.log(list1);
 32// Create a function with a preset leading argument 33var leadingThirtysevenList = list.bind(undefined, 37);
 34    console.log(leadingThirtysevenList);
 35var list2 = leadingThirtysevenList(); 
 36// [37] 37    console.log(list2);
 38var list3 = leadingThirtysevenList(1, 2, 3);
 39// [37, 1, 2, 3] 40    console.log(list3);
 41 42// 3.With setTimeout 43 44//y default within window.setTimeout(), the this keyword will be set to the window (or global) object. When working with class methods that require this to refer to class instances, you may explicitly bind this to the callback function, in order to maintain the instance. 45function LateBloomer() {
 46this.petalCount = Math.ceil(Math.random() * 12) + 1;
 47    }
 48 49// Declare bloom after a delay of 1 second 50     LateBloomer.prototype.bloom = function() {
 51       window.setTimeout(this.declare.bind(this), 1000);
 52    };
 53 54     LateBloomer.prototype.declare = function() {
 55       console.log(‘I am a beautiful flower with ‘ +
 56this.petalCount + ‘ petals!‘);
 57    };
 58 59var flower = new LateBloomer();
 60    flower.bloom();  
 61// after 1 second, triggers the ‘declare‘ method 62 63// 3.Bound functions used as constructors 64// Bound functions are automatically suitable for use with the new operator to construct new instances created by the target function. When a bound function is used to construct a value, the provided this is ignored. However, provided arguments are still prepended to the constructor call: 65function Point(x, y) {
 66this.x = x;
 67this.y = y;
 68    }
 69 70     Point.prototype.toString = function() { 
 71returnthis.x + ‘,‘ + this.y; 
 72    };
 73 74var p = new Point(1, 2);
 75     p.toString(); // ‘1,2‘ 76 77// not supported in the polyfill below, 78 79// works fine with native bind: 80 81var YAxisPoint = Point.bind(null, 0/*x*/);
 82 83 84var emptyObj = {};
 85var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
 86 87var axisPoint = new YAxisPoint(5);
 88     axisPoint.toString(); // ‘0,5‘ 89 90     console.log(axisPoint instanceof Point); // true 91     console.log(axisPoint instanceof YAxisPoint); // true 92     console.log(new Point(17, 42) instanceof YAxisPoint); // true 93 94// Example can be run directly in your JavaScript console 95// ...continuing from above 96 97// Can still be called as a normal function  98// (although usually this is undesired) 99     console.log(YAxisPoint(13));
100101     console.log(emptyObj.x + ‘,‘ + emptyObj.y);
102// >  ‘0,13‘103104// 4.Creating shortcuts105var slice = Array.prototype.slice;
106107// ...108109    slice.apply(arguments);
110// same as "slice" in the previous example111var unboundSlice = Array.prototype.slice;
112var slice = Function.prototype.apply.bind(unboundSlice);
113114// ...115116    slice(arguments);
117118// Polyfill119// The bind function is an addition to ECMA-262, 5th edition; as such it may not be present in all browsers. You can partially work around this by inserting the following code at the beginning of your scripts, allowing use of much of the functionality of bind() in implementations that do not natively support it.120if (!Function.prototype.bind) {
121       Function.prototype.bind = function(oThis) {
122if (typeofthis !== ‘function‘) {
123// closest thing possible to the ECMAScript 5124// internal IsCallable function125thrownew TypeError(‘Function.prototype.bind - what is trying to be bound is not callable‘);
126        }
127128var aArgs   = Array.prototype.slice.call(arguments, 1),
129             fToBind = this,
130             fNOP    = function() {},
131             fBound  = function() {
132return fToBind.apply(thisinstanceof fNOP
133                      ? this134                     : oThis,
135                     aArgs.concat(Array.prototype.slice.call(arguments)));
136            };
137138if (this.prototype) {
139// Function.prototype doesn‘t have a prototype property140           fNOP.prototype = this.prototype; 
141        }
142         fBound.prototype = new fNOP();
143144return fBound;
145      };
146     }