자바스크립트 객체지향의 기본과 이 포인팅 문제에 대한 구체적인 분석

아래 편집기는 JavaScript 객체 지향 기본 사항과 이 문제에 대한 일반적인 기사를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터 따라가서 함께 살펴볼까요

머리말

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

1. OOP의 기본 질문

1.1 프로세스 지향과 객체 지향이란?

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

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

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

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

상속, 캡슐화, 다형성

1.3 클래스와 객체의 관계

① 클래스: 특성(속성)과 동작이 동일한 클래스 (방법) ) 컬렉션.

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

② 개체: 수업에서 특정 속성 값과 방법을 가진 개인을 꺼냅니다.

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

3 클래스와 객체의 관계

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

설명:

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

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

2. JavaScript의 객체 지향

2.1 클래스 및 객체 생성 단계

① 클래스 생성(생성자): 클래스 이름은 큰 카멜 케이스 규칙을 사용해야 합니다. 각 단어의 수 첫 글자는 대문자여야 합니다.

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

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

var obj = 새 클래스 이름(속성 1의 특정 값);

obj.property; 호출 메소드

③Notes

>> 객체를 새로 생성하는 프로세스를 "클래스 인스턴스화"라고 합니다.

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

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

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

2.2 두 가지 중요한 속성 constructor 및 instanceof①constructor: 현재 객체의 생성자를 반환합니다

>>>zhangsan.constructor = Person √

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

>>>lisi instanceof Person √ lisi는 Person 클래스를 통해 생성됩니다. new

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

>>> ;Person의 인스턴스입니다. instanceof Object √ 함수 자체도 객체입니다

3. JavaScript의 이 포인팅 문제이전 부분에서는 클래스를 만들고 이 클래스를 통해 새로운 객체를 만들었습니다. 그러나 그 안에는 이것이 많이 있습니다. 많은 학생들이 헷갈려 하는 게 '이것'이라는 뜻이 아닌가요? 내가 함수에 작성한 이것에 의해 정의된 속성이 함수 new에 의해 생성된 객체로 끝나는 이유는 무엇입니까? ?

3.1 최종적으로 누가 함수를 호출하든, 이는 누구를 가리킬 것입니다!

① 이것이 누구를 가리키는지는 함수가 선언된 곳이 아니라 함수가 호출되는 곳을 고려해야 합니다! !

② 이것이 가리키는 것은 항상 함수가 아닌 객체일 수 있습니다! !

③ 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]());
// 函数最终调用者数组

好了，这篇博客，我们了解了什么是面向对象、类和对象的关系、JS中声明类与对象的步骤，以及重点讲解的this指向问题！ 希望能够帮助大家真正的理解了this的认知，下面我会继续给大家分享关于面向对象方面的问题。多谢大家的支持！！！

위 내용은 자바스크립트 객체지향의 기본과 이 포인팅 문제에 대한 구체적인 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!