JavaScript에서 이 포인터에 대한 새로운 이해

이 글에서는 주로 JavaScript에서 이 포인터에 대한 새로운 이해와 공유를 소개합니다. 이 글에서는 메서드 호출 모드, 함수 호출 모드, constructor 호출 모드 및 Apply 호출 모드에서 이 포인터에 대한 이해를 설명합니다. 참고로

이에 대한 이해는 항상 사용할 수 있고 사용할 수 있다는 것이었지만 본질을 탐구하지 않았습니다. 이번에 "JavaScript The Good Parts"를 통해 깊은 이해를 얻었습니다. (모든 디버깅은 콘솔, 브라우저 F12 키에서 볼 수 있습니다)

이것을 함께 살펴보겠습니다.

함수를 선언할 때 정의할 때 매개변수(형식 매개변수) 외에도 각 함수에는 두 개의 추가 매개변수도 있습니다. 하나는 this이고 다른 하나는 인수(실제 매개변수)입니다. 인수는 배열과 유사한 배열인 함수가 실제로 수신한 매개변수입니다. 나는 이 점을 중심으로 논쟁에 대해 간략하게 소개할 것이다.

객체 지향 프로그래밍에서 이는 매우 중요하며 그 값은 호출 모드에 따라 다릅니다. JavaScript에는 메소드 호출 모드, 함수 호출 모드, 생성자 호출 모드, 적용 호출 모드 등 총 4가지 호출 모드가 있습니다.

패턴 호출 메서드

함수가 객체의 속성으로 사용될 때 우리는 일반적으로 함수를 객체의 메소드라고 부릅니다. 이 메소드가 호출되면 이는 해당 메소드가 속한 객체를 가리킵니다.

코드는 다음과 같습니다.

<script type="text/javascript">
    var people = {
        name : "Yika",
        sayName : function(){
            console.log(this.name);   //"Yika"
                        //this已经绑定在了people对象上了
        }
    }
    people.sayName();
</script>

밤나무에 표시된 것처럼 이것은 sayName 개체를 가리킵니다. 이를 통해 개체의 컨텍스트를 얻는 방법은 공개 방법입니다. (공개 메소드)

함수 호출 모드

함수가 호출되고 객체에 대한 메소드가 아닌 경우 함수로 호출됩니다.

이 모드에서 호출되면 window 개체를 가리킵니다. 이 함수가 외부 함수에서 호출될 수 있더라도 예를 살펴보겠습니다.

코드는 다음과 같습니다.

<script type="text/javascript">
    var name = "window-Yika";
    var people = {
        name : "people-Yika",
        student : function(){
            console.log(this);   //这里的this绑定的是对象people
            function sayName(){
                var name = "sayName-Yika";
                console.log(this.name); //window-Yika
　　　　　　　　　　//即使sayName函数本身和它所在的people对象都有name值，但是this是指向window的
            };
            sayName();
        }
    }
    people.student();
</script>

이렇게 보면 아마도 JavaScript에서 이 "설계 오류"를 해결하는 방법을 알 수 있을 것입니다.

예, 이것을 학생 함수의 6번째 줄에 캐시하면 됩니다. 그런 다음 이를 변수를 통해 sayName 함수에 전달하면 해결할 수 있습니다!

코드는 다음과 같습니다:

var people = {
        name : "people-Yika",
        student : function(){
            var self = this; //将this缓存起来
            function sayName(){
                var name = "sayName-Yika";
                console.log(self.name);  //"people-Yika"，此时的self指向的是people对象
            };
            sayName();
        }
    }

생성자 호출 모드

