JavaScript 객체지향 상속 방법의 고전적인 구현_기본 지식

WBOY
풀어 주다: 2016-05-16 17:24:57
원래의
932명이 탐색했습니다.

JavaScript는 거의 20년 동안 존재했지만 이 예언에 대해서는 여전히 다른 의견이 있습니다. 많은 사람들은 JavaScript를 객체지향 프로그래밍 언어로 간주할 수 없다고 말합니다. 그러나 JavaScript는 형식이 매우 느슨하고 컴파일러가 없습니다. 이는 프로그래머에게 많은 자유를 제공하지만 몇 가지 결함도 가져옵니다.

자바스크립트는 객체지향 언어는 아니지만. 하지만 우리는 다른 언어가 객체지향 프로그래밍을 구현하는 방식을 모방함으로써 JavaScript의 객체지향 프로그래밍을 구현할 수 있습니다.

다음은 JavaScript 튜토리얼의 매우 고전적인 상속 방법입니다.

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

//Pet 객체를 정의합니다. 이름과 다리 수를 전달합니다.
var Pet = function (name,legs) {
this.name = name; //이름과 다리 값을 저장합니다.
this.legs = 다리

//애완동물의 이름과 다리 개수를 표시하는 메서드를 만듭니다.
Pet.prototype.getDetails = function () {
return this.name " has " this.legs " Legs ";
}

//Pet에서 상속된 Cat 객체 정의 .
var Cat = function (name) {
Pet.call(this,name,4); //이 상위 객체의 생성자를 호출합니다
}//이 줄 구현 Pet에서 물려받았습니다.
Cat.prototype = new Pet();

//고양이를 위한 액션 메소드 추가
Cat.prototype.action = function () {
return "새 잡기"; 🎜>};

//고양이 인스턴스 petCat을 생성합니다.
var petCat = new Cat("felix");

var Details = petCat.getDetails();
console.log(details) //"felix에는 다리가 4개 있습니다". var action = petCat.action();
console.log(action) //"새를 잡아라".
petCat.name = "sylvester" //petCat 이름 변경
petCat.legs = 7 ; //petCat 다리 수 변경
details = petCat.getDetails();
console.log(details) //"실베스터에는 다리가 7개 있습니다."


위 내용에도 불구하고. method 실행에는 큰 문제가 없으나 전체적인 코드 스타일이 조금 부풀어 오르고 그다지 우아하지 않습니다. 속성은 외부에서 계속 수정할 수 있습니다. 이 접근 방식은 상속된 속성을 보호하지 않습니다. 다음 메소드에서는 new와 프로토타입을 생략하고 "함수 상속" 기능을 사용하여 구현합니다.



코드 복사
코드는 다음과 같습니다. //애완동물 개체를 정의합니다. 이름과 다리 수를 전달합니다. var pet = function (name,legs) { //이름은 변경할 수 있지만 다리 개수는 변경할 수 없는 객체를 생성하여 가변 민영화를 구현합니다.
var that = {
name : name,
getDetails : function () {
return that.name " has "legs "legs ";
};
return that
}

//pet에서 상속된 고양이 개체를 정의합니다.
var cat = function (name) {
var that = pet(name,4); //pet의 속성을 상속합니다

//cat에 액션을 추가하는 메서드입니다.
that.action = function () {
return "새 잡기";
}

return that

//Create a petCat2;
var petCat2 = cat("Felix");

var Details = petCat2.getDetails();
console.log(details) //"felix에는 다리가 4개 있습니다." 🎜>var action = petCat2.action();
console.log(action) //"새 잡기".
petCat2.name = "sylvester"; //이름을 변경할 수 있습니다.
petCat2.legs = 7; //그러나 다리 수는 변경할 수 없습니다.
details = petCat2.getDetails();
console.log(details) //"실베스터에는 다리가 4개 있습니다." >

주의 사항: 프로토타입 상속을 사용하면 메모리 효율성이 향상된다는 이점이 있습니다. 여러 번 상속되더라도 객체의 프로토타입 속성과 메서드는 한 번만 저장됩니다. 함수가 상속되면 새 인스턴스마다 중복 속성과 메서드가 생성됩니다. 큰 개체를 많이 생성하면 메모리 사용량이 매우 커집니다. 해결 방법은 더 큰 속성이나 메서드를 개체에 저장하고 이를 생성자에 매개 변수로 전달하는 것입니다. 이렇게 하면 모든 인스턴스가 자체 버전을 만드는 대신 하나의 개체 리소스를 사용하게 됩니다.

위의 두 가지 방법 모두 JavaScript 객체지향 상속을 쉽게 구현할 수 있습니다. 절대적으로 좋은 방법도 없고 절대적으로 나쁜 방법도 없습니다. 개인 취향에 따라 다릅니다. 이 두 가지 방법만 있는 것은 아닙니다. 댓글과 추가도 환영합니다!~
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!