Uma breve análise do método de uso e implementação do bind () em JavaScript

Antes de discutir o método bind (), vamos dar uma olhada em uma pergunta:

var altwrite = document.write;

altwrite ("Olá");

// 1. Qual é o problema com o código acima?

// 2. Como é a operação correta

// 3. Como implementar o método bind ()

Para a pergunta acima, a resposta não é muito difícil. O principal ponto de teste é o problema apontado por isso. A função altWrite () altera esse apontamento para objetos globais ou de janela, causando uma chamada anormal durante a execução. A solução correta é usar o método bind ():

altwrite.bind (document) ("hello")

Obviamente, você também pode usar o método Call ():

altwrite.call (documento, "hello")

O foco deste artigo é discutir a implementação do método bind () na terceira edição. Antes de começarmos a discutir a implementação de Bind (), vamos dar uma olhada no uso do método bind ():

Função de ligação

A maneira mais fácil de usar o bind () é criar uma função para que a função tenha o mesmo valor, não importa como ela seja chamada. Erros comuns são como o exemplo acima, retirando o método do objeto, depois chamando -o e querendo que isso aponte para o objeto original. Se nenhum tratamento especial for feito, o objeto original geralmente será perdido. Usando o método bind () pode resolver esse problema lindamente:

 this.num = 9; var myModule = {num: 81, getNum: function () {return this.num; }}; module.getnum (); // 81var getNum = module.getnum; getNum (); // 9, porque neste exemplo, "isso" aponta para o objeto global // cria uma função que está ligada ao módulo var limitegetnum = getNum.bind (módulo); limitegnum (); // 81

Funções parciais

As funções parciais também são chamadas de aplicações parciais. Aqui está uma seção de definições sobre funções parciais:

A aplicação parcial pode ser descrita como uma função que aceita algum número de argumentos, valores vinculativos a um ou mais desses argumentos e retornando uma nova função que aceita apenas os argumentos restantes e unidos.

Este é um bom recurso. Usando o bind () definimos os parâmetros predefinidos da função e depois passamos em outros parâmetros ao ligar:

 Lista de funções () {return Array.prototype.slice.call (argumentos);} var list1 = list (1, 2, 3); // [1, 2, 3] // Parâmetro predefinido 37Var LeadThirTySevenList = list.Bind (indefinido, 37); var List2 = LeadThirTySevenList (); // [37] var list3 = LeadThirTysevenlist (1, 2, 3); // [37, 1, 2, 3]

Use com o setTimeout

Geralmente, esse setTimeout () aponta para uma janela ou objeto global. Ao usar um método de classe, isso precisa apontar para a instância da classe, você pode usar o bind () para ligá -lo à função de retorno de chamada para gerenciar a instância.

 function Bloomer() { this.petalCount = Math.ceil(Math.random() * 12) + 1;}// Call the declare function Bloomer.prototype.bloom = function() { window.setTimeout(this.declare.bind(this), 1000);};Bloomer.prototype.declare = function() { console.log('I have' + this.PetalCount + 'Petal!');};

Nota: O método acima também pode ser usado para funções de manuseio de eventos e métodos setInterval.

Vincular a função como construtor

As funções de ligação também são adequadas para usar o novo operador para construir instâncias da função objetiva. Ao usar funções de ligação para construir uma instância, observe: isso será ignorado, mas os parâmetros passados ​​ainda estão disponíveis.

 ponto de função (x, y) {this.x = x; this.y = y;} point.prototype.toString = function () {return this.x + ',' + this.y; }; var p = novo ponto (1, 2); p.toString (); // '1,2'Var emptyObj = {}; var yaxisPoint = Point.bind (empowobj, 0/*x*/); // exemplos na implementação não são suportados, // suportes de ligação nativa: var yaxispoint = Point.bind (null, 0/*x*/); var axispoint = novo yaxispoint (5); axispoint.toString (); // '0,5'AxisPoint InstanceOf Point; // True Axispoint Instância do yaxispoint; // True New Point (17, 42) Instância de Yaxispoint; // verdadeiro

No exemplo acima, o Point e o Yaxispoint compartilham protótipos, por isso é verdade quando julgado usando o operador da instância.

atalho

O bind () também pode criar atalhos para funções que exigem um valor específico disso.

Por exemplo, para converter um objeto de matriz de uma classe em uma matriz real, os possíveis exemplos são os seguintes:

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

Se você usar bind (), a situação se tornará mais fácil:

 var unclice = array.prototype.slice; var slice = function.prototype.call.bind (UNLIDLICLICE); // ... Slice (argumentos);

concluir

Nas seções acima, você pode ver que o bind () possui muitos cenários de uso, mas a função bind () foi adicionada na quinta versão do ECMA-262; Pode não ser executado em todos os navegadores. Isso exige que implementemos a função bind ().

Primeiro, podemos simplesmente implementar o método bind () especificando o escopo para a função objetivo:

 Function.prototype.bind = function (context) {self = this; // Salve isso, isto é, a função objetivo que chama o método de ligação retorna function () {return self.apply (contexto, argumentos); };};

Considerando o curry da função, podemos construir um bind mais robusto ():

 Function.prototype.bind = function (context) {var args = array.prototype.slice.call (argumentos, 1), self = this; return function () {var inerargs = array.prototype.slice.call (argumentos); var FinalArgs = args.Concat (Innerargs); return self.apply (context, FinalArgs); };};

Desta vez, o método bind () pode vincular objetos e também suporta parâmetros de passagem durante a ligação.

Continue, as funções JavaScript também podem ser usadas como construtores. Quando as funções vinculadas são chamadas dessa maneira, a situação é mais sutil e precisa estar envolvida na passagem da cadeia de protótipos:

 Function.prototype.bind = function (context) {var args = array.prototype.slice (argumentos, 1), f = function () {}, self = this, bound = function () {var inerargs = array.prototype.slice.call (argument); var FinalArgs = args.Concat (Innerargs); return self.apply (((esta instância de f? isto: contexto), FinalArgs); }; F.prototype = self.prototype; bound.prototype = new f (); retornar limitado;};

Esta é a implementação do Bind () no livro "Javascript Web Application": Ao definir um construtor de relé F, a função vinculada está na mesma cadeia de protótipo que o bind de chamada de função (). Use o novo operador para chamar a função vinculada e o objeto retornado também pode usar a instância de normalmente. Portanto, esta é a implementação mais rigorosa de Bind ().

Para suportar a função bind () no navegador, você só precisa modificar a função acima:

 Function.prototype.bind = function (othis) {if (typeof this! == "function") {tiro new typeError ("function.prototype.bind - o que está tentando ser amarrado não é chamável"); } var aargs = array.prototype.slice.call (argumentos, 1), ftobind = this, fnop = function () {}, fbound = function () {return ftobind.Apply (esta instância do FNOP && othis? }; fnop.prototype = this.prototype; fbound.prototype = new FNOP (); retornar fbound; };

A breve análise acima do uso e implementação do método bind () no JavaScript é todo o conteúdo que compartilho com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.