> 웹 프론트엔드 > JS 튜토리얼 > javascript_js 객체 지향으로 클래스를 작성하는 세 번째 방법

javascript_js 객체 지향으로 클래스를 작성하는 세 번째 방법

WBOY
풀어 주다: 2016-05-16 18:50:49
원래의
751명이 탐색했습니다.

앞의 두 가지 장점을 활용하세요.
a. 생성자를 사용하여 클래스 속성(필드)을 정의합니다.
b. 프로토타입을 사용하여 클래스 메서드를 정의합니다.
세 번째 방법이 있습니다. 이 방법을 더 많은 분들이 사용하시는 것 같습니다.
3. 종합 생성자/프로토타입

코드 복사 코드는 다음과 같습니다.

/* *
* Person 클래스: 사람을 정의하고 속성 이름과 getName 메소드를 가집니다.
* @param {String} name
*/
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name ;
}

이렇게 하면 생성자를 통해 서로 다른 이름을 가진 사람들을 구성할 수 있으며, 개체 인스턴스도 getName 메서드를 공유하므로 메모리 낭비가 발생하지 않습니다.
그러나 이 코딩 스타일은 아직 Java 클래스만큼 컴팩트하지 않은 것 같습니다. 속성, 생성자(함수) 및 메서드는 모두 중괄호로 묶여 있습니다.
코드 복사 코드는 다음과 같습니다.

public class Person {
// 속성(필드)
문자열 이름
//생성자(함수)
Person(문자열 이름) {
this.name = 이름
}
//메소드
String getName () {
return this.name;
}
}

js 코드 스타일을 더 간결하게 만들기 위해 프로토타입에 걸려 있는 메소드 코드를 Person Inside 함수의 중괄호입니다.
코드 복사 코드는 다음과 같습니다.

function Person(name) {
this.name = name;
Person.prototype.getName = function() {
return this.name;
}
}

이렇게 할 수 있다는 게 놀라운 것 같아요. 이렇게 써라! 확인
코드 복사 코드는 다음과 같습니다.

var p1 = new Person("Jack ") ;
var p2 = new Person("Tom");
console.log(p1.getName());//Jack
console.log(p2.getName());// Tom

오류가 보고되지 않으며 콘솔이 올바르게 출력됩니다. 설명은 이렇게 쓰면 됩니다, 하하.
흠, 딱 맞는 것 같네요.
a. 매개변수를 전달하여 개체 인스턴스를 생성할 수 있습니다
b. 개체 인스턴스는 모두 메모리 낭비를 유발하지 않고 동일한 방법을 공유합니다.
c. 코드 스타일도 비교적 간결합니다.
하지만 개체가 새로운 경우
Person.prototype.getName = function() {
return this.name;
}
을 실행하면 불필요한 반복 작업이 발생합니다. getName 메소드는 프로토타입에 걸려 있고 한 번만 실행하면 되기 때문입니다. 약간만 수정하세요.
코드를 복사하세요. 코드는 다음과 같습니다.

function Person (name) {
this.name = name;
if(Person._init==undefine) {
alert("한 번만 실행합니다!")
Person.prototype.getName = function() {
return this.name;
}
Person._init = 1;
}
}

새 두 객체,
코드 복사 코드는 다음과 같습니다.

var p1 = new Person("Andy");// new가 처음으로 뜹니다' 딱 한 번만 해요! '
var p2 = new Person("Lily");//새 객체는 앞으로 더 이상 실행되지 않습니다

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