ホームページ ウェブフロントエンド jsチュートリアル JavaScript学習メモ(4)関数関数編_基礎知識

JavaScript学習メモ(4)関数関数編_基礎知識

May 16, 2016 pm 04:34 PM
function javascript 勉強ノート

関数は、呼び出されたときに実行されるイベント駆動型または再利用可能なコードのブロックです。
Jscript は 2 種類の関数をサポートしています。1 つは言語の内部関数 (eval() など)、もう 1 つは自分で作成した関数です。

JavaScript 関数内で宣言された変数 (var を使用) はローカル変数であるため、関数内でのみアクセスできます。 (この変数のスコープはローカルです)。

変数が宣言されている関数のみがその変数を認識するため、異なる関数で同じ名前のローカル変数を使用できます。

関数の呼び出し方法

1. 通常の呼び出し: functionName (実際のパラメータ...)

2. 関数を指す変数を介して呼び出します:

var myVar = 関数名;

myVar(実際のパラメータ...);

関数を返す関数

1.関数が明確な戻り値を持たない場合、戻り値は「未定義」になります。

2. 関数に戻り値がある場合、戻り値が何であっても返されます。

return ステートメントを使用すると、関数を呼び出した場所に戻すことができます。

return ステートメントを使用すると、関数は実行を停止し、指定された値を返します。

関数は通常、一意の値を返すため、この値は別の関数である可能性もあります:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var box = function(){
var a=1;
return function(){
アラート(a)
}
}
alert(box());//「function(){alert(a )}」をポップアップします

ここでは、戻り値を変数に代入し、通常の関数のように呼び出します。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var box = function(){
var a=1;
return function(){
アラート(a)
}
}
var newFunc = box();
newFunc();//2

返された関数をすぐに実行したい場合は、box()() を使用してこのコードを実行することもできます。

すべての ECMAScript 関数のパラメーターは値によって渡されます。これは、パラメーターが参照によって渡されないことを意味します。

追記: 参照渡しがある場合、関数内の変数はグローバル変数となり、外部からアクセスすることもできます。

(1) 値の型: 数値、ブール値、null、未定義。
(2) 参照型: オブジェクト、配列、関数。

参照型値: ヒープ メモリに保存されているオブジェクトを指します。つまり、変数に保存されているものは実際には単なるポインタであり、オブジェクトはメモリ内の別の場所に保存されます。 🎜 > 匿名関数を作成します

コードをコピーします コードは次のとおりです:
function(){
return 'Lee'; //別の匿名関数は実行できても名前がないため呼び出すことができません
}

この種の匿名関数は、JQuery で多くの用途に使用されます。匿名関数を直接宣言し、すぐに使用します。匿名関数を使用する利点は、一度使用した関数を定義する必要がなく、名前の競合の問題も回避できることです。js には名前空間の概念がないため、名前空間の概念がありません。関数名は競合しやすいため、名前が競合した場合は、最後に宣言されたものが優先されます。

自己実行による匿名関数の実行:

コードをコピーします コードは次のとおりです:
//無名関数を自己実行で実行


匿名関数の自己実行の戻り値を変数に代入します:

コードをコピーします コードは次のとおりです:

//匿名関数の自己実行の戻り値を変数 に代入します



自己実行匿名関数にパラメータを渡す:

コードをコピーします コードは次のとおりです:
//自己実行匿名関数のパラメータを渡します



JavaScript は動的関数を作成します:

JavaScript は動的関数の作成をサポートしています。動的関数は Function オブジェクトを使用して定義する必要があります (Function は JavaScript のオブジェクトであり、固定です。Function オブジェクトの「F」は大文字にする必要があると規定されています)。 function、関数を定義するときに使用されるキーワードです: function funName(x, y)。これが Function の場合 (F が大文字の場合)、JavaScript のオブジェクトであることがわかります)

動的関数を作成するための基本的な形式: var 変数名 = new Function("パラメーター 1", "パラメーター 2", "パラメーター n", "実行ステートメント");

次のコード部分を見てください:


コードをコピーします コードは次のとおりです:
<スクリプトタイプ="text/javascript">
var square = new Function ("x","y","var sum ; sum = x y;return sum;");
alert("square(2,3) の結果は次のとおりです: " square(2,3)) //square(2,3) の結果は次のとおりです: 5



square は動的に作成される関数です。Function オブジェクトの後の括弧内の内容の各部分は文字列形式でなければなりません。つまり、引用符 ("" または '') で囲む必要があります。

このコード:

var square = new Function ("x","y","var sum ; sum = x y;return sum;");

そして次のコード:


コードをコピーします コードは次のとおりです:
関数 square (x,y){
var sum;
合計 = x y;
合計を返します;
}


は、一方が動的関数であり、もう一方が静的関数であることを除いて、まったく同じです。 なぜコードを小さなコードに分割する必要があるのでしょうか? 、文字列をいくつかの独立した文字列に分割する利点は、文字列の一部を変更することで、いつでも関数の機能を変更できることです。


コールバック関数

コールバックは関数の呼び出しプロセスです。それでは、この呼び出しプロセスを理解することから始めましょう。関数 a には関数 b という 1 つのパラメータがあります。関数 a が実行されると、関数 b も実行されます。そして、このプロセスはコールバックと呼ばれます。

実際、中国語もわかりやすいです。コールバック、コールバックは、電話をかけ直すという意味です。関数 a を先に終了し、後で関数 b を呼び出します。

ここで明確にしなければならないことが 1 つあります。関数 b はパラメーターの形式で関数 a に渡され、関数 b はコールバック関数と呼ばれます。

jquery のエフェクト関数のほとんどにはコールバック関数が含まれます。 jqueryエフェクト関数

例:


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

<スクリプトタイプ="text/javascript">
$("div").show(1000,function(){
//コールバック関数
});

ここでのコールバック関数は、次の例に置き換えることができます:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$("div").show(1000,function(){
console.log("hello world")
});

コールバックとは、実際には、関数が実行された後、現在実行されている関数がいわゆるコールバック関数であることを意味します。どうでしょうか?わかりやすいですね…

メソッドと関数の違い

コードをコピーします コードは次のとおりです:

var arr = [1,2,3,4,5]
var a =12; // 変数: 無料
arr.a= 5; //属性: オブジェクトに属します
function show() //関数: 無料
{
アラート('a');
}
arr.fn = function() //メソッド: オブジェクトに属します
{
アラート('b');
}

実際、メソッドは関数ですが、メソッドはそれが属するオブジェクトです。

ご存知のとおり、関数をクリック イベントにバインドする
構文:

$(セレクター).click(関数)
パラメータの説明
関数はオプションです。クリックイベントが発生したときに実行する関数を指定します。
この形式は jQuery でよく見られます。 function をメソッドのパラメータとして使用し、メソッドにイベント処理関数を追加します。

js グローバル関数

グローバル関数は、組み込みオブジェクトのプロパティやメソッドと同じ概念ではありません。グローバル関数は、どの組み込みオブジェクトにも属しません。
JavaScript には次の 7 つのグローバル関数が含まれており、これらはいくつかの一般的な関数を完了するために使用されます:

escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、
parseInt( )、unescape( )。
関数のいくつかの関数

クラスコンストラクターとして使用されます

コードをコピーします コードは次のとおりです:

関数クラス(){}
class.prototype={};
var item=新しいクラス();
クロージャとして使用します

コードをコピーします コードは次のとおりです:
(関数(){
//独立したスコープ
})();

コンストラクターとして呼び出す

いわゆるコンストラクター関数は、この関数を通じて新しいオブジェクトを生成することです。

コードをコピーします コードは次のとおりです:
<スクリプトタイプ="text/javascript"> 関数 test(){
This.x = 10;
}

var obj = new test(); アラート(obj.x) //ポップアップ 10;




オブジェクトは、Object()、Date()、Function() などの定義済みコンストラクターと組み合わせて new 演算子を使用して作成および初期化できます。オブジェクト指向プログラミングの強力な機能は、スクリプトで使用するカスタム オブジェクトを作成するカスタム コンストラクターを定義できることです。定義されたプロパティを持つオブジェクトを作成できるようにカスタム コンストラクターを作成しました。以下はカスタム関数の例です (this キーワードの使用に注意してください)。

コードをコピーします コードは次のとおりです: 関数 Circle (xPoint、yPoint、radius) {
This.x = xPoint; // 円の中心の x 座標。
This.y = yPoint; // 円の中心の y 座標。
This.r = radius; // 円の半径。
}

Circle コンストラクターを呼び出すときは、円の中心点と半径の値を指定します (一意の円オブジェクトを完全に定義するには、これらすべての要素が必要です)。結局のところ、Circle オブジェクトには 3 つのプロパティが含まれています。 Circle オブジェクトをインスタンス化する方法は次のとおりです。

var aCircle = 新しいCircle(5, 11, 99);
コンストラクター関数を使用する利点は、オブジェクトの作成時にいくつかのパラメーターを受け取ることができることです。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数テスト(名前){
This.occupation = "コーダー";
This.name = 名前;
This.whoAreYou = function(){
return "私は " this.name " であり、 " this.occupation;
です }
}
var obj = new Test('trigkit4');//同じコンストラクターを使用して異なるオブジェクトを作成します
var obj2 = new Test('student');

obj.whoAreYou();//「私は trigkit4 でコーダーです」
Obj2.whoAreYou();//「私は学生でコーダーです」


慣例により、コンストラクター関数の最初の文字を大文字にして、通常の関数と区別する必要があります。

次の 2 つの形式の関数定義は同等です。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var test = function(){
alert("Hello World");
}
alert(typeof(test));//出力関数

変数テストはここで明確に定義されており、その初期値は関数エンティティに割り当てられます

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数テスト(){
alert("Hello World");
}
alert(typeof(test));//出力関数

次の定義された関数形式を見てください:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数 test(){
alert("Hello World");
};
test();//実際に出力すると こんにちは、不思議ですよね?

関数 test(){
alert("こんにちは");
};
test();//Hello
は正常に出力されます

明らかに、最初の機能は機能しませんでした。奇妙ですよね。 JavaScript 解析エンジンはコードを 1 行ずつ実行するのではなく、コードをセクションごとに実行することがわかっています。同じプログラムの解析と実行では、定義された関数ステートメントが最初に実行されるため、最初の定義のコード ロジックは 2 番目の定義によって上書きされ、同じ関数が 2 回呼び出された場合、2 番目の関数のみが実行されます。実行されました。

値としての関数

関数は js の構文であるだけでなく、値でもあります。つまり、関数を変数に代入したり、オブジェクトのプロパティまたは配列の要素に保存したり、パラメーターとして別の関数に渡すことができます。
関数の名前は実際には目に見えません。関数オブジェクト

を参照する単なる変数の名前です。

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

<スクリプトタイプ="text/javascript">
関数 square(x,y){
return x*y;
}
var s = square; //s と square は同じ関数を参照します
square(2,3);//6
s(2,4);//8

関数を変数に割り当てるだけでなく、関数をオブジェクトの属性として呼び出すこともできます。その関数はメソッドと呼ばれます。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var obj = {square:function(x,y){ //オブジェクトの直接量
return x*y;
}};
var ect = obj.square(2,3);

プロトタイプ属性

各関数には、オブジェクトへの参照を指すプロトタイプ属性が含まれています。このオブジェクトはプロトタイプ オブジェクトと呼ばれます。
詳しくは、JavaScript学習記(5) プロトタイプとプロトタイプチェーン

をご覧ください。

高階関数

ここでいう高階関数とは、高等数学の高階関数ではありません。いわゆる高階関数とは、1 つ以上の関数をパラメータとして受け取り、新しい関数を返す関数のことです。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript で HTTP ステータス コードを簡単に取得する方法 JavaScript で HTTP ステータス コードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

See all articles