Uso inteligente de aplicar, chamar e vincular em javascript

Aplique, ligue

No JavaScript, a chamada e a aplicação existem para alterar o contexto (contexto) de uma função quando ele é executado. Em outras palavras, é alterar a direção disso dentro do corpo da função.

Uma característica importante do JavaScript é que as funções têm os conceitos de "contexto de definição" e "contexto de tempo de execução" e "contexto pode ser alterado".

Vamos primeiro pegar uma castanha:

 function fruits () {} frutit.prototype = {color: "vermelho", digamos: function () {console.log ("minha cor é" + this.color);}} var app = novos frutos; apple.say (); // minha cor é vermelha

Mas se tivermos um objeto banana = {color: "Yellow"}, e não queremos redefinir o método Say para ele, podemos usar o método Say of Apple de acordo com a chamada ou aplicar:

 banana = {color: "amarelo"} Apple.say.call (banana); // minha cor é Yellowapple.say.Apply (banana); // minha cor é amarela

Portanto, pode -se ver que a chamada e aplicação parecem alterar dinamicamente isso. Quando um objeto não possui um determinado método (a banana não diz o método nessa castanha), mas outros são (a Apple tem um método Say nessa castanha), podemos usar a chamada ou aplicá -lo para operá -lo com outros métodos de objeto.

A diferença entre aplicar e ligar

Para aplicar e chamar, as funções são exatamente as mesmas, mas os métodos de aceitação de parâmetros são diferentes. Por exemplo, há uma função definida da seguinte forma:

 var func = function (arg1, arg2) {};

Você pode chamá -lo da seguinte maneira:

 func.call (this, arg1, arg2); func.apply (this, [arg1, arg2])

Onde este é o contexto que você deseja especificar, pode ser qualquer objeto JavaScript (tudo no JavaScript é um objeto), a chamada precisa passar os parâmetros em ordem e aplicar meios para colocar parâmetros na matriz.

No JavaScript, o número de parâmetros de uma função não é corrigido; portanto, se você quiser dizer as condições aplicáveis, use a chamada quando seus parâmetros forem claramente conhecidos.

Quando você não tiver certeza, use aplique e depois empurre o parâmetro para a matriz e passe -o. Quando o número de parâmetros é incerto, todos os parâmetros também podem ser percorridos pela matriz pseudo de argumentos dentro da função.

Para consolidar e aprofundar a memória, a seguir são alguns usos comuns:

Anexar a matrizes

 var Array1 = [12, "Foo", {Nome "Joe"}, -2458]; var Array2 = ["Doe", 555, 100]; Array.prototype.push.apply (Array1, Array2); / * Array1 O valor é [12, "foo", {nome "joe"}, -2458, "doe", 555, 100] */

Obtenha os valores máximo e mínimo na matriz

 Var números = [5, 458, 120, -215]; var maxinnumbers = math.max.apply (matemática, números), // 458MaxinMumbers = Math.max.call (Math, 5, 458, 120, -215); // 458

O número em si não possui um método Max, mas a matemática possui, para que possamos usar seu método com chamada ou aplicação.

Verifique se é uma matriz (desde que o método tostring () não tenha sido reescrito)

 functionIarray (obj) {return object.prototype.tostring.call (obj) === '[objeto Array]';}

Matriz de classe (pseudo) usando o método da matriz

 var dominodes = array.prototype.slice.call (document.getElementsByTagName ("*"));

Existe uma estrutura de objeto chamada pseudo-matriz em JavaScript. O que é mais especial é o objeto de argumentos, e há também aqueles que chamam getElementsByTagName, document.Childnodes etc., que retornam objetos nodelistas, todos pertencem a pseudo-maiores. Você não pode usar o push, o pop e outros métodos em Array.

Mas podemos converter o Array.prototype.slice.call em uma matriz real com o objeto com o atributo de comprimento, para que os Domnodes possam aplicar todos os métodos em matriz.

Entenda profundamente e use aplicar e ligar

Vamos pedir emprestado uma pergunta de entrevista para entender se aplicar e chamar mais profundamente.

Defina um método de log para que ele possa procurar o método do console.log. A solução comum é:

 Função log (msg) {console.log (msg);} log (1); // 1log (1,2); // 1

O método acima pode resolver as necessidades mais básicas, mas quando o número de parâmetros passados é incerto, o método acima falhará. Neste momento, você pode considerar usar o aplicativo ou a chamada. Observe que o número de parâmetros passados aqui é incerto, por isso é melhor usar o Aplicar. O método é o seguinte:

 Função log () {console.log.apply (console, argumentos);}; log (1); // 1log (1,2); // 1 2

