찾다
웹 프론트엔드JS 튜토리얼JavaScript 객체지향의 세 가지 기본 특성 소개

JavaScript 객체지향의 세 가지 기본 특성 소개

객체지향을 배운 학생들은 객체지향의 세 가지 기본 특성인 캡슐화, 상속, 다형성을 모두 알아야 하지만 이 세 가지 단어에 대해서는 잘 알지 못할 수도 있습니다. 프런트 엔드의 경우 가장 많이 노출되는 것은 캡슐화상속일 수 있지만 다형성은 그렇게 이해되지 않을 수 있습니다. 封装继承,对于多态来说可能就不是那么了解了。

封装

在说封装之先了解一下封装到底是什么?

什么是封装

封装:将对象运行所需的资源封装在程序对象中——基本上,是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的,只要做就可以了。”对象可以看作是一个自我包含的原子。对象接口包括了公共的方法和初始化数据。(节选自百度百科)

我对于封装的理解,可能还有一个步骤就是抽离,首先你要清楚在一个对代码中你应该抽离那些属性方法,有了这些为基础才能更好的做好封装。

封装无非就是其属性和方法封装。

  1. 类:封装对象的属性和行为

  2. 方法:封装具体逻辑功能

  3. 访问封装:访问修饰封装无非就是对其访问权限进行封装

class Employees {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    getInfo(){
        let {name,age} = this;
        return {name,age};
    }
    static seyHi(){
        console.log("Hi");   
    }
}

let lisi = new Employees("Aaron",18);
lisi.seyHi();   // lisi.seyHi is not a function
lisi.getInfo();  // {name: "Aaron", age: 18}
Employees.seyHi();  // Hi

Employees中抽出的公共属性有name,age,公共方法有getInfo,seyHi,然而getInfoseyHi所不同的是seyHi使用了static修饰符,改变其为静态方法,seyHi只属于Employees这个类。然而getInfo方法则是属于实例的。

这里使用了staticseyHi方法对其进行了访问权限的封装。

再举一个例子。

Promise.then()  //  Promise.then is not a function
let p1 = new Promise(() => {})
p1.then();  //  Promise {<pending>}
Promise.all([1]);   //  Promise {<resolved>: Array(1)}

从上面的代码中可以看出Promise也使用了static对其方法的访问权限进行了封装。

继承

继承:说到继承并不太陌生,继承可以使得子类具有父类的各种的公有属性和公有方法。而不需要再次编写相同的代码。在令子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能。(节选自百度百科)

子类继承父类后,子类具有父类属性和方法,然而也同样具备自己所独有的属性和方法,也就是说,子类的功能要比父类多或相同,不会比父类少。

class Employees {
    constructor(name){
        this.name = name;
    }
    getName(){
        console.log(this.name)
    }
    static seyHi(){
        console.log("Hi");   
    }
}
class Java extends Employees{
    constructor(name){
        super(name);
    }
    work(){
        console.log("做后台工作");
    }
}
let java = new Java("Aaron");
java.getName();
java.work();
// java.seyHi();    //  java.seyHi is not a function

从上面的例子可以看出继承不会继承父类的静态方法,只会继承父类的公有属性与方法。这一点需要注意。

子类继承之后既拥有了getName方法,同样也拥有自己的worker方法。

多态

多态:按字面的意思就是“多种状态”,允许将子类类型的指针赋值给父类类型的指针。(节选自百度百科)

说白了多态就是相同的事物,调用其相同的方法,参数也相同时,但表现的行为却不同。多态分为两种,一种是行为多态与对象的多态。

多态的表现形式重写与重载。

什么是重写

重写:子类可继承父类中的方法,而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法,而是想作一定的修改,这就需要采用方法的重写。方法重写又称方法覆盖。(节选自百度百科)

class Employees {
    constructor(name){
        this.name = name;
    }
    seyHello(){
        console.log("Hello")
    }
    getName(){
        console.log(this.name);
    }
}
class Java extends Employees{
    constructor(name){
        super(name);
    }
    seyHello(){
        console.log(`Hello,我的名字是${this.name},我是做Java工作的。`)
    }
}
const employees = new Employees("Aaron");
const java = new Java("Leo");
employees.seyHello();   //  Hello
java.seyHello();    //  Hello,我的名字是Leo,我是做Java工作的。
employees.getName();    //  Aaron
java.getName(); //  Leo

通过上面的代码可以看出Java继承了Employees,然而子类与父类中都存在seyHello方法,为了满足不同的需求子类继承父类之后重写了seyHello方法。所以在调用的时候会得到不同的结果。既然子类继承了父类,子类也同样拥有父类的getName

캡슐화

캡슐화에 대해 이야기하기 전에 먼저 캡슐화가 무엇인지부터 알아볼까요? 캡슐화란 무엇입니까

