JS 객체 지향 사용 예-JS 튜토리얼-php.cn

리터럴을 통해 객체 생성

생성자를 통해 여러 객체 생성

프로토타입 객체

原型链

집

웹 프론트엔드

JS 튜토리얼

JS 객체 지향 사용 예

小云云

Mar 06, 2018 pm 02:06 PM

javascript 예 용법

객체는 속성과 메서드의 모음입니다. 객체지향이란 무엇인가? 객체지향은 프로그래밍 아이디어이자 개념입니다. js에서는 프로토타입이라는 메소드를 통해 객체지향 프로그래밍을 구현합니다.

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>创建对象</title></head><body><button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript">
     //创建一个学生对象
     var student=new Object();    //创建对象的属性并且赋值
    student.age=50;
    student.name="小黑";
    student.address="海淀区";    //创建对象的方法
    student.sayHello=function(){
        document.write("姓名："+student.name+"<br/>");
        document.write("年龄："+student.age+"<br/>");
        document.write("住址："+this.address+"<br/>");
    }    //用户点击按钮触发的事件
    function showInfo(){
        student.sayHello(); //调用student的方法
    }    //现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！</script></body></html>

로그인 후 복사

리터럴을 통해 객체 생성

학생 객체 생성
{속성 1: 값 1, 속성 2: 값 2, 속성 3: 값 3}
Json 데이터 형식: 데이터 변환 형식입니다
01. 키-값 쌍의 형태입니다
02. 객체는 {}에 저장됩니다
03. 컬렉션은 []
에 저장됩니다. 04. 데이터는 쉼표로 구분하고 속성과 속성값은 콜론으로 구분합니다

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>通过字面量来创建对象</title></head><body>
     <button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript">
     var student={
         age:50,
         name:"小黑",
         address:"海淀区",
        sayHello:function(){  //方法
            document.write("姓名："+this.name+"<br/>");
            document.write("年龄："+this.age+"<br/>");
            document.write("住址："+this.address+"<br/>");
        }
     }    // student 我们称之为变量   =右边的｛｝中的数据，我们称之为 字面量！
     //用户点击按钮触发的事件
     function showInfo(){
         student.sayHello(); //调用student的方法
     }     // 问题依然存在：现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！</script></body></html>

로그인 후 복사

생성자를 통해 여러 객체 생성

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>通过构造函数创建多个对象</title></head><body><script type="text/javascript">
    //创建构造函数   函数名称首字母必须大写
    function Student(name,age,address){
         //声明属性并赋值
        this.name=name;        this.age=age;        this.address=address;        //设置方法
        this.sayHello=function(){
            document.write("姓名："+this.name+"<br/>");
            document.write("年龄："+this.age+"<br/>");
            document.write("住址："+this.address+"<br/>");
        }
    }    //创建多个对象
    var  stu1=new Student("小黑1",50,"天堂1");    var  stu2=new Student("小黑2",51,"天堂2");    var  stu3=new Student("小黑3",52,"天堂3");  //分别调用对象的方法
    stu1.sayHello();
    stu2.sayHello();
    stu3.sayHello();  // 所有的对象都有一个constructor属性！指向了构造函数！
    document.write("stu1.constructor指向了Student："+(stu1.constructor==Student)+"<br>");    //instanceof 判断某个对象是否属于某个类型
    document.write("stu1属于Student吗？"+(stu1 instanceof Student)+"<br>");
    document.write("stu1属于Object吗？"+(stu1 instanceof Object)+"<br>");
    document.write("stu1属于Function吗？"+(stu1 instanceof Function)+"<br>");</script></body></html>

로그인 후 복사

프로토타입 객체

