JavaScript関数の書き方

醉折花枝作酒筹
リリース: 2023-01-06 11:17:28
オリジナル
5282 人が閲覧しました

Javascript 関数の記述方法は、 1. 従来の記述方法「関数 関数名() {js コード} 関数名()」 2. $(関数(){}) の記述方法 「$(オブジェクト) .ready(function() {js コード});"。

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();
ログイン後にコピー

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 キーワードを使用して関数を宣言し、関数名を指定します。関数宣言。

関数式 var fnName = function () {…}; function キーワードを使用して関数を宣言しますが、関数に名前を付けないでください。最後に、匿名関数が関数と呼ばれる変数に代入されます。これは、最も一般的な関数式の構文形式です。

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

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

1. Javascriptエンジンは、関数を解析する際に現在の実行環境(スコープ)上で「関数宣言ホイスティング」(関数宣言ホイスティング)を行います。 JavaScript コード。関数宣言と関数式は、Javascirtp エンジンがその行まで実行されるまで待機する必要があり、その後、関数式は上から下まで 1 行ずつ解析されます。関数式の後にかっこを追加して、すぐに呼び出すことができます。この関数は宣言できず、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(){})

$ (function(){/…/}); の書き方は $(document) です。 ready(function (){/…/} の略称) は、DOM が読み込まれた後に実行されるコールバック関数で、一度だけ実行されます。

$( document ).ready(function() {
   console.log( "ready!" );
});
ログイン後にコピー

次の記述方法と同等です

$(function() {
   console.log( "ready!" );
});
ログイン後にコピー

$(function(){/…/}); ページ上の異なる js で記述された関数は、js に従って順番に配置されます。埋め込む。

[推奨学習:

JavaScript 上級チュートリアル

]

以上がJavaScript関数の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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