🎜🎜🎜캡슐화: 프로그램 개체에서 개체를 실행하는 데 필요한 리소스(기본적으로 메서드 및 데이터)를 캡슐화합니다. 객체는 "인터페이스를 노출합니다". 이러한 인터페이스에 연결된 다른 개체는 개체에 의해 구현된 메서드에 상관없이 이 개체를 사용할 수 있습니다. 개념은 "어떻게 하는지 알려주지 말고 그냥 하세요"입니다. 객체는 자체 포함된 원자로 생각할 수 있습니다. 객체 인터페이스에는 공용 메서드와 초기화 데이터가 포함됩니다. (바이두 백과사전 발췌) 🎜🎜제가 이해한 캡슐화에는 분리라는 또 다른 단계가 있을 수 있습니다. 먼저 한 쌍의 코드에서 어떤 속성과 메서드를 분리해야 하는지 알아야 합니다. . 이러한 방법으로만 기본 사항을 더 잘 요약할 수 있습니다. 🎜🎜캡슐화는 속성과 방법을 캡슐화하는 것에 지나지 않습니다. 🎜
  1. 🎜클래스: 객체의 속성과 동작을 캡슐화합니다🎜
  2. 🎜메소드: 특정 논리 함수를 캡슐화합니다🎜
  3. 🎜액세스 캡슐화: 액세스 수정 캡슐화는 액세스 권한을 캡슐화하는 것에 지나지 않습니다🎜
class Employees {
    constructor(arg){
        let obj = null;
        switch(typeof arg)
        {
            case "string":
                  obj = new StringEmployees(arg);
                  break;
            case "object":
                  obj = new ObjEmployees(ObjEmployees);
                  break;
            case "number":
                obj = new NumberEmployees(ObjEmployees);
                break;
        }
        return obj;
    }
}
class ObjEmployees {
    constructor(arg){
        console.log("ObjEmployees")
    }
}
class StringEmployees {
    constructor(arg){
        console.log("StringEmployees")
    }
}
class NumberEmployees {
    constructor(arg){
        console.log("NumberEmployees")
    }
}
new Employees({})   // ObjEmployees
new Employees("123456") //  StringEmployees
new Employees(987654)   //  NumberEmployees
🎜 Employees에서 추출된 공개 속성은 name입니다. > ,age, 공용 메소드에는 getInfo, seyHi가 포함되지만, getInfoseyHi code> 차이점은 <code>seyHistatic 수정자를 사용하여 이를 정적 메서드로 변경한다는 것입니다. seyHiEmployees 클래스에만 속합니다. . 그러나 getInfo 메소드는 인스턴스에 속합니다. 🎜🎜여기에서는 static을 사용하여 seyHi 메서드의 액세스 권한을 캡슐화합니다. 🎜🎜또 다른 예를 들어주세요. 🎜rrreee🎜위 코드에서 볼 수 있듯이 Promisestatic을 사용하여 메서드의 액세스 권한을 캡슐화합니다. 🎜

상속 🎜

🎜상속: 상속에 대해 말하는 것이 낯설지 않습니다. 상속을 통해 하위 클래스는 상위 클래스의 다양한 공개 속성을 갖게 될 수 있습니다 속성 및 공개 메서드. 동일한 코드를 다시 작성할 필요가 없습니다. 하위 범주가 상위 범주를 상속하도록 하는 동안 일부 속성을 재정의하고 일부 메서드를 재정의할 수 있습니다. 즉, 상위 범주에서 다른 기능을 얻을 수 있도록 상위 범주의 원래 속성과 메서드를 덮어쓸 수 있습니다. (바이두 백과사전에서 발췌) 🎜🎜하위 클래스가 상위 클래스를 상속받은 후 하위 클래스는 상위 클래스의 속성과 메서드를 가지면서도 고유한 속성과 메서드도 갖게 됩니다. 즉, 하위 클래스는 상위 클래스보다 더 많은 기능을 갖습니다. 또는 상위 클래스와 동일합니다. 🎜rrreee🎜 위의 예에서 상속은 상위 클래스의 정적 메서드를 상속하지 않고 상위 클래스의 공용 속성과 메서드만 상속한다는 것을 알 수 있습니다. 주의가 필요합니다. 🎜🎜상속 후 하위 클래스에는 getName 메서드뿐만 아니라 자체 worker 메서드도 있습니다. 🎜

다형성 🎜

