5 maneiras de chamar funções em JavaScript

Autor：Eve Cole Data da Última Atualização：2025-06-05 13:48:01

Este artigo apresenta os métodos e princípios de várias chamadas de função em JavaScript em detalhes, o que é de grande ajuda para entender as funções JavaScript!

JavaScript, 5 maneiras de chamar funções

Repetidas vezes, descobri que o código JavaScript sem erros é causado por não entender realmente como as funções do JavaScript funcionam (a propósito, grande parte desse código é escrita por mim). O JavaScript tem a natureza da programação funcional, que se tornará uma barreira ao nosso progresso quando optarmos por enfrentá -lo.

Como iniciantes, vamos testar cinco chamadas de função. Da superfície, pensaremos que essas funções são muito semelhantes às do C#, mas podemos ver que ainda existem diferenças muito importantes no futuro. Ignorar essas diferenças, sem dúvida, levará a bugs difíceis de rastrear. Primeiro, vamos criar uma função simples, que será usada abaixo, e essa função retorna apenas o valor atual deste e dos dois parâmetros fornecidos.

A cópia do código é a seguinte:

Função MakeArray (Arg1, Arg2) {

retornar [isso, arg1, arg2];

}

</script>

O método mais usado, mas infelizmente as chamadas de função global

Quando aprendemos JavaScript, aprendemos a definir funções usando a sintaxe no exemplo acima.

, Também sabemos que chamar essa função é muito simples, e tudo o que precisamos fazer é:

A cópia do código é a seguinte:

MakeArray ('One', 'Two');

// => [janela, 'um', 'dois']

Espere um minuto. O que é aquela janela

alerta (typeof window.methodthatdoesntexist);

// => indefinido

alerta (typeof window.makearray);

// =>

window.makearray ('One', 'dois');

// => [janela, 'um', 'dois']

Eu digo que o método mais comum de chamar é lamentável porque causa a função que declaramos ser global por padrão. Todos sabemos que os membros globais não são uma prática recomendada para a programação. Isso é particularmente correto no JavaScript. Você não se arrependerá de evitar membros globais em JavaScript.

Javascript Função Call Regra 1

Nas funções que não são chamadas diretamente por objetos explícitos do proprietário, como o MyFunction (), farão com que esse valor se torne o objeto padrão (janela no navegador).

Chamadas de função

Vamos criar um objeto simples agora, use a função MakeArray como seu método. Usaremos o método JSON para declarar um objeto, e também chamaremos esse método

A cópia do código é a seguinte:

// criando o objeto

var Arraymaker = {

AlgumProperty: 'algum valor aqui',

Faça: Makearray

};

// Invocar o método make ()

Arraymaker.make ('One', 'Two');

// => [Arraymaker, 'One', 'Two']

// Sintaxe alternativa, usando colchetes quadrados

Arraymaker ['Make'] ('One', 'Two');

// => [Arraymaker, 'One', 'Two']

Veja a diferença aqui, esse valor se torna o próprio objeto. Você pode se perguntar por que a definição de função original não mudou, por que não é janela. Bem, é assim que as funções são passadas em Jsavar. As funções são um tipo de dados padrão no JavaScript, ou para ser preciso, um objeto. Você pode passá -los ou copiá -los. É como se toda a função e a lista de parâmetros e o corpo da função fossem copiados e atribuídos à propriedade fabricada no fabricante de matrizes, por isso é como definir um fabricante de arranjos como este:

A cópia do código é a seguinte:

var Arraymaker = {

AlgumProperty: 'algum valor aqui',

make: function (arg1, arg2) {

retornar [isso, arg1, arg2];

}

};

Javascript Função Call Regra 2

Em uma sintaxe de chamada de método, como obj.myfunction () ou obj ['myfunction'] (), o valor disso é obj

Esta é a principal fonte de bugs no código de manuseio de eventos. Dê uma olhada nesses exemplos

A cópia do código é a seguinte:

função buttonClicked () {

Var text = (this === Window)? 'janela': this.id;

alerta (texto);

}

var button1 = document.getElementById ('BTN1');

var button2 = document.getElementById ('btn2');

button1.OnClick = ButtonClicked;

button2.OnClick = function () {buttonClicked (); };

</script>

