찾다
웹 프론트엔드JS 튜토리얼javascript 객체지향 프로그래밍_js 객체지향에 대한 간략한 토론

느낌표는 심각한 분위기를 해소하고 오늘 이야기할 주제인 "자바스크립트 객체지향 프로그래밍"으로 이어지도록 하기 위한 것입니다. 다음으로 객체지향의 몇 가지 주요 키워드인 캡슐화, 상속, 다형성에 초점을 맞춰 보겠습니다.
Encapsulation : 자바스크립트에서 객체를 생성하는 모드에서는 개인적으로 클로저가 진짜 캡슐화라고 생각하는데, 먼저 클로저에 대해 간단히 소개하고 다음 예를 살펴보겠습니다.

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

낯익은 것 같은데? 맞습니다. 이것은 실제로 간단한 클로저 애플리케이션입니다. 간략한 설명: 위의 myInfo 함수에 정의된 변수는 내장 함수 showInfo에서 액세스할 수 있지만(이해하기 쉽습니다), 이 내장 함수의 반환 참조를 oldFish 변수에 할당하면 이 함수는 showInfo는 myInfo 함수 본문 외부에서 호출되지만 함수 본문에 정의된 변수에도 액세스할 수 있습니다. 아, 그래!
클로저의 원칙을 요약해 보겠습니다. 함수는 호출되는 범위가 아닌 정의된 범위에서 실행됩니다. 실제로 인라인 함수를 반환하는 것은 클로저를 생성하는 가장 일반적인 방법이기도 합니다!
위의 설명이 너무 추상적이라고 생각된다면 위의 함수를 함께 재구성하여 좀 더 계층적인지 살펴보겠습니다.




코드 복사
코드는 다음과 같습니다. var ioldFish = function(name,age){
var name = 이름, 나이 = 나이
var myInfo = "내 이름은" 이름 "나는" 나이 "세"
return{
showInfo:function(){
alert(myInfo) ;
}
}
}
ioldFish("老鱼",27).showInfo()



위의 예는 ext yui에서 더 흔하며, 퍼블릭과 프라이빗이 한눈에 확연히 구분됩니다. 클로저를 통해 외부에서 직접 접근하고 싶지 않은 것들을 쉽게 숨길 수 있습니다. 함수 내에 정의된 변수에 접근하려면 특정 메소드를 통해서만 접근할 수 있습니다. .. 못찾고 쓰다가 너무 지쳐서 결국 다시 찾아왔습니다. ㅎㅎ...
위 예시를 JQ 스타일로 변환하면 다음 예시와 같이 작성해야 합니다. 이런 캡슐화 모드는 오픈 도어 모드에 속하며, 여기에 정의된 변수는 외부에서 접근 가능합니다. 다음 예에서는 먼저 개체를 인스턴스화한 다음 함수 외부에서 개체의 이름이나 나이 속성에 액세스하는 경우 팀 개발 구성원이 어떤 변수가 비공개인지 이해할 수 있도록 몇 가지 "숨겨진 규칙"을 설정할 수 있습니다. , 일반적으로 경고 신호를 표시하기 위해 개인 변수 및 메소드 앞에 밑줄 "_"을 인위적으로 추가합니다! 따라서 "캡슐화"를 달성합니다!



