ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScript関数を記述するにはどのような方法がありますか?

JavaScript関数を記述するにはどのような方法がありますか?

青灯夜游
リリース: 2023-01-04 09:36:10
オリジナル
2602 人が閲覧しました

関数の書き方: 1. "関数 関数名(){}"; 2. "var 関数名 = function(){}"; 3. "(function(){...}) ()" ;4. "(function(){...}())"; 5. "$(function(){})"。

JavaScript関数を記述するにはどのような方法がありますか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript は他のプログラミング言語に比べてカジュアルなので、JavaScript コードにはあらゆる種類の奇妙な書き方が満載で、単に曖昧な場合もあります。この記事では JavaScript 関数の書き方について説明します。

JavaScript にはオブジェクトしかありません。変数もオブジェクトであり、関数もオブジェクトです。オブジェクトが何であるかを知っていれば、それをその用途どおりに使用するだけです。

JavaScript は弱く型指定されており、オブジェクト、インスタンス、関数、およびメソッドはユニバーサルです。区別はそれほど明確である必要はありません。

1. 従来の書き方:

// 函数的定义
function foo() {
    alert('常规写法');
}
// 函数的调用
foo()
ログイン後にコピー

この書き方は、最も馴染みがあり、理解しやすい書き方と呼び出し方法です。

#2. 匿名関数の書き方

// 函数的定义
var foo = function(){
    alert('匿名函数定义');
}
// 函数的调用
foo()
ログイン後にコピー

関数定義は匿名化されるため、名前を付ける手間が省けます。次に、

#3. メソッドをオブジェクトとして使用する## を参照してください。 #

// 定义
var test = {
    fun1: function(){  },
    fun2: function(){  }
}
// 调用
test.fun1();
test.fun2();
ログイン後にコピー
in Javascript の変数は非常に強力で、多くのものを表すことができます。

4. コンストラクターでオブジェクトにメソッドを追加します。

// 给对象添加方法
var fun = function(){ };  // 定义函数对象
fun.prototype.test = function(){ 
    alert('这是在在foo函数上的原始对象上添加test方法,构造函数中用到');
}

// 调用
var myfun = new fun(); // 创建对象
myfun.test(); // 调用对象属性
ログイン後にコピー
prototype キーワードを使用してメソッドを追加します。

5. 自己実行関数 ( function(){…} )() および ( function(){…} () )

# 前述の関数の定義と呼び出しは分離されていますが、ここですぐに説明する定義と実行は一緒に行われます。

( function(){…} )() と ( function(){…} () ) は、すぐに実行する JavaScript 関数を記述する 2 つの一般的な方法です。最初は、ラップされた匿名関数だと思いました。括弧内に括弧を追加して関数を呼び出すことで、最終的には関数を定義した直後に実行するという目的を達成できましたが、括弧を追加した理由は同じではなかったことが後で判明しました。関数の即時実行を理解するには、まず関数の基本概念をいくつか理解する必要があります。

関数宣言、関数式、匿名関数

関数宣言

: function fnName () {…}; function キーワードを使用して宣言します。 function を選択し、

関数宣言という関数名を指定します。 関数式

var fnName = function () {…};functionキーワードを使用して関数を宣言しますが、関数に名前を付けないでください。最後に、匿名関数を

関数式 と呼ばれる変数。これは関数式の最も一般的な構文形式です。 匿名関数

: function () {}; function キーワードを使用して関数を宣言しますが、関数に名前を付けないため、匿名関数と呼ばれます。匿名関数には多くの関数があり、変数を代入すると関数が作成され、イベントを代入するとイベント ハンドラーになったり、クロージャが作成されたりします。

関数宣言と関数式の違いは、

1. JavaScript エンジンは、JavaScript コードを解析するときに、現在の実行環境 (スコープ) を「関数宣言をホイスティング」します。関数宣言はオン、関数式は、Javascirtp エンジンがその行まで実行されるまで待機する必要があり、その後、関数式は上から下に行ごとに解析されます。

2. 関数式の後に括弧を追加できます。この関数を呼び出すには、関数宣言は許可されず、fnName() の形式でのみ呼び出すことができます。違いの 2 つの例を次に示します。

// 方式1: ( function(){…} () )
(
     function(){alert('hello world, I am coming');}()
);
// 函数有参数的情况,有时为确保执行,前面加;
// 看到别人的插件,你会发现人家开头处加了一个";",这样就算页面js有错误,加载运行他的插件也能保证运行,如:
;(function(e){alert(e);}('hello world'));

// 方式2:( function(){…} )()
(function(){alert('hello');})();

// 有时在前面加运算符,常见的是!与void
!function(){alert('hello');}();
void function(){alert(2);}();
ログイン後にコピー

6 $(function(){})Writing

$ (function(){/

/}); は <em>$(document).ready(function(){/</em>…/}) の略称で、DOM のロード後に実行されます。 . コールバック関数は 1 回だけ実行されます。 <em><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">$( document ).ready(function() { console.log( &quot;ready!&quot; ); });</pre><div class="contentsignin">ログイン後にコピー</div></div></em> は、次の記述と同等です

$(function() {
   console.log( "ready!" );
});
ログイン後にコピー
1 ページ上の異なる js で記述された

$(function(){/

/}); 関数はjsの順序に従って順次実行されます。 <em></em>[推奨学習: JavaScript 上級チュートリアル

]

以上がJavaScript関数を記述するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート