js에서 이것을 어떻게 사용합니까? js에서 이 키워드의 사용법(코드 포함)

이 글의 내용은 js에서 this의 용도가 무엇인지에 관한 것입니다. js에서 이 키워드의 사용법(코드 포함)은 js에서 이에 대한 이해를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우선 JS에서 함수를 호출하는 여러 가지 방법을 이해해야 합니다.
1. 일반적인 함수 호출
2. 메서드로 호출
3. 호출하려면 적용/호출 메서드를 사용하세요. 5. Function.prototype.bind 메서드
6.es6 화살표 함수
요점: 함수가 어떻게 호출되든, 누가 이 함수나 메서드를 호출하든 this 키워드는 누구를 가리킬 것이므로 이 점을 명심하세요. !important

아래 예시를 통해 각 방법을 설명해드리겠습니다!

1.이 키워드의 사용법: 일반 함수 호출

(function fun(){
        this.name="segmentfault";
        console.log(this);  //window
        console.log(this.name);  //segmentfault        
})()
console.log(window.name);  //segmentfault  由此可见name属性属于window的属性。

이 코드에서는 fun 함수를 일반 함수로 호출합니다. 실제로 fun은 전역 개체 창의 메서드로 호출됩니다. 즉, window.fun(); 따라서 여기에서 window 객체는 fun 메서드를 호출하고 fun 함수의 this는 window를 참조하며 window에는 값이 세그먼트fault인 다른 속성 이름도 있습니다.

2 .this 키워드는

var name="segmentfault";

var fun={

name:"segmentfault-A",
showName:function(){
    console.log(this.name);  //输出  segmentfault-A
}

}fun.showName();을 호출하는 메서드로 사용됩니다.

//여기에 showName 메서드를 호출하는 재미있는 개체가 있습니다. , 당연히 this 키워드는 fun 개체를 가리키므로 name

var funA = fun.showName;

funA(); //Output 세그먼트fault

//여기서 fun.showName 메서드는 funA 변수에 할당되고 funA 변수는 동등하다 윈도우 객체의 속성이므로 showNameA()가 실행되면 window.funA()와 동일하다. 즉, 윈도우 객체가 funA 메소드를 호출하므로 this 키워드는 윈도우를 가리킨다. 다른 방식으로 살펴보겠습니다.

var funA={
    name:"segmentfault",
    showName:function(){
        console.log(this.name);
    }
}
var funB={
    name:"segmentfault-A",
    sayName:funA.showName
}

funB.sayName();  //输出 segmentfault-A
//虽然showName方法是在funA这个对象中定义，但是调用的时候却是在funB这个对象中调用，因此this对象指向funB

3.this 이 키워드의 사용법은 생성자로 호출하는 것입니다

function fun(name){
    this.name=name;
}
var funA = fun("segmentfault");   
console.log(funA.name); // 输出  undefined
console.log(window.name);//输出  segmentfault
//上面代码没有进行new操作，相当于window对象调用fun("segmentfault")方法，那么this指向window对象，并进行赋值操作window.name="segmentfault".

var funB=new fun("segmentfault");
console.log(funB.name);// 输出 segmentfault

4 이 키워드의 사용법은 JS에서 호출/적용 메소드를 호출하는 것입니다. , 함수도 객체이므로 함수에도 메서드가 있습니다. Function.prototype에서 Function.prototype.call/Function.prototype.apply 메소드로 상속됨 call/apply 메소드의 가장 큰 기능은 이 키워드의 포인팅을 변경하는 것입니다.

Obj.method.apply(AnotherObj,arguments) ;

var name="segmentfault-A";
var fun={
    name:"segmentfault",
    showName:function(){
        console.log(this.name);
    }
}
fun.showName.call(); //输出 "segmentfault-A"
//这里call方法里面的第一个参数为空，默认指向window。
//虽然showName方法定义在fun对象里面，但是使用call方法后，将showName方法里面的this指向了window。因此最后会输出"segmentfault-A";
function FruitA(n1,n2){
    this.n1=n1;
    this.n2=n2;
    this.change=function(x,y){
        this.n1=x;
        this.n2=y;
    }
}

