>웹 프론트엔드 >JS 튜토리얼 >js의 데이터 유형, 객체 및 생성자에 대한 자세한 설명

js의 데이터 유형, 객체 및 생성자에 대한 자세한 설명

零下一度
零下一度원래의
2017-07-02 09:20:251835검색

JavaScript 데이터 유형, 객체, 생성자, 프로토타입 객체, 프로토타입 체인 첫 소개, 객체 상속

1. 워드 부분

①객체 상위 클래스 ②생성자 생성자 ③인스턴스 인스턴스 ④호출 호출

⑤애플리케이션 적용 ⑥조합 조합 7상속 상속

II.미리보기 부분

1. 객체를 생성하는 두 가지 방법과

new와 literal 할당의 차이점을 간략하게 설명합니다.

전자는 속성과 메서드를 추가하는 데 사용해야 합니다.

후자는 직접 호출됩니다.

2. 생성자를 사용하는 인스턴스

①새 객체 생성

②새 객체에 생성자의 범위 할당

③생성자 코드 블록 실행

④새 객체 반환

3. 프로토타입 체인에 대한 간략한 설명은 역할에 있습니다.

상속을 구현하는 주요 방법입니다

3. 실습 부분

1. 사람 개체 만들기

lang="en"> charset="UTF- 8인치> < div aa"><script> <td class="line-number"></td> <td class="line-content"><span class="html-tag"> </span></td>var createTi=docu ment.createElement("p"); </tr> <tr> <td class="line-number"></td> <td class="line-content"><span class="html-tag">var person=new Object();<span class="html-attribute-name"><span class="html-attribute-value"><span class="html-tag"></span> </span></span>person.name="Lang Xiaoming";</span></td> </tr> <tr> <td class="line-number"></td>person.age="38";<td class="line-content"><span class="html-tag"></span></td> </tr> <tr>사람 .job="중국 본토 배우, 가수";<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>person.address="중국 베이징 하이뎬구";<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>person.info=function () {<td class="line-number"></td> <td class="line-content"></td> </tr> <tr> var strr="이름: "+this.name+"<br/>나이: "+this.age+"<br/>직장: "+this.job+"<br/>주소: "+ this.address;<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>//document.write(strr);<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>document.getElementById("aa")innerHTML=strr;<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>}<td class="line-number"> </td> <td class="line-content"></td> </tr> <tr>person.info();<td class="line-number"></td> <td class="line-content"></td> </tr> <tr> <td class="line-number"></script>
< ;html
사람 개체 만들기 </span>
id="

2.创建person构造函数

  

 

4.创建继承person的student子类

 
  lang="en">
 
  charset="UTF-8">
  上机练习二<span class="html-tag">
 
 
 
id="aa">
<script> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">기능 사람(이름, 나이, 직업, 주소) {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> this.name=name;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.age = 나이; </td> </tr> <tr> <td class="line-number"></td>var createTi=document.createElement("p");<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>var strr="이름: "+this.name+"<br/> 나이: "+this.age+"<br />직업: "+this.job+"<br/>주소: "+this.address;<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>document.getElementById("aa") .innerHTML=strr;<td class="line-content"></td> </tr> <tr> <td class="line-number"></td> }<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>}<td class="line-content"></td> </tr> <tr> <td class="line-number"></td>function Pers(){<td class="line-content"></td> </tr> <tr> <td class="line-number"></td> <td class="line-content"></td> </tr> <tr> <td class="line-number"></td> <td class="line-content"></td> </tr>}<tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>//var newper=new Person("Lang Xiaoming","38","중국 본토 배우 겸 가수","중국 베이징 하이뎬구");<tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>Pers.prototype.name1=" Chen Dong";<tr> <td class="line-number"></td> <td class="line-content"></td> </tr> Pers.prototype.age1 = "20"; .prototype.showinn=function () {<tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>var createTi=document.createElement("p");<tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>var strrr="이름: "+this.name1+"<br/>나이: "+this.age1+"<br/>직업: "+this.job1+"<br/>주소 : "+this.address1;<tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>document.getElementById("aa" ).innerHTML=strrr;<tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>}<tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>var one=new Pers(); <tr> <td class="line-number">/ /newper.show ( ) ></td> <td class="line-content"></td> </tr> <tr> <p> </p> <p>3.创建person对象原型链</p> <table><tbody> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-doctype"><!DOCTYPE html> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><html <span class="html-attribute-name">lang="<span class="html-attribute-value">en"> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><head> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><meta <span class="html-attribute-name">charset="<span class="html-attribute-value">UTF-8"> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><title>上机练习三<span class="html-tag"></title> </span></span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"></head> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><body> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><div <span class="html-attribute-name">id="<span class="html-attribute-value">aa"><span class="html-tag"></div> </span></span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"><span class="html-tag"><script> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">function Person(nation,skinColor) {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.nation=nation;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.skinColor=skinColor;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var aaa=문서. getElementById("aa");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.shownation=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st="민族:"+this.nation;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi.innerHTML=st;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi)</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.showskin=기능( ) {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi1=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st1="肤Color:"+this.skinColor;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi1.innerHTML=st1 ; </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi1);</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">function 여자() </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Person.call(이, "满族","黑color");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.sex="女";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var sexa=document.getElementById("aa"); </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">//Woman.prototype=new Person("汉族","黄color");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Woman.prototype.showsex=function () </td> </tr> <tr> <td class="line-number"> var createTi3=document.createElement("p");</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">var st3="성별:"+this.sex;</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">createTi3.innerHTML=st3;</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">sex 가. AppendChild(createTi3);</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">}</td> <td class="line-content"></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"></td> </tr> <tr> <td class="line-number">//var per1=new Person("汉族","黄color");</td> <td class="line-content"> </td> </tr> <tr> <td class="line-number">var wo= new Woman();</td> <td class="line-content"></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"></td> </tr> <tr> <td class="line-number">wo.shownation();</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">wo.showskin();</td> <td class="line-content"></td> </tr> <tr> <td class="line-number"> wo.showsex();</td> <td class="line-content"></td> </tr> <tr> <td class="line-number"></td></script>
IV. 요약질문 환영, 실수 지적 환영, 학습 정보 토론 환영, 필요한 경우 비공개 채팅에 댓글을 게시할 수 있으며 누구나 할 수 있습니다. 답장
 
  lang="en">
 
  charset="UTF-8">
  上机练习四<span class="html-tag">
 
 
 
id="aa">
  <script> </span></td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">기능 사람(이름,중국어,수학) {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.name=name;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.chinese=chinese;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.math =math;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var aaa=document.getElementById("aa");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.showname=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi=document.createElement( "피 ");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st="이름:"+this.name;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi.innerHTML=st;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi)</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.showchinese=function () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi1=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st1="语文:"+this. 중국어;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi1.innerHTML=st1;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi1);</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.showmath=함수 () {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var createTi2=document.createElement("p");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var st2="数school:"+this.math;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">createTi2.innerHTML=st2;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">aaa.appendChild(createTi2);</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">function Student() {</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Person.call(this,"少君" , "56", "96"); </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> this.age = "19"; <tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>} <tr> <td class="line-number"></td> <td class="line-content"> </td> </tr>var sexa = document.getElementById ( "aa"); <tr> <td class="line-number"> </td> <td class="line-content"></td> </tr> <tr> <td class="line-number"></td> <td class="line-content"></td> </tr> <tr>//Student.prototype=new Person("陈东","88","99");<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>Student.prototype.showage=function () { <td class="line-number"></td> <td class="line-content"></td> </tr> <tr>var createTi3=document.createElement("p");<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>var st3="年龄:"+this.age;<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>createTi3.innerHTML=st3; <td class="line-number"></td> <td class="line-content"></td> </tr> <tr>sexa.appendChild(createTi3);<td class="line-number"></td> <td class="line-content">🎜 🎜🎜}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">//var per1=new Person("한","노란색");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">var stu=새 학생();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">스투 .showname();</td> </tr> <tr> <td class="line-number"></td> <td class="line-content">stu.showchinese();</td> </tr> <tr> <td class="line-number"></td> <td class="line-content">stu.showmath(); </td> </tr> <tr>/*var ncm = new Person("陈东","88"," 99");<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>ncm.showname(); .showmath();*/<td class="line-number"></td> <td class="line-content"></td> </tr> <tr> <td class="line-number"></script>
< /본문> ;/html>
1. 객체는 내장 객체와 사용자 정의 객체로 구분됩니다 2. 상속을 달성하는 주요 방법은 다음과 같습니다. 결합 상속은 프로토타입 체인을 사용하여 프로토타입 속성과 메서드를 구현하는 것입니다. Inherit

위 내용은 js의 데이터 유형, 객체 및 생성자에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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