> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 클래스의 정의 메소드는 무엇입니까?

자바스크립트 클래스의 정의 메소드는 무엇입니까?

青灯夜游
풀어 주다: 2021-04-19 15:01:46
원래의
2959명이 탐색했습니다.

메서드는 다음과 같습니다. 1. 생성자 메서드, 구문 "function Cat(){}var cat1=new Cat();}" 2. Object.create() 메서드, 구문 "var Cat={};var cat1= Object.create(Cat);".

자바스크립트 클래스의 정의 메소드는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

객체 지향 프로그래밍에서 클래스는 동일한 객체 그룹("인스턴스"라고도 함)에 공통적인 속성과 메서드를 정의하는 객체의 템플릿입니다.

Javascript 언어는 "클래스"를 지원하지 않지만 몇 가지 해결 방법을 사용하여 "클래스"를 시뮬레이션할 수 있습니다.

1. 생성자 방법

이것은 고전적인 방법이자 교과서에서 가르쳐야 하는 방법입니다. 생성자를 사용하여 "클래스"를 시뮬레이션하고 내부적으로 this 키워드를 사용하여 인스턴스 개체를 참조합니다.

  function Cat() {
    this.name = "大毛";
  }
로그인 후 복사

인스턴스를 생성할 때 new 키워드를 사용하세요.

  var cat1 = new Cat();
  alert(cat1.name); // 大毛
로그인 후 복사

클래스의 속성과 메서드는 생성자의 프로토타입 객체에서도 정의할 수 있습니다.

  Cat.prototype.makeSound = function(){
    alert("喵喵喵");
  }
로그인 후 복사

이 방법에 대한 자세한 소개는 제가 쓴 "Javascript 객체 지향 프로그래밍" 시리즈 기사를 참조하세요. 여기서는 자세히 다루지 않겠습니다. 가장 큰 단점은 상대적으로 복잡하고, 이것과 프로토타입을 사용하며, 쓰고 읽는 데 매우 힘들다는 것입니다.

2.Object.create() 메소드

"생성자 메소드"의 단점을 해결하고 보다 편리하게 객체를 생성하기 위해 국제 표준인 Javascript용 ECMAScript 제5판(현재 제3판이 인기를 끌고 있습니다) 새로운 메소드 Object.create()가 제안되었습니다.

이 방법을 사용하면 "클래스"는 함수가 아니라 객체가 됩니다.

  var Cat = {
    name: "大毛",
    makeSound: function(){ alert("喵喵喵"); }
  };
로그인 후 복사

그런 다음 New를 사용하지 않고 Object.create()를 직접 사용하여 인스턴스를 생성합니다.

  var cat1 = Object.create(Cat);
  alert(cat1.name); // 大毛
  cat1.makeSound(); // 喵喵喵
로그인 후 복사

현재 모든 주요 브라우저(IE9 포함)의 최신 버전에서는 이 방법을 배포했습니다. 오래된 브라우저를 사용하는 경우 다음 코드를 사용하여 직접 배포할 수 있습니다.

  if (!Object.create) {
    Object.create = function (o) {
       function F() {}
      F.prototype = o;
      return new F();
    };
  }
로그인 후 복사

이 방법은 "생성자 방법"보다 간단하지만 전용 속성과 전용 메서드를 구현할 수 없고 인스턴스 객체 간에 데이터를 공유할 수도 없으며 "클래스" 시뮬레이션이 충분히 포괄적이지 않습니다.

【추천 학습: javascript 고급 튜토리얼

위 내용은 자바스크립트 클래스의 정의 메소드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