質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

Q&A

解決済

2回答

1872閲覧

即実関数のthisとcallメソッド

aaaaaaaa

総合スコア501

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

0グッド

1クリップ

投稿2017/07/28 10:45

即時関数の引数thisについて質問です。callメソッドは、レシーバオブジェクトのthisに対しcallメソッドの引数で指定したオブジェクトを参照させます。
だとすると、下記のソースは、即時関数内のthisが同じthisを参照しているということになります。
関数内のthisは、グローバルオブジェクトのwindowを参照しています。
ちなみにソースを厳密(strict)にするとundefined、つまり未定義を参照するそうです。

javascript

1(function() { 2}).call(this);

関数内のthisは、windowを参照していると思うのですが、

javascript

1(function() { 2})()

と何が違うのでしょうか。
つまり、callを使って即時関数内でwindowを参照しているthisに対して、同じくwindowを参照しているthisを参照するよう、処理しています。
ココによれば、callを使わないとwindowという外部にあるオブジェクトを参照してしまうので、あまりよろしくないとのことです。
つまり、windowをcallを使い関数内のthisに参照させることで、隠密性が高まるということでしょうか。
それは、callを使わないときのwindowを参照するthisとどう違うのでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

回答

ちなみにソースを厳密(strict)にするとundefined、つまり未定義を参照するそうです。

それが Function.prototype.call を使う理由です。

関数内のthisは、windowを参照していると思うのですが、

いいえ。
Strict Mode では、関数コードにおける this の既定値は undefined です。

Strict Mode

Strict Mode 下においても、グローバルコードでは this はグローバルオブジェクトを参照します。

HTML

1<script> 2'use strict' 3console.log(this === window); // true 4</script>

関数コード内では、this === undefined ですが、

HTML

1<script> 2'use strict' 3(function() { 4 console.log(this === window); // false 5 console.log(this === undefined); // true 6}()); 7</script>

Function.prototype.call を使えば、グローバルオブジェクトを参照できます。

HTML

1<script> 2'use strict' 3(function() { 4 console.log(this === window); // true 5}.call(this)); 6</script>

非Strict Mode (Non strict mode, Sloppy mode)

strictではないときは、質問文にあるように「callを使って即時関数内でwindowを参照しているthisに対して、同じくwindowを参照しているthisを参照する」という状態になってしまうという認識であっておりますか。

その通りです。
非Strict Modeならば、this のデフォルト値はグローバルオブジェクトなので、Function#call を使わなくても結果は変わりません。

JavaScript

1(function() { 2 console.log(this === window); // true 3})();

ただし、グローバルオブジェクトが後から変更される可能性を考慮すると、Function#call で明示的にグローバルオブジェクトを渡す方がメンテナンス性が高いといえます。
ブラウザにおけるグローバルオブジェクトはHTML文書の数だけ存在しますが、Function#call でグローバルオブジェクトを渡す設計なら、別のグローバルオブジェクトを渡す事で内部のグローバルオブジェクトを一括してスイッチさせることが出来ます。

Re: aaaaaaaa さん

投稿2017/07/28 12:26

編集2017/08/01 10:34
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/07/28 13:51

「strict」が「strcit」になっています
think49

2017/07/28 14:09

ご指摘ありがとうございます。修正しました。
aaaaaaaa

2017/08/01 10:16

ご回答ありがとうございます。 つまりソースがstrictのときにcallメソッドを使った即時関数を使うわけですね。 strictではないときは、質問文にあるように「callを使って即時関数内でwindowを参照しているthisに対して、同じくwindowを参照しているthisを参照する」という状態になってしまうという認識であっておりますか。
think49

2017/08/01 10:30

親記事に追記しました。
aaaaaaaa

2017/08/07 10:23

ご回答と追記ありがとうございました。大変助かりました。
guest

0

たとえば、こういうのは違いが出るはず。

javascript

1function hoge (){ 2 this.calledThis = (function() { 3 return this; 4 }).call(this); 5 6 this.immediateThis = (function() { 7 return this; 8 })(); 9} 10new hoge();

javascript

1document.addEventListener('click', function(e){ 2 (function() { 3 console.log(this); 4 }).call(this); 5 6 (function() { 7 console.log(this); 8 })(); 9})

投稿2017/07/28 11:54

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2017/07/28 12:03

うーん、なんかブログ記事の意図とは違う気がしてきました。 他の方の回答を待ちたい。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問