[Javascript Basic] - What is 'this' (1)

JavaScriptを学ぶには、thisというキーワードに出会うに違いありません.
しかし、thisが何を意味するのか理解しにくい場合がある.
どうしてこんなことになったの?
JavaScriptを学ぶ前にC++とJAVAを勉強しておくと混同しやすくなります.
このときのthisはクラスを用いて新しく生成されたオブジェクト自身を暗黙的に指すからである.
したがって,C++とJAVAにおけるthisは静的な性格を示した.
ただし、javascriptではthisが異なります.
JAvascriptのthisは動的性質を有する.
動的とは、関数の呼び出し点がthisと決定されるため、値が固定されないことを意味する.thisの理解を容易にするためには,以前学習したthisを一旦捨ててJavaScript特有の柔軟な考え方でアクセスする必要がある.thisの関連記事を読んだ後、数回の実験を経て、最も理解しやすい結論はこうです.

これは、関数を持つオブジェクトを指します。

コード確認で口頭確認よりも理解できます.

function Person(name,age){
    this.name = name
    this.age = age
    console.log(this)
}

Person('jary',100)

このコードを実行して、thisが示す値がwindowであることを決定することができる.
うん?どうして急にwindowと言ったの?Person関数はwindowと何の関係がありますか?可能性もある.
要するに、Personはwindowオブジェクトに含まれる.
ブラウザ環境では、windowオブジェクトがグローバルに表示されるためです.
したがって、グローバル変数、グローバル関数、およびグローバルオブジェクトはwindowによって所有される.
上記の場合、Personはグローバル関数であるため、windowオブジェクトがそれを所有する.
(window.は省略されていると考えられます.)
次のコードを実行し、もう一度チェックします.

var name = 'jary' // 전역변수 선언 및 정의
console.log(name) // jary
console.log(window.name) // jary

同じ値を出力します.thisが関数が所有するオブジェクトを指定した以上、Person関数の所有権を変更し、再テストします.

var language = '아직 없음' // 전역 변수이므로 window.language로 접근이 가능하다.

function Person(){
    console.log('제가 사용하는 언어는 ' + this.language + '입니다')
}

var Korea = {
  language:'한국어'
}

Korea.person = Person

console.log(Person()) // 제가 사용하는 언어는 아직 없음입니다.
console.log(Korea.person()) //  제가 사용하는 언어는 한국어입니다.

var America = {
  language:'영어'
}

America.person = Person
console.log(America.person()) //  제가 사용하는 언어는 영어입니다.


America.person = Korea.person
console.log(America.person()) //  제가 사용하는 언어는 영어입니다.

最初の出力のPerson関数を持つオブジェクトはwindowです.したがって、thisはwindowであるため、出力される値はまだlanguageではない.
2番目の出力では、Person関数がKoreaオブジェクトのpersonに割り当てられ、person関数が呼び出されると、関数を持つオブジェクトがKoreaなので韓国語が出力されます.
3番目の出力では、2番目の出力と同様に、person関数を呼び出すと、関数を持つオブジェクトがアメリカオブジェクトであるため、英語を出力するアメリカオブジェクトに割り当てられたpersonが要求される.
4番目の出力はAmericanpersonにKoreaperson関数を割り当てた.しかし、person関数を呼び出すと、アメリカのオブジェクトが所有するため、this.languageが英語を教授する.
理解した場合は、次の例の出力を予測します.

function whoAmI(){
   console.log(this.name)
}

var a = {
    name:"a",
    b:{
        name:"b",
        c:{
            name:"c"
        }
    }
}

console.log(whoAmI())

a.who = whoAmI

console.log(a.who())

a.b.c.who = whoAmI

console.log(a.b.c.who())

a.b.who = a.b.c.who

console.log(a.b.who())

次に、bind、apply、call関数を使用してthisを直接変更する方法について説明します.