Help us understand the problem. What is going on with this article?

JavaScriptにおけるFunctionについて

More than 3 years have passed since last update.

はじめに

はじめまして
去年まで専門学校に通っていたゆとりの新社会人、ポンコツエンジニアです。
まだまだ、駆け出しなので間違った事を書いている可能性があります。

何かお気付きの点などがございましたら、ご指導のほどよろしくお願いします。
また、この記事は「備忘録」といったスタンスで学習した内容を記録に残そうという意図を持って書いているので、参考にしたい方はちゃんと理解している人のサイトを見た方が時間的にも無駄がなく効率的かと思います。

それでは、本題に入ります。

Functionとは

Functionとは、関数のオブジェクトです。
つまり、何かの一連の処理を記述しているオブジェクトということになります
Javaでいう所のクラスなどもFunctionオブジェクトで疑似的に表現します。
(ES6ではちゃんとclassがあるらしいですが、まだ学習していません)

グローバルなFunctionの書き方としてはこんな感じになります。

Function1.js
function funcAlert(){ // <- 関数名

    alert("Hello World");// <- 処理内容
}
funcAlert();// <- 関数呼び出し元

リファレンスを参考にしようとしたら。。。

説明の箇所に下記の記述がありました

Function コンストラクタで生成された Function オブジェクトは、関数が作成されたときにパースされます。これは、関数を宣言し、それをコード内で呼び出すよりも効果的ではありません。なぜなら、function 文で宣言された関数はコードの他の部分と一緒にパースされるからです。
関数に渡された実引数の全ては、それらが渡された順番に、生成された関数内における仮引数の識別子の名前と同等に扱われます。

JavaScript|MDNより引用

ん??
説明の意味が全くわからん。。。
やっぱこういう所の説明は正直わかりずらいですね。。。
しかも、曖昧でしか覚えていない言葉が出てきたのでそこも整理していきたいと思います

まずは、知ったかぶりのコンストラクタから

今までコンストラクタってワードを聞いた時なんとなく知ったかぶりして
「あぁ~!コンストラクタね。うんうん。なるほどね。。。」って感じで受け流してました(笑)
今まで黙っててごめんなさいw

(だから、これを機会にちゃんと覚えるよ!)

コンストラクタって要するに
1. オブジェクトの生成する
2. 生成したオブジェクトを初期化する
上記2点を行ってくれる関数のことをコンストラクタと呼びます

function2.js
var func = function()
{                                   // <-'生成するオブジェクトの初期化内容'
    var val;
    this.setVal = function(val){  
        this.val = val;
    }
    this.getVal = function(){
        return this.val;
    }
}
var target = new func;// <- 'targetオブジェクトをfuncオブジェクトで生成'

target.setVal('Str');
console.log(target.getVal());

コードで表現した方がわかり易いかも知れないのでゲッター・セッターを書いてみました

ちなみにthis前回学習したワードです。

さらっとnewと言うキーワードをスルーしてますが、
newとは、一言で表すなら「~を新しく生成してね」って意味です。
まぁ細かい所では、それだけじゃないんですが今回は割愛します。
今度、細かいところも学習してまとめてみます。

さて、話を戻しますがつまり
var A = new B;であれば、「B(コントラクタ)を利用してAを新しく生成してね」っ意味になります。
なんとなく、わかったかと思います

そして、初期化の際にプロトタイプオブジェクトと言うものが暗黙的に生成されてます。
実はこのプロトタイプオブジェクトがある事によって、
コンストラクタから生成されたオブジェクトはコンストラクタと同じ関数プロパティを持つことができるんですね!

ちなみに’パース’も意味がわからなくて調べたんですが、しっくりきませんでした。
唯一これかな?って感じたものは「構文解析」ですかね

最後に

いやー
今まで普通にコンストラクタを使っていたのに単語と処理内容が結びついてなくて混乱したw
処理内容と単語の結びつきも今後学習していく上で必要なスキルになるんですね。。。
そんな事を感じた記事になりました。

次回はAngularJS,プロトタイプオブジェクト,newのどれかを学習したいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away