ホームページ >ウェブフロントエンド >jsチュートリアル >jsのデータ型、オブジェクト、コンストラクタについて詳しく解説

jsのデータ型、オブジェクト、コンストラクタについて詳しく解説

零下一度オリジナル: 2017-07-02 09:20:251836ブラウズ

JavaScriptのデータ型、オブジェクト、コンストラクター、プロトタイプオブジェクト、プロトタイプチェーンの最初の紹介、オブジェクト継承

1. Wordパート

①オブジェクト親クラス②コンストラクターコンストラクター③インスタンスインスタンス④呼び出し呼び出し

⑤適用⑥組み合わせ結合⑦継承継承

Ⅱ.プレビューパート

1.オブジェクトを作成する 2 つの方法と、その違いについて簡単に説明します

新規割り当てとリテラル割り当て

前者は属性とメソッドを追加するために使用する必要があります

後者は直接呼び出されます

簡単な説明作成手順 2.コンストラクターを使用したインスタンス

①新しいオブジェクトを作成する

②新しいオブジェクトにコンストラクターのスコープを割り当てる

③コンストラクターのコードブロックを実行する

④新しいオブジェクトを返す

3の役割にプロトタイプチェーンの簡単な説明があります。継承のメインメソッドです

3. 実践編

< ;html lang="en"> charset="UT F-8">

4.创建继承person的student子类




	人物オブジェクトを作成します <span class="html-attribute-value"></span> </tr> <tr> <td class="line-number"></td>< ;本体><td class="line-content"><span class="html-tag"><span class="html-tag"></span></span></td></tr><tr>< div <td class="line-number">id="</td>aa"><td class="line-content"></div> </td> </tr> <tr> <td class="line-number"></td> <td class="line-content"> <span class="html-tag"></span> </td> </tr> <tr><script> <td class="line-number"></td> <td class="line-content"></td> </tr> <tr>var createTi =document.createElement("p"); <td class="line-number"></td> <td class="line-content"><span class="html-tag"> </span></td>var person=new Object();</tr> <tr> <td class="line-number"></td> <td class="line-content"><span class="html-tag">person.name="ラン・シャオミン";<span class="html-attribute-name"><span class="html-attribute-value"> <span class="html-tag"></span> </span></span>person.age="38";</span></td> </tr> <tr> <td class="line-number"></td>人.job="中国本土の俳優、歌手";<td class="line-content"><span class="html-tag"></span></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")。 <td class="line-number"></td> <td class="line-content"> </td>person.info();</tr> <tr> <td class="line-number"></td> <td class="line-content"></td></script> </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></html><tr> <td class="line-number"></td> <td class="line-content"></td> <p>2.创建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">


	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>

this.showchinese=function () {var createTi1=document.createElement("p");var st1="语文："+this 。中国語;createTi1.innerHTML=st1;aaa.appendChild(createTi1);}this.showmath=function() {var createTi2=document.createElement("p");var st2="数学："+this.math;createTi2.innerHTML=st2;aaa.appendChild(createTi2);}}function Student() {person.call(this,「少君」 ,"56","96");this.age="19";}var sexa=document.getElementById("aa");//Student.prototype=new Person("陈东","88","99");Student.prototype.showage=function () { /*var ncm = new person("陈东","88"," 99");ncm.showname(); .showmath();*/ IV. 概要1. オブジェクトは組み込みオブジェクトとカスタムオブジェクトに分けられます2. 継承を実現するための主な方法はプロトタイプチェーンです3.結合継承とは、プロトタイプチェーンを使用してプロトタイプのプロパティとメソッドを実装することです。返信


	lang="en">

	charset="UTF-8">
	上机练习四<span class="html-tag">


	id="aa">
	<スクリプト>
	関数人(名前,中国語,数学) {
	this.name=name;
	this.chinese=chinese;
	this.math =math;
	var aaa=document.getElementById("aa");
	this.showname=function () {
	var createTi=document.createElement("p ");
	var st="姓名："+this.name;
	createTi.innerHTML=st;
	aaa.appendChild(createTi)
	}





















var createTi3=document.createElement("p");
var st3="年龄："+this.age;
createTi3.innerHTML=st3;
sexa.appendChild(createTi3);
}

	//var per1=new person("Han","Yellow");
	var stu=new Student();
	スチュ.showname();
	stu.showchinese();
	stu.showmath();



	;/html>

以上がjsのデータ型、オブジェクト、コンストラクタについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSとJSコードをHTMLに実装するにはどうすればよいですか?次の記事：CSSとJSコードをHTMLに実装するにはどうすればよいですか?

続きを見る