JavaScript 객체 지향 기본 사항과 이 포인팅 문제를 이해하는 방법

서문

우리의 프로그래밍 언어는 "기계 지향"에서 "프로세스 지향", 그리고 "객체 지향"으로의 과정을 거쳤습니다. 자바스크립트는 프로세스 지향과 객체 지향 사이에 있는 객체 기반 언어입니다. JavaScript를 학습하는 과정에서 OOP는 매우 중요한 부분입니다. JS의 객체지향 접근 방식에 대해 논의해 보겠습니다. ! !

1. OOP의 기본 문제

1.1프로세스 지향과 객체 지향이란 무엇인가요?

프로세스 지향: 문제 해결 방법의 프로세스 단계에 중점을 둡니다. 프로그래밍의 특징은 프로세스의 각 단계가 클래스나 객체의 개념 없이 하나씩 함수로 구현된다는 점입니다.

객체 지향: 어떤 객체가 문제를 해결하는지에 집중하세요. 프로그래밍의 특징은 클래스가 차례로 나타나고, 클래스에서 객체를 얻고, 객체를 사용하여 특정 문제를 해결하는 것입니다.

호출자의 경우 프로세스 지향에서는 호출자가 다양한 기능을 직접 구현해야 합니다. 반면에 객체 지향에서는 호출자가 메서드의 구현 세부 사항을 이해할 필요 없이 호출자에게 객체에 있는 특정 메서드의 기능만 알려 주면 됩니다.

1.2객체 지향의 세 가지 주요 특징

상속, 캡슐화, 다형성

1.3클래스와 객체의 관계

① 카테고리 : 동일한 특성(속성)과 동작(메서드)을 가진 클래스 모음입니다.

예: 인간 -->속성: 키, 몸무게, 성별 방법: 먹기, 말하기, 걷기

② Object: 수업에서 특정 속성 값을 가진 개인을 꺼내세요 ​​및 방법.

예: Zhang San --> 속성: 키 180, 몸무게 180 방법: Talk --> 내 이름은 Zhang San, 키 180

3 클래스와 객체의 관계

클래스는 추상적이고 객체는 구체적입니다(클래스는 객체의 추상화이고 객체는 클래스의 구체화입니다)

설명:

클래스는 추상적인 개념이라고만 말할 수 있습니다. 클래스에는 속성과 메서드가 있지만 속성에 특정 값을 할당할 수는 없습니다. 예를 들어, 인간에게는 이름이 있지만 그 이름이 무엇인지 말할 수는 없습니다. . .

객체는 특정 인스턴스, 즉 클래스의 속성에 특정 값을 할당하는 개체입니다. 예를 들어, 장산(Zhang San)이 개인이라면 장산(Zhang San)의 이름은 장산(Zhang San)이라고 말할 수 있습니다. 즉, 장삼은 인간의 각 속성에 특정한 할당을 하였으므로 장삼은 인간이 생성한 대상이다.

2. JavaScript의 객체 지향

2.1클래스 및 객체 생성 단계

① 클래스 생성(생성자): 클래스 이름은 다음과 같습니다. CamelCase를 사용하세요. 즉, 각 단어의 첫 글자를 대문자로 사용해야 합니다.

1 function 类名(属性1){
2      this.属性1 = 属性1;
3      this.方法 = function(){
4          //方法中要调用自身属性，必须要使用this.属性
5      }
6 }

② 클래스를 통해 객체를 (새로) 인스턴스화합니다.

var obj = new 类名(属性1的具体值);
obj.属性;    调用属性
obj.方法();     调用方法

③Notes

>>>클래스 이름을 통해 객체를 생성하는 과정을 "클래스의 인스턴스화"라고 합니다

>>>클래스 내에서 이것이 인스턴스화되면, 새로 생성된 개체를 가리킵니다. 따라서 this.property 및 this.method는 실제로 새 개체에 속성과 메서드를 바인딩합니다.

>>>클래스에서 자신의 속성을 호출하려면 this.property 이름을 사용해야 합니다. 변수 이름을 직접 사용하면 해당 속성에 접근할 수 없습니다.

>>>클래스 이름은 큰 낙타 케이스 규칙을 사용해야 하며 일반 함수와의 차이점에 주의하세요.

2.2두 가지 중요한 속성 생성자와 인스턴스of

①constructor: 현재 객체의 생성자를 반환

>>>zhangsan.constructor = Person;

②instanceof: 객체가 클래스의 인스턴스인지 감지합니다.

>>lisi instanceof Person √ lisi는 새로운 Person 클래스를 통해 생성됩니다

>>> ;lisi instanceof Object √ 모든 객체는 Object

>>>Person instanceof Object √ 함수 자체도 객체입니다

3. JavaScript의 이 포인팅 문제

在上一部分中，我们创建了一个类，并通过这个类new出了一个对象。 但是，这里面出现了大量的this。 很多同学就要懵逼了，this不是“这个”的意思吗？为什么我在函数里面写的this定义的属性，最后到了函数new出的对象呢？？

3.1谁最终调用函数，this就指向谁！

① this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！
② this指向的，永远只可能是对象，不可能是函数！！
③ this指向的对象，叫做函数的上下文context，也叫函数的调用者。

3.2this指向的规律(与函数的调用方式息息相关！)

① 通过函数名()调用的，this永远指向window

func(); // this--->window//【解释】 我们直接用一个函数名()调用，函数里面的this，永远指向window。

② 通过对象.方法调用的，this指向这个对象

// 狭义对象
    var obj = {
        name:"obj",
        func1 :func
    };
    obj.func1(); // this--->obj//【解释】我们将func函数名，当做了obj这个对象的一个方法，然后使用对象名.方法名， 这时候函数里面的this指向这个obj对象。

    // 广义对象
    document.getElementById("p").onclick = function(){        
    this.style.backgroundColor = "red";
}; // this--->p//【解释】对象打点调用还有一个情况，我们使用getElementById取到一个p控件，也是一种广义的对象，用它打点调用函数，则函数中的this指向这个p对象。

③ 函数作为数组的一个元素，用数组下标调用，this指向这个数组

var arr = [func,1,2,3];
arr[0]();  // this--->arr//【解释】这个，我们把函数名，当做数组中的一个元素。使用数组下标调用，则函数中的this将指向这个数组arr。

④ 函数作为window内置函数的回调函数使用，this指向window。比如setTimeout、setInterval等

setTimeout(func,1000);// this--->window//setInterval(func,1000);//【解释】使用setTimeout、setInterval等window内置函数调用函数，则函数中的this指向window。

⑤ 函数作为构造函数，使用new关键字调用，this指向新new出的对象

var obj = new func(); //this--->new出的新obj//【解释】这个就是第二部分我们使用构造函数new对象的语句，将函数用new关键字调用，则函数中的this指向新new出的对象。

3.3关于this问题的面试题

var fullname = 'John Doe';var obj = {
　　fullname: 'Colin Ihrig',
　　prop: {
　　　　fullname: 'Aurelio De Rosa',
　　　　getFullname: function() {
　　　　　　return this.fullname;
　　　　}
　　}
};
console.log(obj.prop.getFullname()); 
// 函数的最终调用者 obj.prop 
            var test = obj.prop.getFullname;
console.log(test());  
// 函数的最终调用者 test()  this-> window            obj.func = obj.prop.getFullname;
console.log(obj.func()); 
// 函数最终调用者是obj
            var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());// 函数最终调用者数组

위 내용은 JavaScript 객체 지향 기본 사항과 이 포인팅 문제를 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!