코드 복사
코드는 다음과 같습니다. var ioldFish = function(name,age){
return ioldFish.func.init(name,age);
};
ioldFish.func = ioldFish.prototype ={
init: function(name,age){
this.name = name;
this.age = age
return this;
},
showInfo:function(){
var info = "내 이름은" this.name "나는 " this.age "살입니다";
alert(info)
}
ioldFish.func.init. 프로토타입 = ioldFish .func;
ioldFish("老鱼",27).showInfo();
//var oldFish = new ioldFish("老鱼",27); .이름) ;

어떤 사람들은 어떤 모드가 더 좋냐고 물을 수도 있습니다. 이것을 어떻게 말합니까? 두 가지 방법 모두 장단점이 있으므로 함께 사용해보세요! 간단히 말해서, 외부 개체가 직접 접근할 수 없는 항목이 있으면 클로저를 사용하여 캡슐화하는 것이 원칙입니다. "확실히 확실히"라는 네 단어는 매우 심오하며 지속적인 연습을 통해서만 진정한 의미를 깨달을 수 있습니다!
상속: 이에 대해 언급할 때 한 가지 더 추가하고 싶습니다. 클로저 캡슐화의 단점은 서브클래스 파생에 도움이 되지 않으므로 클로저는 위험하므로 캡슐화는 주의해야 합니다! 직관을 위해 다음 예제에서 객체를 생성하는 방법은 "열린 문" 모드를 채택합니다.
JavaScript의 상속은 일반적으로 "클래스 상속", "프로토타입 상속", "메타 클래스"의 세 가지 방식으로 나뉩니다. 다음은 세 가지 상속 방법의 원리를 간략하게 소개합니다.
A. 클래스 상속: 이는 주류 프레임워크에서 일반적으로 사용되는 상속 방법입니다. 다음 예를 참조하세요.
코드 복사 코드는 다음과 같습니다.



코드 복사
코드는 다음과 같습니다: function extend(subClass,superClass){ var F = function(){};
F.prototype = superClass.prototype; 프로토타입 = new F();
subClass.prototype.constructor = subClass;


B. 프로토타입 상속은 메모리 성능 측면에서 더 좋습니다.



코드 복사

코드는 다음과 같습니다. function clone(object){ var F = function(){}; F.prototype = object;
return new F();
};
var Name = {
name:"누구의 이름",
showInfo:function(){
alert(this.name);
}
var Fish = clone( Name);
//Fish.name = "老鱼";



분명히 프로토타입 상속의 핵심입니다. 프로토타입 체인과 동일한 원리이지만 차이점은 슈퍼 클래스를 직접 복제하므로 하위 클래스가 슈퍼 클래스의 모든 속성과 메서드를 상속한다는 것입니다. 특히 이러한 유형의 상속에는 생성자 생성, 객체 단어 변수만 해당 속성과 메서드를 정의한 다음 하위 클래스에서 속성과 메서드를 참조하려면 점 "."만 사용하면 됩니다.
C. 일반적으로 사용되는 일부 메서드를 더욱 다양하게 만듭니다. 메서드는 함수에 균일하게 캡슐화되고 다음 함수를 통해 이러한 메서드를 사용하는 클래스로 전달됩니다. 다양한 클래스에 필요한 메서드를 선택적으로 전달할 수도 있습니다.




코드 복사


코드는 다음과 같습니다.



다형성: 개인적으로는 상대적으로 추상적이고 말로 설명하기 어려운 부분이라 오버로딩과 덮어쓰기의 두 가지 측면에서 간략하게 설명하겠습니다.
오버로딩: 위의 예에서 agument 함수는 처음에 두 개의 매개변수를 사용하지만 후속 호출에서는 agument(Fish,Name,"sayLove")도 임의 개수의 매개변수를 사용할 수 있습니다. 인수 속성을 조작하여 함수의 사용자.
재정의: 이는 매우 간단합니다. 하위 클래스에 정의된 메서드가 슈퍼클래스에서 상속된 메서드와 동일한 이름을 갖는 경우 이 메서드를 덮어씁니다(여기에서는 슈퍼클래스의 메서드를 재정의하는 것이 아닙니다). 더 이상 번거롭지 않습니다!
마지막으로 이것과 실행 컨텍스트에 집중해 보겠습니다. 이전 캡슐화 예에서는 이것이 위치한 클래스의 인스턴스화 객체 자체를 나타내지만, 이는 HTML 속성을 통해 정의됩니다. 이벤트 처리 코드는 다음 코드를 참조하세요.

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


위의 예에서 버튼, 팝업 상자가 없습니다. 인스턴스 개체의 속성이 표시됩니다. 이는 해당 개체의 실행 컨텍스트가 변경되었기 때문입니다. 현재 있는 컨텍스트는 입력 HTML 태그여야 하는데 태그에 getName이 없습니다. 속성이므로 당연히 이 속성의 속성 값을 출력할 수 없습니다. 이 예에서 실행 컨텍스트는 실행 중에 결정되고 언제든지 변경될 수 있음을 쉽게 알 수 있습니다.
물론 위에서 주석 처리한 코드를 제거하고 getName 메서드를 얻기 위한 호출을 통해 이 코드의 실행 컨텍스트를 변경할 수 있습니다. Apply 메소드는 실행 컨텍스트를 변경하는 기능도 구현할 수 있지만 프로토타입 프레임워크에서 더 아름다운 구현 메소드인 바인드를 찾았습니다. 이 방법의 구현을 한번 살펴보겠습니다. 우리 조상들의 위대함에 감탄해야겠습니다...

코드 복사 코드는 다음과 같습니다.
Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return method.apply (obj, 인수);
} ;
}

명확하게 이해할 수 있다면 이미 이러한 지식을 활용하여 간단한 스크립트 프레임워크를 작성할 수 있다고 믿습니다. 그리고 나는 당신이 가까운 미래에 마스터로 업그레이드할 수 있을 것이라고 믿습니다! 이해가 안 되더라도 걱정하지 마세요. 객체 지향은 본질적으로 좀 더 연습하면 괜찮을 것입니다.
지금은 이 글을 쓰겠습니다. 다음 기사에서는 javascript 디자인 패턴에 대해 논의해 보겠습니다. 계속 지켜봐 주시기 바랍니다.
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
브라우저 너머 : 실제 세계의 JavaScript브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript를 어떻게 설치합니까?JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음