jsのデータ型、オブジェクト、コンストラクタについて詳しく解説
javascript
js
JavaScriptのデータ型、オブジェクト、コンストラクター、プロトタイプオブジェクト、プロトタイプチェーンの最初の紹介、オブジェクト継承
1. Wordパート
①オブジェクト親クラス②コンストラクターコンストラクター③インスタンスインスタンス④呼び出し呼び出し
⑤適用⑥組み合わせ結合⑦継承継承
Ⅱ.プレビューパート
1.オブジェクトを作成する 2 つの方法と、その違いについて簡単に説明します
新規割り当てとリテラル割り当て
前者は属性とメソッドを追加するために使用する必要があります
後者は直接呼び出されます
簡単な説明 作成手順 2.コンストラクターを使用したインスタンス
①新しいオブジェクトを作成する
②新しいオブジェクトにコンストラクターのスコープを割り当てる
③コンストラクターのコードブロックを実行する
④新しいオブジェクトを返す
3の役割にプロトタイプチェーンの簡単な説明があります。継承のメインメソッドです
3. 実践編
| < ;html | ||
| charset="UT F-8"> | ||
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> <td class="line-content">this.job=job;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">this.address=アドレス; </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">document.getElementById("aa").innerHTML=strr;</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 newper =新しい人("ラン・シャオミン","38","中国本土の俳優兼歌手","中国北京市海淀区");</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">Pers.prototype.name1="チェン・ドン";</td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"> Pers.prototype.age1 = "20"; .prototype.showinn=function () {</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">var createTi=document.createElement("p");</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">var strrr= "名前: "+this.name1+"<br>年齢: "+this.age1+"<br>職業: "+this.job1+"<br>住所: "+this.address1 ;</td> <td class="line-content"></td> </tr> <tr> <td class="line-number">document.getElementById("aa" ).innerHTML=strrr;</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 one=new Pers();表示 ( ) ></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"><スクリプト> </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="肤色："+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 Woman() { </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.call(これ、 "满族","黑色");</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("汉族","黄色");</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Woman.prototype.showsex=function () </td> </tr> <tr> var createTi3=document.createElement("p");<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>var:"+this.sex;<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"></td> </tr> <tr>//var per1=new person("汉族","黄色");<td class="line-number"></td> <td class="line-content"> </td> </tr> <tr>var wo= new Woman();<td class="line-number"></td> <td class="line-content"></td> </tr> <tr> <td class="line-number"></td> <td class="line-content"></td> </tr> <tr>wo.shownation();<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>wo.showskin();<td class="line-number"></td> <td class="line-content"></td> </tr> <tr>wo.showsex();<td class="line-number"></td> <td class="line-content"> </td> </tr> <tr> <td class="line-number"></script> | ||