O próximo requisito é adicionar um abandono "(aplicativo)" a cada mensagem de log, como:

 log ("Hello World"); // (App) Hello World

Como fazer isso com mais elegância? Neste momento, você precisa pensar que o parâmetro de argumentos é um pseudo-gray, que é convertido em uma matriz padrão através do Array.prototype.slice.call e, em seguida, o método da matriz não é deste: assim:

 function log () {var args = array.prototype.slice.call (argumentos); args.unshift ('(app)'); console.log.apply (console, args);};

vincular a explicação detalhada

Depois de falar sobre aplicar e ligar, vamos falar sobre Bind. O método bind () é muito semelhante à aplicação e chamada, e também pode alterar o apontamento disso no corpo da função.

A explicação do MDN é: o método bind () criará uma nova função, chamada função de ligação. Quando essa função de ligação for chamada, a função de ligação usará o primeiro parâmetro do método bind () quando for criado assim, e o segundo parâmetro do método bind () e os parâmetros subsequentes mais os parâmetros da função de ligação em si como os parâmetros da função original em ordem para chamar a função original.

Vamos dar uma olhada em como usá -lo. No modo de monômero comum, geralmente usamos isso, isso, eu, etc. para salvar isso para que possamos continuar a fazer referência após alterar o contexto. Assim:

 var foo = {bar: 1, eventbind: function () {var _This = this; $ ('. Someclass').

Devido ao mecanismo específico do JavaScript, o ambiente de contexto mudou no EventBind: function () {} para $ ('. Someclass'). Os métodos acima para usar variáveis para salvar isso são úteis e não há problema. Obviamente, o uso de bind () pode resolver esse problema com mais elegância:

 var foo = {bar: 1, eventbind: function () {$ ('. Someclass').

No código acima, o bind () cria uma função. Quando este evento de cliques for chamado, sua palavra -chave será definida como o valor passado (aqui refere -se aos parâmetros passados quando o bind () é chamado). Portanto, aqui passamos no contexto desejado essa (na verdade, foo) para a função bind (). Então, quando a função de retorno de chamada é executada, isso aponta para o objeto Foo. Outra castanha simples:

 var bar = function () {console.log (this.x);} var foo = {x: 3} bar (); // undefinedvar func = bar.bind (foo); func (); // 3

Aqui criamos uma nova função func. Ao usar o bind () para criar uma função de ligação, quando é executada, isso será definido como foo, em vez do escopo global, como quando chamamos a barra ().

Há uma pergunta interessante. Se bind () é duas vezes em uma linha ou bind () é três vezes em uma linha, qual é o valor de saída? Assim:

 var bar = function () {console.log (this.x);} var foo = {x: 3} var sed = {x: 4} var func = bar.bind (foo) .bind (sed); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //? var fiv = {x: 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); //?

A resposta é que as duas vezes ainda serão lançadas 3 em vez dos 4 e 5 esperados. O motivo é que, no JavaScript, várias vezes Bind () é inválido. Por um motivo mais profundo, a implementação de Bind () é equivalente a usar uma função para envolver uma chamada / aplicar internamente. O segundo bind () é equivalente a embrulhar o primeiro bind () novamente, portanto o bind após a segunda vez não pode entrar em vigor.

Aplicar, ligar, comparar a comparação

Então, quais são as diferenças e diferenças entre aplicar, chamar e vincular? Quando usar aplicar, chamar e quando usar o bind. Uma castanha simples:

 var obj = {x: 81,}; var foo = {getx: function () {return this.x;}} console.log (foo.getx.bind (obj) ()); //81console.log(foo.getx.call(obj)); //81console.log(foo.getx.apply(obj)); //81console.log(foo.getx.apply(obj)); //81console.log(foo.getx.apply(obj)); // 81

Todas as três saídas são 81, mas preste atenção ao método Bind (), que possui mais colchetes depois.

Ou seja, a diferença é que, quando você deseja alterar o contexto, não executar imediatamente, mas os retornos de chamada, use o método bind (). Aplicar/chamada executa a função imediatamente.

Vamos resumir novamente:

• Aplicar, ligar, vincular são todos usados para alterar o apontar desse objeto da função;

• Os primeiros parâmetros de aplicação, chamada e ligação são os objetos que isso deseja apontar, ou seja, o contexto que você deseja especificar;

• Aplicar, ligar e ligar podem usar parâmetros subsequentes para passar os parâmetros;

• Vincular retorna a função correspondente, que é fácil de chamar posteriormente; Aplicar e a chamada são chamados imediatamente.

O exposto acima é o uso inteligente de aplicar, chamar e vincular no JavaScript introduzido a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!