Explicação detalhada do uso de aplicar e chamar em js

Prefácio

Ligue e aplique os dois existem para alterar o contexto , ou seja, o contexto, quando uma função é executada. Em outras palavras, é alterar a direção disso dentro do corpo da função .

A função de chamada e aplicação é exatamente a mesma, mas a maneira de aceitar parâmetros é diferente.

Definição do método

aplicar

Function.apply(obj,args) pode receber dois parâmetros:

OBJ: Este objeto substituirá este objeto na classe de função

Args: Esta é uma matriz ou matriz de classe. O método Aplicar passa os elementos nesta coleção como parâmetros para a função chamada.

chamar

O primeiro parâmetro do método de chamada é o mesmo que o método de aplicação , exceto que o segundo parâmetro é uma lista de parâmetros

No modo não estrito, quando nosso primeiro parâmetro é passado como nulo ou indefinido, isso no corpo da função apontará para o objeto de host padrão e, no navegador, é a janela

 var test = function () {console.log (this === Window);} test.apply (null); // truetest.call (indefinido); // true

uso

Como "sequestrar" outros

Neste momento, o método de nome de log em Foo será referenciado por barra, isso aponta para a barra

 var foo = {name: "mingming", logname: function () {console.log (this.name); }} var bar = {name: "xiaowang"}; foo.Logname.call (bar); // xiaowang

Perceber herança

 função animal (nome) {this.name = name; this.showname = function () {console.log (this.name); }} função gat (nome) {animal.call (this, nome); } var cat = new Cat ("Black Cat"); cat.showName (); // Black Cat

No desenvolvimento real, isso é frequentemente encontrado em alterações inadvertidamente em cenários.

Existe um método de diversão local. Quando a diversão é chamada como uma função normal, essa diversão interna aponta para a janela , mas geralmente queremos que ela aponte para o nó #Test , consulte o seguinte código:

 window.id = "window"; document.QuerySelector ('#test'). OnClick = function () {console.log (this.id); // teste var FUN FURN = FUNCHE () {console.log (this.id); } diversão (); // janela}

Usando a chamada, aplique, podemos resolver facilmente este problema

 window.id = "window"; document.QuerySelector ('#test'). OnClick = function () {console.log (this.id); // teste var FUN FURN = FUNCHE () {console.log (this.id); } fun.call (this); // teste}

É claro que você pode fazer isso, mas no Ecmascript 5 Modo Estrito , neste caso foi especificado que não apontará para o objeto global, mas é indefinido:

 window.id = "Window"; document.QuerySelector ('#teste'). OnClick = function () {var que = this; console.log (this.id); // teste var FUN = function () {console.log (that.id); } diversão (); // teste}

 function func () {"use alerta rigoroso" (this); // saída: indefinido} func ();

Outros usos

Array de aula

Aqui, objetos que atendem às seguintes condições são chamados de matrizes de classe

1. Tenha atributo de comprimento

2. Armazene os dados de acordo com o índice

3. Push, pop e outros métodos que não têm matrizes

Matrizes comuns de aulas incluem argumentos e NodElist!

 (function () {Array.prototype.push.call (argumentos, 4); console.log (argumentos); // [1, 2, 3, 4]}) (1,2,3)

Dessa forma, empurre um 4 nos argumentos

Array.prototype.push pode implementar a combinação de duas matrizes

O método push não fornece push uma matriz, mas fornece push (param1, param,… paramn) para que você também possa instalar e substituir a matriz aplicando, ou seja::

 var Arr1 = nova matriz ("1", "2", "3"); var Arr2 = novo Array ("4", "5", "6"); Array.prototype.push.apply (ARR1, ARR2); console.log (arr1); // ["1", "2", "3", "4", "5", "6"]

Também pode ser entendido dessa maneira, o ARR1 chama o método push e os parâmetros são substituídos aplicando o conjunto da matriz em um conjunto de listas de parâmetros.

Por exemplo, quero encontrar o valor máximo na matriz de classe

 (function () {var maxnum = math.max.apply (null, argumentos); console.log (maxnum); // 56}) (34,2,56);

Tipo de juiz

 console.log (object.prototype.toString.Call (123)) // [número do objeto] console.log (object.prototype.tostring.call ('123')) // [object string] console.log (object.prototype.tostring.call (indefinido) // Indefinido] console.log (object.prototype.toString.Call (true)) // [objeto booleano] console.log (object.prototype.tostring.call ({})) // [objeto] console.log (object.prototype.tostring.call ([]) Array] console.log (object.prototype.tostring.call (function () {})) // [função do objeto]

O exposto acima é o conteúdo completo do resumo do uso de aplicação e chamada. Todos podem deixar uma mensagem para participar da discussão. Espero também que este artigo seja útil para todos para aprender JavaScript.