This is this

5191 단어
우선this의 몇 가지 귀속 방식을 알아보겠습니다.
this의 기본 바인딩:
하나의 함수가 명확한 호출 대상이 없을 때, 즉 독립 함수로 호출될 때,this는 전역 window 대상에 귀속됩니다.
 
function  func() {
    console.log(this);
}

func()  //window

 
this의 스텔스 귀속:
함수가 다른 대상에 포함되었을 때this는 이 대상에 은밀하게 귀속되었다.따라서this를 통해 이 대상의 다른 속성에 직접 접근할 수 있습니다.
var foo = {name:'Lily'}
var obj = {
    name: 'John',
    age: 20,
    sayName: function(){
        console.log(this === obj); 
        console.log(this.name);   
    }
}
obj.sayName();      //true  John
foo.sayName = obj.sayName;
foo.sayName();      //false  Lily

this의 명시적 바인딩:
call() 또는 apply() 방법을 호출하여this의 주동적인 귀속을 실현하다
var animals = [
    {species: 'Lion', name: 'King'},
    {species: 'Whale', name: 'Fail'}
  ];
  
  for (var i = 0; i < animals.length; i++) {
    (function (i) { 
      this.print = function () { 
        console.log('#' + i  + ' ' + this.species + ': ' + this.name); 
      } 
      this.print();
    }).call(animals[i], i);
  }
  //#0 Lion: King
  //#1 Whale: Fail

this의 new 바인딩:
함수가 new 조작을 실행하면 새로운 대상을 만들고, 구조 함수의this는 생성된 구조 함수를 가리킨다.
function foo(name){
    this.name = name
}

var bar = new foo('John');
console.log(bar.name); //John

this의 하드 귀속
this가 강제로 귀속된 후, 이후에 어떤 호출이든this는 변하지 않습니다
var a = 5;
function foo(){
    console.log(this.a);
}
var obj = {
    a: 2
}
var bar = function(){
    foo.call(obj);
}
bar();           //2
bar.call(window);//2

  
상기 몇 가지this가 귀속된 상황을 말한 후에 화살표 함수 중의this를 말해야 한다.
  
function foo() {
    return () => {
      return () => {
        console.log(this)
      }
    }
  }
  console.log(foo()()())   //window

화살표 함수 중 실제로this 화살표 함수 중의 this는 화살표 함수를 감싸는 첫 번째 일반 함수의this에만 달려 있다.이 예에서 패키지 화살표 함수의 첫 번째 일반 함수는foo이기 때문에 이때의this는 window이다.
 

좋은 웹페이지 즐겨찾기