Clicar no primeiro botão exibirá "BTN" porque é uma chamada de método, este é o objeto ao qual pertence (elemento do botão). Clicar no segundo botão exibirá "Window" porque o ButtonClicked é chamado diretamente (diferentemente do obj.ButtonClicked ().) Este é o mesmo que o terceiro botão, que coloca a função de manuseio de eventos diretamente no rótulo. Portanto, o resultado de clicar no terceiro botão é o mesmo que o segundo.

O uso da biblioteca JS como o JQuery tem a vantagem. Quando um manipulador de eventos é definido no jQuery, a biblioteca JS ajudará a substituir esse valor para garantir que ele contém referências ao elemento de origem do evento atual.

A cópia do código é a seguinte:

// Use jQuery

$ ('#BTN1'). Clique (function () {

alerta (this.id); // jQuery garante que 'this' será o botão

});

Como o jQuery sobrecarrega o valor disso? Continue lendo

Os outros dois: aplicar () e chamar ()

Quanto mais você usa as funções JavaScript, mais você achar que precisa passar funções e chamá -las em diferentes contextos. Assim como o QJuery faz nas funções de manuseio de eventos, você geralmente precisa redefinir esse valor. Lembre -se do que eu disse, nas funções JavaScript também são objetos. Os objetos de função contêm alguns métodos predefinidos, dois dos quais são aplicados () e Call (), que podemos usar para redefinir isso.

A cópia do código é a seguinte:

var gasguzzler = {ano: 2008, modelo: 'Dodge resgate'};

MakeArray.Apply (Gasguzzler, ['One', 'Two']);

// => [Gasguzzler, 'One', 'Two']

MakeArray.Call (Gasguzzler, 'One', 'Two');

// => [Gasguzzler, 'One', 'Two']

Esses dois métodos são semelhantes, a diferença é a diferença nos seguintes parâmetros. Function.apply () usa uma matriz para passar para a função, enquanto function.call () passa esses parâmetros de forma independente. Na prática, você descobrirá que o aplicativo () é mais conveniente na maioria dos casos.

JSAVARScript Função Call Regra 3

Se queremos sobrecarregar o valor disso sem copiar a função para um método, podemos usar o myfunction.apply (obj) ou myfunction.call (obj).

Construtor

Não quero investigar a definição de tipos em JavaScript, mas neste momento precisamos saber que não há classe em JavaScript, e qualquer tipo personalizado requer uma função de inicialização. Também é uma boa idéia definir seu tipo usando um objeto de protótipo (como uma propriedade da função de inicialização). Vamos criar um tipo simples

A cópia do código é a seguinte:

// declarar um construtor

Função Arraymaker (Arg1, Arg2) {

this.omeproperty = 'qualquer coisa';

this.TheArray = [this, arg1, arg2];

}

// Declare o método de instanciação

Arraymaker.prototype = {

Somemethod: function () {

alerta ('Somemethod chamado');

getArray: function () {

devolver isso.HEARRAY;

}

};

var am = new Arraymaker ('One', 'dois');

var o outro = new Arraymaker ('primeiro', 'segundo');

am.getArray ();

// => [am, 'um', 'dois']

Um muito importante e digno de nota é o novo operador que aparece na frente de uma chamada de função. Sem isso, sua função é como uma função global, e as propriedades que criamos serão criadas em um objeto global (janela) e você não deseja fazer isso. Outro tópico é que, como não há valor de retorno no seu construtor, se você esquecer de usar o novo operador, algumas de suas variáveis serão atribuídas indefinidas. Por esse motivo, é um bom hábito começar com letras maiúsculas. Isso pode ser usado como um lembrete para não esquecer o novo operador anterior ao ligar.

Com essa cautela, o código na função de inicialização é semelhante à função de inicialização que você escreveu em outros idiomas. O valor disso será o objeto que você criará.

Javascript Função Call Regra 4

Quando você usa uma função como uma função de inicialização, como o MyFunction (), o Javascript Runtime especificará o valor disso como um objeto recém -criado.

Espero que a compreensão das diferenças nas várias funções que chama de métodos mantenha seu código SjavaScript longe dos bugs, e alguns desses bugs garantirão que você sempre saiba que o valor disso é o primeiro passo para evitá -los.