🎜다형성: 문자 그대로 "다중 상태"를 의미하며, 하위 클래스 유형의 포인터를 클래스 유형의 상위 포인터에 할당할 수 있습니다. (바이두 백과사전에서 발췌) 🎜🎜직접 말하면 다형성은 같은 것이고, 같은 메소드를 호출하고 매개변수가 같을 때 동작이 다릅니다. 다형성은 두 가지 유형으로 나뉘는데, 하나는 행동 다형성과 객체 다형성입니다. 🎜🎜다형성 표현식 재작성 및 오버로드. 🎜🎜🎜🎜다시 쓰기란 무엇입니까🎜🎜🎜🎜다시 쓰기: 하위 클래스는 동일한 메서드를 다시 작성하지 않고도 상위 클래스에서 메서드를 상속할 수 있습니다. 그러나 때로는 하위 클래스가 상위 클래스의 메서드를 변경 없이 상속하기를 원하지 않지만 특정 수정을 하려고 하므로 메서드를 다시 작성해야 합니다. 메서드 재정의는 메서드 덮어쓰기라고도 합니다. (바이두 백과사전 발췌) 🎜rrreee🎜위 코드에서 JavaEmployees를 상속하지만 seyHello는 두 하위 클래스 모두에 존재함을 알 수 있습니다. 및 상위 클래스.code> 메소드는 다양한 요구 사항을 충족하기 위해 하위 클래스가 상위 클래스를 상속하고 seyHello 메소드를 다시 작성합니다. 따라서 전화를 걸면 다른 결과를 얻게 됩니다. 하위 클래스는 상위 클래스를 상속하므로 하위 클래스에는 상위 클래스의 getName 메서드도 있습니다. 🎜🎜🎜🎜새로고침이란 무엇인가요🎜🎜🎜

重载就是函数或者方法有相同的名称,但是参数列表不相同的情形,这样的同名不同参数的函数或者方法之间,互相称之为重载函数或者方法。(节选自百度百科)

class Employees {
    constructor(arg){
        let obj = null;
        switch(typeof arg)
        {
            case "string":
                  obj = new StringEmployees(arg);
                  break;
            case "object":
                  obj = new ObjEmployees(ObjEmployees);
                  break;
            case "number":
                obj = new NumberEmployees(ObjEmployees);
                break;
        }
        return obj;
    }
}
class ObjEmployees {
    constructor(arg){
        console.log("ObjEmployees")
    }
}
class StringEmployees {
    constructor(arg){
        console.log("StringEmployees")
    }
}
class NumberEmployees {
    constructor(arg){
        console.log("NumberEmployees")
    }
}
new Employees({})   // ObjEmployees
new Employees("123456") //  StringEmployees
new Employees(987654)   //  NumberEmployees

因为JavaScript是没有重载的概念的所以要自己编写逻辑完成重载。

在上面的代码中定义了Employees,ObjEmployees,StringEmployees,NumberEmployees类,在实例化Employees的时候在constructor里面进行了判断,根据参数的不同返回不同的对应的类。

这样完成了一个简单的类重载。

总结

  1. 封装可以隐藏实现细节,使得代码模块化;

  2. 继承可以扩展已存在的代码模块(类),它们的目的都是为了——代码重用。

  3. 多态就是相同的事物,调用其相同的方法,参数也相同时,但表现的行为却不同。多态分为两种,一种是行为多态与对象的多态。

在编程的是多多运用这个写思想对其编程时很有用的,能够使你的代码达到高复用以及可维护。

相关免费学习推荐:js视频教程

위 내용은 JavaScript 객체지향의 세 가지 기본 특성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 segmentfault에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
Python vs. JavaScript : 어떤 언어를 배워야합니까?Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

Node.js는 TypeScript가있는 스트림입니다Node.js는 TypeScript가있는 스트림입니다Apr 30, 2025 am 08:22 AM

Node.js는 크림 덕분에 효율적인 I/O에서 탁월합니다. 스트림은 메모리 오버로드를 피하고 큰 파일, 네트워크 작업 및 실시간 애플리케이션을위한 메모리 과부하를 피하기 위해 데이터를 점차적으로 처리합니다. 스트림을 TypeScript의 유형 안전과 결합하면 Powe가 생성됩니다

Python vs. JavaScript : 성능 및 효율성 고려 사항Python vs. JavaScript : 성능 및 효율성 고려 사항Apr 30, 2025 am 12:08 AM

파이썬과 자바 스크립트 간의 성능과 효율성의 차이는 주로 다음과 같이 반영됩니다. 1) 해석 된 언어로서, 파이썬은 느리게 실행되지만 개발 효율이 높고 빠른 프로토 타입 개발에 적합합니다. 2) JavaScript는 브라우저의 단일 스레드로 제한되지만 멀티 스레딩 및 비동기 I/O는 Node.js의 성능을 향상시키는 데 사용될 수 있으며 실제 프로젝트에서는 이점이 있습니다.

JavaScript의 기원 : 구현 언어 탐색JavaScript의 기원 : 구현 언어 탐색Apr 29, 2025 am 12:51 AM

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AM

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

파이썬과 자바 스크립트의 미래 : 트렌드와 예측파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AM

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 ​​통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

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 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.