JavaScript 객체 지향 및 이 포인팅(코드 포함)

이번에는 JavaScript 객체지향과 이 포인팅(코드 포함)을 가져왔습니다. JavaScript객체지향과 이 포인팅을 사용할 때 주의사항은 무엇입니까? 다음은 실제 사례입니다.

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

1. OOP의 기본 문제

1.1 프로세스 지향과 객체 지향이란 무엇입니까?

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

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

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

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

상속, 캡슐화, 다형성

1.3 클래스와 객체의 관계

① 클래스(Class) : 동일한 특성(속성)과 동작(메서드)을 가진 클래스들의 집합입니다.

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

② 객체(Object) : 클래스에서 특정 속성값과 메소드를 가진 개체를 꺼낸다.

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

③ 클래스와 객체의 관계

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

설명:

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

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

2. JavaScript의 객체 지향

2.1 클래스 및 객체 생성 단계

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

rreee

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

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

obj.property 호출 속성

obj.method(); 호출 방법

③주의사항

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

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

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

>>>클래스 이름은 카멜 케이스 규칙을 사용해야 하며 일반 함수와의 차이점에 주의해야 합니다.

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

①constructor：返回当前对象的构造函数

>>>zhangsan.constructor = Person; √

②instanceof：检测一个对象，是不是一个类的实例；

>>>lisi instanceof Person √ lisi是通过Person类new出的

>>>lisi instanceof Object √ 所有对象都是Object的实例

>>>Person instanceof Object √ 函数本身也是对象

3、 JavaScript中的this指向问题

在上一部分中，我们创建了一个类，并通过这个类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]());
// 函数最终调用者数组

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue中computed属性的使用方法

ajax与跨域jsonp

위 내용은 JavaScript 객체 지향 및 이 포인팅(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!