JS에서 이것을 가리키는 것과 호출 및 적용 기능(그림 및 텍스트 튜토리얼)

특정 실제 응용에서는 함수를 정의할 때 이 점을 결정할 수 없지만, 실행 환경에 따라 크게 다음 세 가지로 나눌 수 있습니다.

1. 함수는 일반 객체로 사용됩니다. 함수가 호출되면 전역 객체를 가리킵니다

2. 함수가 객체의 메소드로 호출되면 객체를 가리킵니다

3. 생성자, 이는 새로 생성된 개체를 가리킵니다

예제 1:

window.name = 'myname';
function getName() {
  console.log(this.name);
}
getName(); //输出myname

예제 2:

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob

예제 3:

function Boy(name) {
  this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

예제 3에는 또 다른 특별한 경우가 있습니다. 즉, 생성자가 다음을 통해 개체를 반환하는 경우입니다. "return", 이 작업의 최종 결과는 새로 생성된 개체가 아닌 이 개체를 반환하므로 이 경우에는 거의 사용되지 않습니다.

예제 4:

function Boy(name) {
  this.name = name;
  return { //返回一个对象
    name: 'Jack'
  }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack

예제 5:

function Boy(name) {
  this.name = name;
  return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

호출 및 적용의 역할

apply는 함수 본문에서 this의 포인터를 지정하고 두 번째 매개변수는 배열 또는 배열입니다. like, 호출된 함수를 전달하는 데 사용되는 매개변수 목록입니다.

예제 1:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming

call 전달되는 매개변수의 개수는 고정되어 있지 않습니다. 적용과 마찬가지로 첫 번째 매개변수도 함수 본문에서 이 지점을 지정하는 데 사용됩니다. 두 번째 매개변수부터 시작하여 각 매개변수가 전달됩니다. 차례로 호출된 함수에.

예제 2:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping

또한 대부분의 고급 브라우저에서는 바인딩 메서드도 구현합니다. 호출과 적용의 차이점은 바인딩이 함수 내에서 이 포인터만 변경하지만 즉시 실행되지는 않는다는 것입니다. 명시적으로 호출해야 합니다.

예제 3: 브라우저의 바인드 방법 시뮬레이션

Function.prototype.bind = function(obj){
  var self = this;
  return function(){
    return self.apply(obj,arguments);
  }
};
var obj = {
  name: 'Bob',
  age: 12
};
var func = function(){
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');

Lost this

어떤 경우에는 this의 포인팅이 손실될 수 있습니다. 이 때 this의 포인팅을 변경하려면 호출, 적용 및 바인딩을 사용해야 합니다.

예제 1: "boy" 객체의 속성으로 "getName" 메서드를 호출하면 "boy" 메서드를 다른 변수에서 참조하는 경우 일반 메서드로 호출되기 때문입니다. 함수, 이것은 전역 객체 창을 가리킵니다

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined

예 2: 함수 내부에 함수가 정의되어 있어도 일반 객체로 호출하면 이것도 윈도우 객체를 가리킵니다

var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined

위는 제가 컴파일한 것입니다 모두를 위해. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

NodeJS 상위 프로세스와 하위 프로세스 간의 리소스 공유 단계에 대한 자세한 설명

JS 익명 자체 실행 함수 개념 및 사용 지침

JS QR 생성 방법 분석 링크의 코드 이미지

위 내용은 JS에서 이것을 가리키는 것과 호출 및 적용 기능(그림 및 텍스트 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!