var fruitA = new FruitA("cheery","banana");
var FruitB={
    n1:"apple",
    n2:"orange"
};
fruitA.change.call(FruitB,"pear","peach");

console.log(FruitB.n1); //输出 pear
console.log(FruitB.n2);// 输出 peach

FruitB는 FruitA의 변경 메소드를 호출하고 이를 FruitA의 객체 FruitB에 바인딩합니다.

5. 이 키워드를 사용하는 Function.prototype.bind() 메소드

 var name="segmentfault-A";
function fun(name){
    this.name=name;
    this.sayName=function(){
        setTimeout(function(){
            console.log("my name is "+this.name);
        },50)
    }
}
var funA = new fun("segmentfault");
funA.sayName()  //输出  “my name is segmentfault-A”;
//这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象对调用,因此this的指向为window, 则this.name则为segmentfault-A

segmentfault를 출력하려면 아래의 bind() 메소드를 사용하세요

var name="segmentfault";
function fun(name){
    this.name=name;
    this.sayName=function(){
        setTimeout(function(){
            console.log("my name is "+this.name);
        }.bind(this),50)  //注意这个地方使用的bind()方法，绑定setTimeout里面的匿名函数的this一直指向fun对象
    }
}
var funA = new fun("segmentfault");
funA.sayName()  //输出  “my name is segmentfault”;
//这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象对调用,因此this的指向为window, 则this.name则为segmentfault

여기 setTimeout(function(){console.log(this.name )} .bind(this),50);, 익명 함수는 바인딩(this) 메서드를 사용하여 새 함수를 생성합니다. 이 새 함수가 실행되는 위치에 관계없이 this는 window가 아닌 ​​fun을 가리키므로 최종 출력은 " "내 이름은 Segmentfault-A" 대신 "내 이름은 Segmentfault"입니다.몇 가지 참고할 사항:

setTimeout/setInterval/anonymous 함수가 실행되면 수동으로 변경하지 않는 한 기본적으로 창 개체를 가리킵니다. . "JavaScript 고급 프로그래밍"에는 "타임아웃 호출 코드(setTimeout)는 전역 범위에서 실행되므로 함수의 this 값은 비엄격 모드에서는 창 개체를 가리키고, 엄격 모드에서는 창 개체를 가리킵니다. 모드에서는 정의되지 않음을 가리킵니다." 이 글은 모두 non-strict 모드로 작성되었습니다.

6. 이 키워드 사용을 위한 평가 함수

이 함수가 실행되면 현재 범위의 객체에 바인딩됩니다.

var name="segmentfault-A";
var fun = {
    name:"segmentfault",
    showName:function(){
        eval("console.log(this.name)");
    }
}

fun.showName();  //输出  "segmentfault"

var a = fun.showName;
a();  //输出  "segmentfault-A"

7. 이 키워드 사용을 위한 화살표 함수

es6 내부 지점은 고정되어 있으며 항상 외부 개체를 가리킵니다. 화살표 함수에는 이것이 없기 때문에 자체적으로 new를 인스턴스화할 수 없으며 동시에 this 지점을 변경하기 위해 호출, 적용, 바인딩 및 기타 메서드를 사용할 수 없습니다. .

 function Timer() {
    this.seconds = 0;
    setInterval( () => this.seconds ++, 1000);
} 

var timer = new Timer();

setTimeout( () => console.log(timer.seconds), 3000);

// 3
   // 在构造函数内部的setInterval()内的回调函数，this始终指向实例化的对象，并获取实例化对象的seconds的属性,每1s这个属性的值都会增加1。否则最后在3s后执行setTimeOut()函数执行后输出的是0

관련 추천:

js에서 이 키워드에 대한 이해

js_javascript 기술에서 이 키워드에 대한 이해

js에 대한 질문 이 키워드_javascript 기술

위 내용은 js에서 이것을 어떻게 사용합니까? js에서 이 키워드의 사용법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!