JavaScriptの関数関数-jsチュートリアル-php.cn

JavaScriptの関数関数

PHPz

リリース： 2018-09-29 09:49:37

オリジナル

5171 人が閲覧しました

関数は、イベント駆動型または呼び出されたときに実行される再利用可能なコードのブロックです。次に、エディターに従って JavaScript の関数関数を学習してください。 learn

まず、JavaScript で関数を定義するいくつかの方法を紹介します。

1.最も基本的なもの別個の関数宣言として使用されます。

コードは次のとおりです:

function func(){

ログイン後にコピー

または

var func=function(){}

ログイン後にコピー

2. クラスコンストラクターとして使用します:

function class(){}
class.prototype={};
var item=new class();

ログイン後にコピー

3. クロージャとして使用します:

(function(){
//独立作用域
})();

ログイン後にコピー

4. :

var addEvent=new function(){
   if(!-[1,]) 
      return  function(elem,type,func){
         attachEvent(elem,&#39;on&#39;+type,func);
      };
   else 
      return function(elem,type,func){
          addEventListener(elem,type,func,false);
      }
};//避免了重复判断

ログイン後にコピー

5. 上記 4 つの状況の混合適用:

var class=new function(){
var privateArg;//静态私有变量
function privateMethod=function(){};//静态私有方法
return function(){/*真正的构造器*

ログイン後にコピー

JavaScript 関数関数の種類: 主に通常関数、匿名関数、クロージャ関数を紹介します

1. 通常関数の紹介

1.1 例

function ShowName(name) {
 alert(name);
}

ログイン後にコピー

1.2 Js での同名関数の適用範囲

Js では、同じ関数名で異なる関数は多重定義されません。パラメータシグネチャ、および次の関数は前の関数を上書きします。呼び出された場合、次の関数のみが呼び出されます。

var n1 = 1;
function add(value1) {
 return n1 + 1;
}
alert(add(n1));//调用的是下面的函数，输出：3
function add(value1, value2) {
 return value1 + 2;
}
alert(add(n1));//输出：3

ログイン後にコピー

1.3 引数オブジェクト

arguments は C# の params に似ており、変数パラメータを操作します。関数に渡されるパラメータの数は、数量を定義したときのパラメータ。

function showNames(name) {
 alert(name);//张三
 for (var i = 0; i < arguments.length; i++) {
  alert(arguments[i]);//张三、李四、王五
 }
}
showNames(&#39;张三&#39;,&#39;李四&#39;,&#39;王五&#39;);

ログイン後にコピー

1.4 関数のデフォルト範囲値

関数が戻り値を指定しない場合、デフォルトの戻り値は '未定義'

function showMsg() {
}
alert(showMsg());//输出：undefined

ログイン後にコピー

2. 匿名関数

2.1 変数匿名関数

2.1.1 説明

関数は変数とイベントに割り当てられます。

2.1.2 例

//变量匿名函数，左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
 alert(p1+p2);
}
anonymousNormal(3,6);//输出9

ログイン後にコピー

2.1.3 適用可能なシナリオ

①関数名の汚染を避けます。最初に名前を付けて関数を宣言し、それを変数またはイベントに割り当てると、関数名を悪用することになります。

2.2 名前のない匿名関数

2.2.1 説明
は関数が宣言され、その後にパラメーターが続きます。 JS 構文がこの関数を解析すると、内部のコードがすぐに実行されます。

2.2.2 例

(function (p1) {
 alert(p1);
})(1);

ログイン後にコピー

2.2.3 適用可能なシナリオ

①一度実行するだけで済みます。ブラウザがロードされている場合、関数は 1 回実行するだけで済み、その後は実行されません。

3. クロージャ関数

3.1 説明

関数 A が内部で関数 B を宣言し、関数 B が関数 B の外部を参照しているとします。関数 A の戻り値は関数 B への参照です。この場合、関数 B はクロージャ関数です。

3.2 例

3.2.1 例 1: グローバル参照とローカル参照

function funA() {
 var i = 0;
 function funB() { //闭包函数funB
  i++;
  alert(i)
 }
 return funB;
}
var allShowA = funA(); //全局变量引用：累加输出1,2,3,4等
function partShowA() {
 var showa = funA();//局部变量引用：只输出1
 showa();
}

ログイン後にコピー

allShowA はグローバル変数であり、関数 funA を参照します。 allShowA()を繰り返し実行すると、1、2、3、4などの累積値が出力されます。

関数 partShowA() を実行します。ローカル変数 showa のみが funA を参照するために内部で宣言されているため、実行後、showa によって占有されていたリソースはスコープにより解放されます。

クロージャの鍵はスコープです。グローバル変数によって占有されているリソースは、ページが変更されるかブラウザが閉じられるときにのみ解放されます。 var allShowA = funA() の場合、allShowA が funB() を参照するのと同等であるため、funB() 内のリソースは GC によってリサイクルされず、したがって funA() 内のリソースもリサイクルされません。

3.2.2 例 2: パラメトリッククロージャー関数

function funA(arg1,arg2) {
 var i = 0;
 function funB(step) {
  i = i + step;
  alert(i)
 }
 return funB;
}
var allShowA = funA(2, 3); //调用的是funA arg1=2，arg2=3
allShowA(1);//调用的是funB step=1,输出 1
allShowA(3);//调用的是funB setp=3,输出 4

ログイン後にコピー

3.2.3 例 3: 親関数 funA 内の変数共有

function funA() {
 var i = 0;
 function funB() {
  i++;
  alert(i)
 }
 allShowC = function () {// allShowC引用匿名函数,与funB共享变量i
  i++;
  alert(i)
 }
 return funB;
}
var allShowA = funA();
var allShowB = funA();//allShowB引用了funA，allShowC在内部重新进行了绑定，与allShowB共享变量i

ログイン後にコピー

3.3 該当するシナリオ

funA の変数は外部から直接アクセスできないため、関数 funA 内の変数の安全性を確保してください。

上記の内容は、この記事の js 関数の紹介です。その他の関連チュートリアルについては、JavaScript ビデオチュートリアルをご覧ください。