Un breve análisis del uso e implementación del método bind () en JavaScript

Antes de discutir el método Bind (), echemos un vistazo a una pregunta:

var altWrite = document.write;

AltWrite ("Hola");

// 1. ¿Cuál es el problema con el código anterior?

// 2. ¿Cómo es la operación correcta?

// 3. Cómo implementar el método bind ()

Para la pregunta anterior, la respuesta no es demasiado difícil. El punto de prueba principal es el problema señalado por esto. La función altWrite () cambia esta señalización a los objetos globales o de la ventana, causando una llamada anormal durante la ejecución. La solución correcta es usar el método bind ():

AltWrite.bind (documento) ("Hola")

Por supuesto, también puede usar el método de llamada ():

AltWrite.call (documento, "Hola")

El enfoque de este artículo es discutir la implementación del método Bind () en el tercer número. Antes de comenzar a discutir la implementación de Bind (), echemos un vistazo al uso del método Bind ():

Función de enlace

La forma más fácil de usar Bind () es crear una función para que la función tenga el mismo valor, sin importar cómo se llame. Los errores comunes son como el ejemplo anterior, sacando el método del objeto, luego llamándolo y queriendo que esto apunte al objeto original. Si no se realiza un tratamiento especial, el objeto original generalmente se perderá. Usar el método Bind () puede resolver este problema maravillosamente:

 this.num = 9; var myModule = {num: 81, getNum: function () {return this.num; }}; module.getNum (); // 81Var getNum = módulo.getNum; getNum (); // 9, porque en este ejemplo, "esto" apunta al objeto global // crea una función que está vinculada al módulo var boundgetNum = getNum.bind (módulo); boundgetNum (); // 81

Funciones parciales

Las funciones parciales también se denominan aplicaciones parciales. Aquí hay una sección de definiciones sobre funciones parciales:

La aplicación parcial puede describirse como tomar una función que acepta un número de argumentos, valores vinculantes a uno o más de esos argumentos y devolver una nueva función que solo acepta los argumentos restantes de la ONU.

Esta es una buena característica. Usando bind () Establecemos los parámetros predefinidos de la función y luego pasamos en otros parámetros al llamar:

 funciones list () {return array.prototype.slice.call (argumentos);} var list1 = list (1, 2, 3); // [1, 2, 3] // Parámetro predefinido 37VAR liderando thirtysevenList = list.bind (indefinido, 37); var list2 = liderhirthirtysevenList (); // [37] var list3 = liderando thirtysevenList (1, 2, 3); // [37, 1, 2, 3]

Usar con SetTimeOut

En general, este setTimeOut () apunta a una ventana o objeto global. Al usar un método de clase, esto debe señalar a la instancia de clase, puede usar Bind () para unir esto a la función de devolución de llamada para administrar la instancia.

 function bloomer () {this.petalCount = Math.Ceil (Math.random () * 12) + 1;} // Llame a la función Declarar Bloomer.prototype.bloom = function () {Window.setTimeOut (this.Declare.bind (this), 1000);}; Bloomer.Prototype.Declare this.petalCount + 'Petal!');};

Nota: El método anterior también se puede utilizar para las funciones de manejo de eventos y los métodos SetInterval.

Función de enlace como constructor

Las funciones de enlace también son adecuadas para usar el nuevo operador para construir instancias de la función objetivo. Al usar funciones vinculantes para construir una instancia, tenga en cuenta: esto se ignorará, pero los parámetros aprobados aún están disponibles.

 punto de función (x, y) {this.x = x; this.y = y;} punto.prototype.ToString = function () {return this.x + ',' + this.y; }; var p = nuevo punto (1, 2); P.ToString (); // '1,2'var vacíaBj = {}; var yaxisPoint = punto.bind (vacíaBj, 0/*x*/); // Los ejemplos en la implementación no son compatibles, // es compatible con el enlace nativo: var yaxisPoint = punto.bind (nulo, 0/*x*/); var axisPoint = new YaxisPoint (5); axisPoint.ToString (); // '0,5'axispoint instancia de punto; // instancia de AxisPoint verdadero de yaxispoint; // Verdadero nuevo punto (17, 42) instancia de yaxisPoint; // verdadero

En el ejemplo anterior, Point y Yaxispoint comparten prototipos, por lo que es cierto cuando se juzga utilizando el Operador de instancia.

atajo

Bind () también puede crear accesos directos para funciones que requieren un valor específico de esto.

Por ejemplo, para convertir un objeto de matriz de una clase en una matriz real, los ejemplos posibles son los siguientes:

 var slice = array.prototype.slice; // ... slice.call (argumentos);

Si usa Bind (), la situación se vuelve más fácil:

 var unboundslice = array.prototype.slice; var slice = function.prototype.call.bind (unboundslice); // ... slice (argumentos);

lograr

En las secciones anteriores, puede ver que Bind () tiene muchos escenarios de uso, pero la función Bind () se agregó en la quinta versión de ECMA-262; Puede que no se ejecute en todos los navegadores. Esto requiere que implementemos la función bind () nosotros mismos.

Primero, simplemente podemos implementar el método bind () especificando el alcance a la función objetivo:

 Function.prototype.bind = function (context) {self = this; // Guardar esto, es decir, la función objetivo que llama al método de enlace devuelve function () {return self.apply (context, argumentos); };};

Teniendo en cuenta el curry de la función, podemos construir un enlace más robusto ()::

 Function.prototype.bind = function (context) {var args = array.prototype.slice.call (argumentos, 1), self = this; function de return () {var intargs = array.prototype.slice.call (argumentos); var finalmenteRargs = args.concat (innerargs); return self.apply (context, fininalArgs); };};

Esta vez, el método Bind () puede unir objetos y también admite parámetros de aprobación durante la unión.

Continuar, las funciones de JavaScript también se pueden usar como constructores. Cuando las funciones vinculadas se llaman de esta manera, la situación es más sutil y debe participar en el paso de la cadena prototipo:

 Function.prototype.bind = function (context) {var args = array.prototype.slice (argumentos, 1), f = function () {}, self = this, bound = function () {var intargs = array.prototype.slice.call (argumentos); var finalmenteRargs = args.concat (innerargs); return self.apply ((esta instancia de f? this: context), fininalArgs); }; F.Prototype = self.prototype; Bound.prototype = new f (); return Bound;};

Esta es la implementación de Bind () en el libro "Aplicación web JavaScript": al establecer un constructor de retransmisión F, la función unida está en la misma cadena de prototipo que la función llamando bind (). Use el nuevo operador para llamar a la función límite, y el objeto devuelto también puede usar InstanceOf normalmente. Por lo tanto, esta es la implementación más rigurosa de Bind ().

Para admitir la función Bind () en el navegador, solo necesita modificar la función anterior ligeramente:

 Function.prototype.bind = function (othis) {if (typeof thy! == "function") {throle new typeError ("function.prototype.bind: lo que está tratando de estar atado no es llamable"); } var aargs = array.prototype.slice.call (argumentos, 1), fTobind = this, fnop = function () {}, fbound = function () {return fTobind.apply (esta instancia de fnop && othis? this: othis || ventana, aargs.concat (array.pototype.slice.call); }; fnop.prototype = this.prototype; fbound.prototype = new Fnop (); regresar fbound; };

El breve análisis anterior del uso e implementación del método Bind () en JavaScript es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.