js中資料類型，對象，建構函數詳解-js教程-PHP中文網

首頁

web前端

js教程

js中資料類型，對象，建構函數詳解

零下一度

Jul 02, 2017 am 09:20 AM

javascript js

JavaScript資料型，對象，建構函數，原型對象，初識原型鏈，物件繼承

一。單字部分

①object父類別②constructor建構子③instance實例④call呼叫

⑤apply應用⑥combination組合⑦inheritance繼承

二.預習部分

1.簡述創建物件的兩種方法，以及兩者的區別

new 和字面量賦值

前者要用點.加入屬性與方法

後者直接呼叫

2.簡述使用建構子建立實例的步驟

①建立一個新物件

②將建構函式的作用域賦值給新物件

③執行建構函式程式碼區塊

④傳回新物件

#3.簡述原型鏈在繼承中的作用

它是實作繼承的主要方法

三.上機部分

1.建立person物件

# ## #


	#lang="en">
#	##
	charset="UTF-8">
	建立person物件<span class="html-tag">



	#
	id="aa">
	<script> </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 person=new Object();</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.name= "郎曉明";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.age="38";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person. job="中國內地男演員、歌手";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.address="中國北京海淀區";</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.info=function () {</td> </tr> <tr> <td class="line-number"># </td> <td class="line-content">var strr="姓名："+this.name+"<br/ >年齡："+this.age+"<br/>工作："+this.job+"<br/>住址："+this.address;</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">//document.write(strr);</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">document.getElementById("aa").innerHTML=strr;</td> </tr> <tr> <td class="line-number"># </td> <td class="line-content">}</td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">person.info();</td> </tr> <tr> <td class="line-number"> # </td> <td class="line-content"><span class="html-tag"></script>
#
	#

#######

2.创建person构造函数

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"></td>function Person(name,age,job,address) {</tr> <tr> <td class="line-number"></td> <td class="line-content"></td>this.name=name;</tr> <tr> <td class="line-number"></td># <td class="line-content"></td>this.age=age;</tr> <tr> <td class="line-number"></td># <td class="line-content"></td>this.job=job;</tr> <tr> <td class="line-number"></td> <td class="line-content"></td>this.address=address;</tr> <tr> <td class="line-number"></td># <td class="line-content"></td>this.show=function() {</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> <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>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> <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> <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("郎明明","38","中國內地男演員、歌手","中國北京海淀區");<tr> <td class="line-number"></td> <td class="line-content"># </td> </tr>Pers.prototype.name1="陳東";<tr> <td class="line-number"></td> <td class="line-content"> <span class="html-tag"></span>Pers.prototype.age1="20"; </td> </tr> <tr> <td class="line-number"> </td> <td class="line-content">Pers.prototype.job1="IT";<span class="html-tag"></span> </td> </tr> <tr> <td class="line-number">Pers.prototype. address1="河南省";</td> <td class="line-content"> <span class="html-tag"></span> </td> </tr>Pers.prototype.showinn=function () {</tbody></table>###### ### ###var createTi=document.createElement("p");############# ######var strrr="姓名："+this.name1+"<br/&gt ;年齡："+this.age1+"<br/>工作："+this.job1+"<br/>住址："+this.address1;############# # #####document.getElementById("aa").innerHTML=strrr;############ ######}############# # #####var one=new Pers();############ ######one.showinn();############ # #####//newper.show();############ ##########</script> ########### #### ######### ################ ############ ############

3.创建person对象原型链

## function Person(nation,skinColor) { #this.nation = nation; this.skinColor=skinColor; var aaa=文件。 ("aa"); this.shownation=function () { # var createTi=document.createElement("p");# var st="民族："+this.nation;# createTi.innerHTML=st;# aaa.appendChild(createTi)# } #this.showskin=function () { var createTi1=document.createElement("p");# var st1="膚色："+this.skinColor; createTi1.innerHTML=st1; aaa.appendChild(createTi1);# } #} function Woman() { Person.call(this,"滿族","黑色");this.sex="女"; #} var sexa=document.getElementById("aa"); / /Woman.prototype=new Person("漢族","");# Woman.prototype.showsex=function () { var createTi3=document.createElement("p"); var st3="性別："+ this.sex; createTi3.innerHTML=st3; #sexa. appendChild( createTi3);} //var per1=new Person("漢族","黃"); var wo=new Woman () ;#wo.shownation();## # # # ##

lang="en">

charset="UTF-8">

上机练习三<span class="html-tag">

id="aa">

wo.showskin();

wo.showsex();

4.创建继承person的student子类

## function Person(姓名,中文,數學) { this . name=名稱; this.chinese=中文;## ## aaa.appendChild(createTi)# } this.showchinese=function () { var createTi1=document.createElement("p"); var st1="文字："+this.chinese;# ##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 createTi3=document.createElement("p");# var st3="年齡："+this.age;# createTi3.innerHTML=st3; sexa.appendChild(createTi3);# }


	lang="en">

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


	id="aa">
	##



this.math =數學;
var aaa=document.getElementById("aa");
this.showname=function () {
#var createTi=document.createElement("p");
#var st="姓名："+this.name;
createTi.innerHTML=st;








	#

	#

















#	//var per1=new Person("漢族","黃色");
	var stu=new Student();
	stu.showname ();
	stu.showchinese();
	stu.showmath() ;
	stu.showage();
	/*var ncm = new Person ("陳東","88","99");
	ncm.showname();
	ncm.showchinese();
	ncm.showmath();*/

# #
#

四.總結

1.物件分為內建物件和自訂物件

###2.原型鍊是實現繼承的主要方法######3.組合繼承的想法是使用原型鏈實現原型屬性和方法的繼承###### ######歡迎提問，歡迎指錯，歡迎討論學習資訊有需要的私聊發布評論即可都能回覆的###### # ##

以上是js中資料類型，對象，建構函數詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7488

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

See all articles

js中資料類型，對象，建構函數詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題