JScall () 및 apply () 방법에 대한 인스턴스 요약 사용

4131 단어 JScallapply
최근에 JacvaScript에서의call()방법과apply()방법을 만났습니다. 그리고 어떤 때는 이 두 방법이 정말 중요합니다. 그러면 이 두 방법의 사용과 차이를 정리하겠습니다.
모든 함수는 두 가지 비계승적인 방법을 포함한다:call () 방법과apply () 방법이다.
공통점: 이 두 방법의 작용은 같다.
모두 특정한 작용역에서 함수를 호출하는 것은 함수체내this대상의 값을 설정하여 함수를 확충하여 운행하는 작용역에 의존하는 것과 같다.
일반적으로,this는 항상 어떤 방법을 호출하는 대상을 가리키지만,call () 과apply () 방법을 사용할 때,this의 방향을 바꿉니다.
call() 메서드 사용 예:

  // 1
  <script>
    window.color = 'red';
    document.color = 'yellow';

    var s1 = {color: 'blue' };
    function changeColor(){
      console.log(this.color);
    }

    changeColor.call();     //red ( )
    changeColor.call(window);  //red
    changeColor.call(document); //yellow
    changeColor.call(this);   //red
    changeColor.call(s1);    //blue

  </script>

  // 2
  var Pet = {
    words : '...',
    speak : function (say) {
      console.log(say + ''+ this.words)
    }
  }
  Pet.speak('Speak'); //  :Speak...

  var Dog = {
    words:'Wang'
  }

  // this Dog
  Pet.speak.call(Dog, 'Speak'); // : SpeakWang
apply() 메서드 사용 예:

  // 1
  <script>
    window.number = 'one';
    document.number = 'two';

    var s1 = {number: 'three' };
    function changeColor(){
      console.log(this.number);
    }

    changeColor.apply();     //one ( )
    changeColor.apply(window);  //one
    changeColor.apply(document); //two
    changeColor.apply(this);   //one
    changeColor.apply(s1);    //three

  </script>

  // 2
  function Pet(words){
    this.words = words;
    this.speak = function () {
      console.log( this.words)
    }
  }
  function Dog(words){
    //Pet.call(this, words); // : Wang
    Pet.apply(this, arguments); // : Wang
  }
  var dog = new Dog('Wang');
  dog.speak();
차이점: 매개 변수를 수신하는 방식이 다르다.
apply () 방법은 두 개의 매개 변수를 수신합니다. 하나는 함수 운행의 작용역 (this) 이고, 다른 하나는 매개 변수 그룹입니다.
문법: apply([thisObj[,argArray]]);,하나의 대상을 호출하는 방법, 다른 두 개의 대상이 현재 대상을 대체합니다.
설명:argArray가 유효한 그룹이 아니거나arguments 대상이 아니라면
TypeError,argArray와thisObj의 매개 변수를 제공하지 않으면 Global 대상은thisObj로 사용됩니다.
call () 방법의 첫 번째 매개 변수는 apply () 방법과 같지만, 함수에 전달된 매개 변수는 반드시 열거해야 합니다.
문법:call([thisObject[,arg1[,arg2[,...,argn]]]]);,객체의 한 방법을 적용하여 현재 객체를 다른 객체로 대체합니다.
설명:call 방법은 다른 대상을 대체하여 하나의 방법을 호출할 수 있습니다.call 방법은 함수의 대상 상하문을 초기 상하문에서thisObj가 지정한 새로운 대상으로 변경할 수 있습니다.thisObj 파라미터를 제공하지 않으면 Global 대상은thisObj에 사용됩니다.
사용 예 1:

  function add(c,d){
    return this.a + this.b + c + d;
  }

  var s = {a:1, b:2};
  console.log(add.call(s,3,4)); // 1+2+3+4 = 10
  console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14 
예 2 사용:

  <script>
    window.firstName = "Cynthia"; 
    window.lastName = "_xie";

    var myObject = {firstName:'my', lastName:'Object'};

    function getName(){
      console.log(this.firstName + this.lastName);
    }

    function getMessage(sex,age){
      console.log(this.firstName + this.lastName + "  : " + sex + " age: " + age );
    }

    getName.call(window); // Cynthia_xie
    getName.call(myObject); // myObject

    getName.apply(window); // Cynthia_xie
    getName.apply(myObject);// myObject

    getMessage.call(window," ",21); //Cynthia_xie  :   age: 21
    getMessage.apply(window,[" ",21]); // Cynthia_xie  :   age: 21

    getMessage.call(myObject," ",22); //myObject  :   age: 22
    getMessage.apply(myObject,[" ",22]); // myObject  :   age: 22

  </script>
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

좋은 웹페이지 즐겨찾기