• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

javascriptの勉強した部分を皆さんと共有したいと思います。まだ上手じゃないので説明が間違った部分があるかもしれませんが、よろしくお願いします。JavaScriptの情報共有

2021年6月25日(金曜日)  (ジョン インソン)

Jsのthisは何?

こんにちは
たまにjsの事例を見るときthisが見えるときがあります。
今回は私が見たthisで分かりやすかった内容がありまして共有したいと思います。

ブラウザーコンソール(F12)をつけてthisを打ってみると、
this; // Window{}
に出ます。

そこに関数の中に入れて使うと
function j(){console.log(this);};
j(); // Window{}

はい、windowですね。
ここで一つの事実が分かります。
thisは、基本的にwindowです。

それではthisがwindowではない場合がありますが、一度見てみます。

オブジェクトのメソッド
var obj = {
j: function(){ console.log(this); },
};
obj.j(); //obj
オブジェクトメソッド j の中の this はオブジェクトを指します。
これは、オブジェクトのメソッドを呼び出すときにthisを内部的に変えてくれるからです。

しかし、次のようにすると結果は変わります。
var j2 = obj.j;
j2(); //Window
呼び出す際に、呼び出す関数がオブジェクトのメソッドなのかそのままの関数なのかが重要です。
j2 は obj.j を取り出してきたものですから、これ以上objのメソッドではありません。


演算子の場合
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function() {
console.log(this.name, this.age);
}

演算子関数にもしnewを呼び出さずにそのまま呼び出したらどうなりますか?
Person('hello' , 10);
console.log(window.name, window.age); // hello 10

ただ関数でthisがwindowを指すと言いましたね? それでthis。name 과 this.ageはwindow.name,window.ageになってしまいます。
これを防ぐためには「new Person」を使用する必要があります。
var hero = new Person('world', 20); // Person {name: "world", age: 20}
hello.sayHi(); // world 20

このように「new」をつけると、thisが演算子を通じて作成されたインスタンス(world自身)になります。

今回はここまで説明になります。
私もまだまだthisについて紛れることがあるのでたまに参考します。笑
不足な文章読んでいただきありがとうございます。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン