JavaScriptの関数を使いこなす

Function.call()とFunction.apply()メソッド

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Function.call()とFunction.apply()メソッドを使うと、関数を指定したオブジェクトのメソッドとして呼び出せます。
講師:
08:52

字幕

このレッスンでは 関数に対して呼び出す 少し特別なメソッド― call と apply という物の使い方と その機能についてご説明をいたします 今 Dreamweaver で開いている HTML ドキュメントには― クラスとして Point が 定義されています コンストラクタ関数 という風に言いますが クラスと考えて構わないと思います プロパティを2つ持っています x y 座標ですね そして オブジェクトを1つ― new でコンストラクタを呼び出して 作っています 引数は 1 1 ですので 座標は x y 共に 1 が渡されます そして console.log で オブジェクトを直接入れて 確認しています ではブラウザで確認してみましょう 「ファイル」から 「ブラウザでプレビュー」です JavaScript コンソールを表示します 「開発/管理」の 「JavaScript コンソール」 point のコンストラクタ クラスから作らていますので― クラスの名前が出ていて 中身を三角でクリックすると― 確認ができます x y 共に プロパティとして 1 が定められています ではこれは コンソールをクリアして また Dreamweaver のほうに戻ります クラス point に― メソッドを1つ定義しましょう メソッドは まずクラス コンストラクタの名前の point. で― prototype のプロパティ― prototype の中にあるオブジェクトに メソッドを設定します メソッド名 getDistance ― From と ちょっと一言付きます どういうことかというと― 指定した座標からの ということですね 名前のない function を 定義しますので― function ― x y とします そうすると 自分の持っているプロパティの x y 座標― と この x y 座標との距離を求めます この座標から自分の座標まで どれだけの距離があるか ということです 距離は三平方の定理で求めますが― 2点ですから 差を求めておく必要がありますね まず x 座標の差 _x にしておきますけれども― 自分の this.x プロパティ x の座標ですね そこから引数で渡された x を 引き算します 同様に y についても― 自分の y プロパティの値から― メソッドに渡された引数 y の値を引きます 後は 三平方の定理ですので まずは 2乗の和を求めておきます square ですね 変数には square としまして― Math.pow です これで― x 座標の差の2乗― 足すことの同様に y 座標の差の― 2乗で 2乗の和が出来上がりました そしたらもう return しますが 平方根を取って return ですね return の― 平方根は Math.squareroot の 頭文字をとって sqrt なんですけれども― square の変数を引数として渡します ではこの console.log なんですが オブジェクトをそのまま出すのではなくて― メソッドを呼びましょう getDistanceFrom ― 計算 検算が面倒くさいので 原点からにしておきます 0 0 ということで― 保存をして確認をします ブラウザのほうに移りましょう ページをリロードします x y とも 1 ですから― 直角二等辺三角形の斜辺ですね root に 1.414 が出れば これは正しいということです ではクリアして また Dreamweaver のほうに戻ります ここで point クラスとは関係なく オブジェクトを1つ作ります オブジェクトは 変数名は obj にしましょう そしてオブジェクトですから 波括弧で― 囲みます プロパティは point と同じ x と y にします x を 1 y を 同じ値では ちょっと区別がつきにくいので― Math.sqrt 3 ということで ルート 3 を入れます x が 1 y はルート 3 です では この 1 とルート 3 と 原点との距離を求めたいと思います point だったら getDistanceFrom が定められていますね では また改めてこのオブジェクトに対して― 同じメソッドを定めなければいけない かというと そんなことはありません これをお借りすることができるんですね 取ってしまえる― それが call と apply というメソッドです ではまず call から行きます 結果として距離は出ますので― 結果を入れる変数にイコール― 使いたいのはこの関数です point に定めた getDistanceFrom というメソッド コピーして持ってきます これは obj のメソッドではないですが 借りましょう というのが― call です この call それから この後紹介する apply 両方とも― 関数に対して呼び出す という ちょっと変わった機能です そして 引数は― 第一引数がありまして― 誰のメソッドとして借りるのか ということですね obj のメソッドだと考えて そう思って― この getDistanceFrom を 呼び出してください ということです ですから this というのは obj のことになってしまうんですね this.x というと この値 this.y というとこの値を取って― getDistanceFrom の この関数の処理を行うことになります 引数を渡さないといけませんね call の場合は この引数はこの― 誰のメソッドとして呼び出すのか という そのオブジェクトの後に― 普通に引数を 決められた数だけ渡します これで obj に定めれらた と 今思ってね と― 引数はこれですよ ということで 渡しました 上手くいってれば Distance に 結果が入るはずですので― console.log で Distance を― この中に引数として渡します では 保存をして結果を見てみましょう ブラウザに移りまして ページをリロードします これ1行目は point のほうですね 2行目のほう― 1 のルート 3 ですから 斜辺は 2 ということで― ちゃんと計算がされています ではクリアしまして― もう1つ apply というメソッドも 紹介しておきます call と基本的には同じ考え方ですので これをコピーして― ペーストします そして call のほうはコメントにして― call を apply と― やはり このオブジェクトのメソッドとして― この関数を呼び出してください ということなんですが 違うのは引数の渡し方です 第2引数は1つしか取りません では2つある3つある場合は どうするかというと― その引数を全て― 配列に入れて渡すんですね これだけの違いです 結果は同じですけれども 確認しておきます ファイルを保存して ブラウザに移ります ページをリロードしましょう 結果同じですね つまり同じように apply も動いた ということです このレッスンでは関数を― あるオブジェクトのメソッドとして 呼び出してしまう という2つのメソッド― call と apply の使い方について ご説明しました

JavaScriptの関数を使いこなす

関数はJavaScriptの基本です。また関数を知ることはスクリプトの組み立て方を理解することでもあります。このコースではJavaScriptの基礎を学んだ方を対象に、関数の定義から順を追って説明します。さまざまな機能やその呼び出し方、クラス定義で使われる応用テクニックまで実際にスクリプトを書きながら具体的に解説します。

2時間22分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月28日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。