참고:
01. 모든 객체에는 생성자 속성이 있습니다! 생성자를 가리킨다!
02. 함수를 생성할 때 해당 함수는 프로토타입 속성을 가지게 되는데,
이 속성은 생성자를 통해 생성된 프로토타입 객체를 가리킵니다! 학생.프로토타입
03. 프로토타입 객체는 다른 객체에 공유된 속성과 메소드를 제공하는 메모리상의 객체입니다!
04.prototype 속성은 함수에만 사용 가능합니다!
05. 각 객체에는 프로토타입 객체를 가리키는 __proto__ 속성이 있습니다! __proto__属性，指向了原型对象！

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>原型对象</title></head><body><script type="text/javascript">
    /*创建一个构造函数*/
    function  Student(){}   //通过原型对象来创建对象
    Student.prototype.name;
    Student.prototype.age;
    Student.prototype.address;
    Student.prototype.sayHello=function(){
        document.write("姓名："+this.name+"<br/>");
        document.write("年龄："+this.age+"<br/>");
        document.write("住址："+this.address+"<br/>");
    }    var  stu1=new Student();
    stu1.name="小白";
    stu1.age=52;
    stu1.address="天上人间";    var  stu2=new Student();
    stu2.sayHello();    // 验证每个对象都有一个__proto__属性，指向了原型对象！
    document.write(stu2.__proto__==Student.prototype);</script></body></html>

로그인 후 복사

01.prototype属性只有函数才有！
02.每个对象都有一个__proto__属性，指向了原型对象！

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>深入原型对象</title></head><body><script type="text/javascript">
    //01.验证只有函数有prototype属性
    var  a={};
    document.write(a.prototype+"<br/>");
    document.write(a.__proto__+"<br/>");    var b=function(){}
    document.write(b.prototype+"<br/>");
    document.write(b.__proto__+"<br/>");    var c=new b();    // 02.验证每个对象都有一个__proto__属性，指向了原型对象！
    document.write(c.__proto__== b.prototype);</script></body></html>

로그인 후 복사

原型链

原型链：
01.一个原型对象是另一个原型对象的实例！小猫是动物的一个实例！
02. 相关的原型链层层递进，就构成了实例和原型对象的链条，我们就称之为原型链！
蹲在角落里的那只黑猫（实例）
继承了
猫类（01.相当于黑猫来说是原型对象 02.相对于动物来说是一个实例）
继承了
动物类（01.所有动物的原型对象 02.object的实例）
继承了
Object（所有原型对象的顶级）
只要是个对象都有__proto__属性，指向了原型对象！
问题：
Object是对象！
有__proto__
<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>原型链</title></head><body><script type="text/javascript">
        //模拟一个构造函数
          var   Student=function(){};         var stu1=new Student();
            document.write(stu1.__proto__+"<br/>"); //student
            document.write(stu1.__proto__.__proto__+"<br/>");//function
            document.write(stu1.__proto__.__proto__.__proto__+"<br/>");  //  object null
            document.write("===================================");
          document.write((stu1.__proto__===Object.prototype)+"<br/>");  //false
          document.write((Student.prototype.__proto__===Object.prototype)+"<br/>");  //true</script></body></html>
로그인 후 복사

01. 프로토타입 속성은 함수에만 사용할 수 있습니다!

02. 각 객체에는 프로토타입 객체를 가리키는 `proto` 속성이 있습니다!

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>借用构造函数的同时传递参数</title></head><body>

   <script type="text/javascript">
         //创建Animal的构造
       function Animal(name){
         this.name=name;
       }       //创建Dog的构造
       function Dog(){
           //借用构造  传递参数
           Animal.call(this,"小黑狗");           this.age=50;
       }       //创建Cat的构造
       function Cat(){
           //借用构造
           Animal.call(this,"小猫咪");           this.health=100;
       }         //创建小狗的实例
       var dog1=new Dog();
       document.write(dog1.name);
       document.write(dog1.age);         //创建小猫咪的实例
       var cat1=new Cat();
       document.write(cat1.name);
       document.write(cat1.health);   </script></body></html>

로그인 후 복사

프로토타입 체인

프로토타입 체인:
01. 프로토타입 객체는 또 다른 프로토타입 객체의 인스턴스입니다! 새끼 고양이는 동물의 예입니다!
02. 관련 프로토타입 체인이 레이어별로 진행되어 인스턴스와 프로토타입 객체의 체인을 형성합니다.
구석에 쪼그리고 앉아 있는 검은 고양이(예시)

> 상속됨

고양이 클래스 (01. 검은 고양이에 해당하며 프로토타입 객체입니다. 02. 동물에 비하면 인스턴스입니다.)
> 상속됨 동물 클래스 (01. 모든 동물의 프로토타입 객체 02. 객체의 인스턴스) > 객체(모든 프로토타입 객체의 최상위 수준)

객체인 한 프로토타입 객체를 가리키는 __proto__ 속성이 있습니다!

질문: 객체는 객체다! __proto__ 속성이 있습니다!

속성 값이 null입니다!

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>组合继承</title></head><body><script type="text/javascript">
    /*构造方法*/
    function  Person(name){
        this.name=name;        this.names=["hei","bai","pei"];
    }
    Person.prototype.sayHello=function(){
        alert(this.name);
    }    function  Student(name,age){
        Person.call(this,name); //继承属性  借用构造
        this.age=age;
    }
    Student.prototype=new Person();//继承了方法  原型链
    //student特有的方法
    Student.prototype.sayBey=function(){
        alert(this.name);
    }    /*创建对象*/
    var  stu=new Student("小黑黑",50);
    stu.names.push("小白白");
    document.write(stu.names+"<br/>");
    stu.sayHello();
    stu.sayBey();    var  stu1=new Student("小黑黑2",50);
    document.write(stu1.names+"<br/>");
    stu1.sayHello();
    stu1.sayBey();</script></body></html>

로그인 후 복사

빌린 생성자rrreee🎜결합 상속🎜🎜🎜결합 상속: 🎜 때로는 의사고전적 상속이라고도 하며 프로토타입 연결 및 생성자 차용 기술을 결합합니다. 🎜 두 세계의 장점을 모두 활용하는 상속 패턴은 프로토타입 체인을 사용하여 프로토타입 속성과 메서드를 상속합니다. 인스턴스 속성 상속은 생성자를 빌려서 달성됩니다🎜🎜rrreee🎜관련 권장 사항: 🎜🎜js 객체 지향 상속 지식 자세한 설명🎜🎜🎜🎜JS 객체 지향 프로그래밍 세부 지침🎜🎜🎜🎜JavaScript 객체 지향 디자인_js-지향 객체 🎜🎜

위 내용은 JS 객체 지향 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7318

자바 튜토리얼

1625

Cakephp 튜토리얼

1349

라라벨 튜토리얼

1261

PHP 튜토리얼

1209

Related knowledge

JSP 주석의 용도 및 분류 분석 Feb 01, 2024 am 08:01 AM

JSP 주석 분류 및 활용 분석 JSP 주석은 두 가지 유형으로 구분됩니다. 한 줄 주석: 로 끝나는 코드로 한 줄만 주석을 달 수 있습니다. 여러 줄 주석: /*로 시작하고 */로 끝나는 경우 여러 줄의 코드에 주석을 달 수 있습니다. 한 줄 주석 예 여러 줄 주석 예/**여러 줄 주석입니다*여러 줄의 코드에 주석을 달 수 있습니다*/JSP 주석 사용 JSP 주석을 사용하여 JSP 코드에 주석을 달면 읽기 쉬워집니다.

C 언어에서 종료 기능을 올바르게 사용하는 방법 Feb 18, 2024 pm 03:40 PM

C 언어에서 종료 기능을 사용하려면 특정 코드 예제가 필요합니다. C 언어에서는 프로그램 초기에 프로그램 실행을 종료하거나 특정 조건에서 프로그램을 종료해야 하는 경우가 많습니다. C 언어에서는 이 기능을 구현하기 위해 exit() 함수를 제공합니다. 이 기사에서는 exit() 함수의 사용법을 소개하고 해당 코드 예제를 제공합니다. Exit() 함수는 C 언어의 표준 라이브러리 함수로 헤더 파일에 포함되어 있습니다. 그 기능은 프로그램 실행을 종료하는 것이며 정수를 취할 수 있습니다.

WPSdateif 함수 사용 Feb 20, 2024 pm 10:27 PM

WPS는 일반적으로 사용되는 사무용 소프트웨어 제품군이며 WPS 테이블 기능은 데이터 처리 및 계산에 널리 사용됩니다. WPS 테이블에는 두 날짜 사이의 시차를 계산하는 데 사용되는 매우 유용한 함수인 DATEDIF 함수가 있습니다. DATEDIF 함수는 영어 단어 DateDifference의 약어입니다. 구문은 다음과 같습니다. DATEDIF(start_date,end_date,unit) 여기서 start_date는 시작 날짜를 나타냅니다.

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

Apple 단축키를 사용하는 방법 Feb 18, 2024 pm 05:22 PM

Apple 단축키 명령 사용 방법 지속적인 기술 발전으로 휴대폰은 사람들의 삶에 없어서는 안될 부분이 되었습니다. 수많은 휴대폰 브랜드 중에서도 Apple 휴대폰은 안정적인 시스템과 강력한 기능으로 늘 사용자들의 사랑을 받아왔습니다. 그 중 Apple 단축키 명령 기능은 사용자의 휴대폰 경험을 더욱 편리하고 효율적으로 만들어줍니다. Apple Shortcuts는 Apple이 iOS12 이상 버전을 위해 출시한 기능으로, 사용자 정의 명령을 생성하고 실행하여 보다 효율적인 작업을 수행하고 휴대폰 작업을 단순화하는 데 도움이 됩니다.

MySQL ISNULL 함수에 대한 자세한 설명 및 사용법 소개 Mar 01, 2024 pm 05:24 PM

MySQL의 ISNULL() 함수는 지정된 표현식이나 열이 NULL인지 여부를 확인하는 데 사용되는 함수입니다. 부울 값을 반환하며, 표현식이 NULL이면 1, 그렇지 않으면 0을 반환합니다. ISNULL() 함수는 SELECT 문이나 WHERE 절의 조건부 판단에 사용할 수 있습니다. 1. ISNULL() 함수의 기본 구문: ISNULL(expression) 여기서 표현식은 NULL인지 또는 NULL인지를 결정하는 표현식입니다.

Win10 단축키 사용법을 가르쳐주세요. Dec 30, 2023 am 11:32 AM

Windows 10에서 자주 사용하는 단축키를 사용하면 시간을 많이 절약할 수 있습니다. 오늘은 매우 편리하고 빠른 몇 가지 단축키를 소개하겠습니다. Win10 단축키 사용법 소개 복사, 붙여넣기 및 기타 일반 키보드 단축키 이 작업을 수행하려면 이 키를 누르십시오. Ctrl+X 선택한 항목 잘라내기 Ctrl+C(또는 Ctrl+Insert) 선택한 항목 복사 Ctrl+V(또는 Shift+Insert) 붙여넣기 선택한 항목 Ctrl+Z 작업 실행 취소 Alt+Tab 열려 있는 응용 프로그램 간 전환 Alt+F4 활성 항목 닫기 또는 활성 응용 프로그램 종료 Windows 로고 키 + L 컴퓨터 잠금 Windows 로고 키 + D 바탕 화면 표시 및 숨기기 F

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

See all articles

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

JS 객체 지향 사용 예

리터럴을 통해 객체 생성

생성자를 통해 여러 객체 생성

프로토타입 객체

原型链

02. 각 객체에는 프로토타입 객체를 가리키는 `proto` 속성이 있습니다!

JS 객체 지향 사용 예

리터럴을 통해 객체 생성

생성자를 통해 여러 객체 생성

프로토타입 객체

原型链

02. 각 객체에는 프로토타입 객체를 가리키는 __proto__ 속성이 있습니다!

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

02. 각 객체에는 프로토타입 객체를 가리키는 `proto` 속성이 있습니다!