JavaScript의 생성자에 관해서는 다음과 같은 생각이 들 것입니다. "함수 이름을 대문자로 시작하세요! 호출할 때 new연산자를 사용하세요!" 함수 이름은 대문자로 표기합니다. 이해하기 쉽도록 통일된 생성자의 이름을 표준화하기 위함입니다. 그런데 왜 new를 사용해야 하는지 생각해 본 적이 있나요? 앞에 new를 붙여서 함수를 호출하면 함수 배경이 함수의 프로토타입을 가리키는 새 객체를 생성하고 이 객체도 새 객체에 바인딩됩니다. JavaScript는 프로토타입 상속을 기반으로 하는 언어입니다. 프로토타입에 대해 잘 모르는 학생이 스스로 정보를 확인할 수 있습니다.

먼저 생성자의 일반적인 모습을 살펴보겠습니다.

코드는 다음과 같습니다.

<script type="text/javascript">
    function People(name){
        this.name = name;    //这里的this，用new调用后便指向了新对象Yika　　　　
　　　　 this.sayName = function(){
        　　console.log(this.name);  //输出
    　　}
    }
　　var Yika = new People("Yika");  
   Yika.sayName();  //输出“Yika" ，因为Yika是通过new调用得来的，this都绑定在了Yika对象上。
</script>

언뜻 보면 이해하기 쉽지 않을 것 같습니다. 함수에서는 왜 창만 가리켰는데 이제는 캐싱 없이 People 함수를 가리킬 수 있나요?

상관없습니다. 방금 함수가 new를 통해 호출되면 뒤에서 "나쁜 일"을 하게 된다고 말하지 않았나요?

코드는 다음과 같습니다.

<script type="text/javascript">
    function People(name){
        var that = {};   //坏事一：自己生成一个对象
        that.name = name;
        that.sayName = function(){
            console.log(that.name);
        };
        return that;    //坏事二，自己会改变return的行为，return刚生成的对象
    }
    var Yika = People("Yika"); //这里可以省略new，模仿调用new操作符
    Yika.sayName(); //和刚才一样输出"Yika"
</script>

이렇게 보면 명확해집니다. New는 객체를 생성할 뿐만 아니라 자동으로 이 객체를 반환하므로 자연스럽게 이 새로운 객체를 가리킬 것입니다. .

생성자를 호출하려면 반드시 new를 사용해야 합니다. 그렇지 않으면 문제가 발생해도 경고가 표시되지 않습니다. 모든 대문자 사용 규칙은 여전히 ​​매우 필요합니다.

호출 모드 적용

적용 메소드를 사용하면 호출 함수에 전달할 매개변수 배열을 구성할 수 있으며 this 값을 변경할 수도 있습니다.

function.apply(이 바인딩된 값, 인수 매개변수 배열)

apply 설명할 수 있는 내용이 너무 많습니다. 이해를 돕기 위해 예만 제시하겠습니다.

코드는 다음과 같습니다.

<script type="text/javascript">
    function People(name){
        this.name = name;
        this.sayName = function(){
            console.log(this.name);   //sayName这个方法是属于People构造函数的
        }
    }
    function Student(name){
        People.apply(this, arguments);//借用构造函数的集成方式，就是在Student构造函数里，通过apply调用People构造函数，并改变People的this值
                                      //这样每次创建Student实例时，都会调用People构造函数
    }
    var student = new Student("Yika");
    student.sayName(); //输出“Yika”
</script>

Apply를 통해 이 바인딩 객체를 쉽게 수정할 수 있습니다. Apply와 유사한 호출 방식도 동일한 효과를 가지며, 관심 있는 학생들이 스스로 검색하고 학습할 수 있습니다.

이것을 변경하기 위한 4가지 호출 모드에 대해 드디어 이야기를 마쳤습니다. 메서드 호출 모드와 생성자 호출 모드가 더 많이 사용되고 함수 호출 모드는 트랩을 피하는 방법을 배워야 합니다.

오류가 있는 경우 제보해 주시면 다른 분들이 오해하지 않도록 최대한 빨리 수정하겠습니다. 감사합니다!

위 내용은 JavaScript에서 이 포인터에 대한 새로운 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!