this 기본 개념

4858 단어
  • this
    • 를 사용하는 이유
  • this의 사용 오해(2 )
  • this와 어법 작용역의 비교
  • this의 지향정해
  • this의 귀속방법(call()、apply()、bind())
    • this는 항상 한 대상을 되돌려줍니다 (fun도 한 대상입니다) + this는 항상 변덕스러움을 가리킵니다
    this  
this  -> this  -> this

    기본 개념
    this는 항상 하나의 대상인 을 되돌려줍니다. 대상의 속성과 방법 함수는 다른 대상에게 부여할 수 있기 때문에 모든this가 가리키는 대상도 변덕스럽습니다.
      function foo () {
  console.log('name :' + this.name);
  }

  var obj = { name: "obj1", foo: foo };
  var obj2 = { name: "obj2", foo: foo };
  var obj3 = { name: "obj3" };

  obj.foo()   // obj1
  obj2.foo()    // obj2
  • this
    • 를 왜 사용하는지
  • this는 우아한 방식 을 제공하여 하나의 대상을 인용하고this를 사용하면 더욱 간단명료한api를 얻을 수 있다.현식 전달 대상의 인용(eg: 함수 매개 변수 전달)은 코드를 혼란스럽고 유지하기 어렵게 만든다(eg: 전달 매개 변수의 개수가 문제).
  • this를 사용하면 할 수 있고 this 더 나아가
  • **this를 사용하는 최종 목적은 + 의 사용 대상의 속성과 방법 함수 처리 데이터를 확보하는 것이다**
  • this의 사용 오해(this의 지향 오해)
  • this는 함수 자체를 가리키지 않는다
  • this는 반드시 그 함수 작용역이나 정의할 때의 작용역을 가리키지 않는다
     function foo() {
     var a = 2;
     this.bar = function() {
       console.log(this.a)
     }
   this.bar();
 }
 foo();
  • this와 어법 작용역의 비교this는 또는 로 대체할 수 있다.**그러나this는 더욱 유연한 특성이 있기 때문에 모두가 사용한다. 항상 어법 작용역을 사용하면 프로그래밍의 편안한 구역으로 돌아가기 쉽다**
    • foo 함수가 호출된 횟수를 기록해 보도록 하겠습니다.
        function foo(num) {
        console.log('foo ' + num);

        //   foo  
        this.count++;
    }

    foo.count = 0;
    for(var i = 0; i < 5; i++) {
        foo(i);
    }

    //   foo  
    console.log(foo.count);

          this  ？
     ？？
  • this의 지향 정해(this의 네 가지 귀속 정책을 보십시오) 함수 내부의this는 항상 함수 자체가 호출된 위치를 가리킨다.(this ) 그래서this에 대한 지향은 함수의 호출 위치를 찾는 것이다.(브라우저가 자체로 가지고 있는 개발자 도구는 함수 호출 창고를 쉽게 볼 수 있다)
  • this의 3가지 의 방법 상해
    • **javascript는 call apply와bind 세 가지 방법을 제공하여this의 지향을 고정시키는 데 사용합니다**
    ** 콜 및 apply bind는 모두 Function 위에 정의된 방법입니다.***call apply는 호출 함수의 실행 결과를 되돌려줍니다.***bind는 내부this를 수정한 포장 함수를 되돌려줍니다.**
  • call의 전참 해석(4가지 전참 방식)call 매개 변수는 정상적인 대상인call 매개 변수를 공백,null,undefined로 사용하면 기본적으로 전역 대상
      var n = 'bar';
  var obj = {n: 'foo'}

   function baz() {
     console.log(this.n)
   }

   baz.call(obj);        // foo
   baz.call(window);
   baz.call();
   baz.call(null),
   baz.call(undefined);
    call에 기본 형식의 데이터를 전송한다. 이 기본 형식의 데이터는this
         var f = function () {
         console.log(this);
     };

     f.call(5)     // Number {[[PrimitiveValue]]: 5}
    call에 포장된 값으로 전환되어 여러 개의 매개 변수를 전달할 수 있다. 첫 번째 매개 변수는 귀속이 필요한 대상이다.뒤의 매개 변수는 함수 호출의 전참 매개 변수
  • apply
  • bind는 함수체 내부의this를 강제로 귀속시켜 포장된 새로운 함수
      //   bind  
  function bind(fun, obj) {
        return function() {    //     bind  
              fn.apply(obj);
        }
  }
    • 로 되돌려줍니다

    apply call bind 사용 전공략(4가지 사용 장면)

  • 전달 빈 대상 ** 매개 변수 코리화 ** (전달 대상이 얼마나 비었는지 보십시오)call apply bind는 빈 대상을 전달하는 데 자주 사용되는 매개 변수의 코리화
     function bar(a, b) {
       console.log(a + ',' + b);
 }
    는null/undefined를 빈 전송
     var baz = bar.call(null, 1, 4)      // 1, 4

 var bak = bar.bind(null, 10);
 bar(19)    // 10,19
    로 직접 사용하여 진공 대상 var øø = Object로 전달합니다.create(null); 
    var baz = bar.call(ø, 1, 4)       // 1, 4
  • 사용자 정의 두 가지bind 방법
  • 사용자 정의bind 방법 함수 만들기
     function bindCopy(fn, obj) {
       return function() {
              fn.apply(obj, arguments);            //   call   **   **
        }
 }
  • 확장 함수 메소드 라이브러리(**중요 지식**)
    Function.prototype.bindCopy() {
       var fn = this;
       var obj = arguments[0];
       var args = Array.prototype.slice(arguments, 1);
       return function() {
                fn.apply(obj, args)
       }
 }
    중요 지식:
  • 함수는prototype을 사용하여 확장할 수 있음(Function.ptototype.bindCopy)
  • apply를 사용하여 클래스 그룹 대상(length 속성이 있는 대상)을 매개 변수 구조
    • 로 만들 수 있음
  • 함수 자체 호출 시도this로 호출된 상하문 표시
  • 원 함수 자체의 매개 변수가 적으면 안 된다는 것을 주의

  • apply와call의 묘용
  • 수조를 해체(위쪽은 수조 대상을 해체)
    var arr = [1, 4, 6, 7];
Math.max.apply(null, arr);        // 7
  • call방법을 사용하여 대상 계승에서 이불류가 덮인 부류를 다시 호출하는 방법;
     function Parent() {
     this.a = 'super';
     this.Super = function() {
            console.log('  Super  ' + this. a);      
     }
 }

 var p = new Parent();

function Children (a) {
      this.a = a;
      Parent.call(this);     //    
 }

var c = new Children(12);
c.Super()          //    

c.Super.call(p)        //   call

    • forEach와 유사한 방법을 스스로 실현해 보세요.
    반응: 5분 만에 사용자 지정 버튼 그룹 구성 요소를 만드는 방법
    Unity C# 성능 향상(foreach 편)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage