首頁 web前端 js教程 javascript物件導向入門基礎詳細介紹_js物件導向

javascript物件導向入門基礎詳細介紹_js物件導向

May 16, 2016 pm 05:50 PM
物件導向

什麼是物件

簡單點說,程式語言中的物件是對現實中事物的簡化。例如,我們一個人就是一個對象,但是程式語言很難完全描述一個這樣複雜的對象。所以我們必須做出簡化,首先,將人簡化成屬性和行為的組合,然後只保留對程序有意義的幾個屬性以及行為。例如,我們做一個統計某學校的人的身高的程序,那麼我們在這個程序中就可以把人的行為省略掉,只保留行為,並且只保留身高這一屬性。這樣,我們就得到了一個最簡單的物件。

JavaScript字串物件

物件的屬性
其實我們之前在HTML DOM中已經就是在使用物件了。例如,我們知道,DOM節點有一些資訊、例如nodeName、nodeType等,其實這些資訊就是節點物件的屬性。下面我們以字串為例來看看物件的屬性。

字串的屬性
var s = "我有個7個字元";定義了s這個字串之後,我們就有了一個字串對象,我們可以存取它的長度屬性( length),這個屬性不需要我們定義,它是一個內建的屬性。訪問的方式如下:

s.length點擊下面的按鈕看看字串的長度。

alert(s.length)
字串物件的方法(行為)
同樣,物件也可以有行為,以字串物件為例,我們可以讓字串傳回某一個位置的字母或文字,這就是一個行為。可以用後面的按鈕簡單地體驗字串的各個屬性與方法,本文最後會詳細解釋各個方法的使用方法。

複製程式碼 程式碼如下:



使用字串的length屬性為字串的長度。

alert(str.length)
使用charAt方法傳回指定位置的字元。

alert(str.charAt(0))
alert(str.charAt(1))

substring方法從字串中截取一個子字串。

alert(str.substring(0,2))
indexOf傳回字串中指定字元或字串的位置,如果字元不存在就回傳-1。

alert(str.indexOf('符')
lastIndexOf方法返回一個字符串中某字符最後一次出現的位置。

date對象

實例JavaScript date程式碼
我們先來看一段使用了date物件的JS程式碼。 🎜>

複製程式碼
程式碼如下: var today = new Date( ); //新建一個Date物件
var todayStr = today.toString();//把日期轉換為字串
var todayLocal = today.toLocaleString();//轉換為本地字串
var date = today.getDate();//查詢當月日期
var day = today.getDay();//查詢當前星期幾
var month = today.getMonth();//查詢月份
var year = today.getFullYear();//查詢年份
alert(todayStr);
alert(todayLocal);
alert(date);
alert(day);
alert (month);
alert(year);




新一個Date物件
我們使用以下這個語句來建立一個Date物件。查詢(get)方法
JavaScript date物件設定(set)方法JavaScript date物件轉換(to)方法JavaScript Date物件應用實例-時脈程式碼
本程式碼轉自w3schools.com。 🎜>



複製程式碼


程式碼如下:





陣列物件

建立一個JavaScript陣列
複製程式碼



複製程式碼



複製程式碼


複製程式碼

程式碼





實例JavaScript數組代碼


下面是一段簡單的使用陣列的JS程式碼,可以點選後面的按鈕來觀察各個變數的值。



複製代碼
代碼如下: var arr = new Array("HTML","CSS","JavaScript","DOM");
var arr2 = new Array("ASP.NET","PHP","J2EE","Python" ,"Ruby");
var joinArr = arr.join();
var bigArr = arr.concat(arr2);
var sortArr = bigArr.sort();


arr[n]傳回陣列指定位置的元素,n叫做下標,從0開始。 可以點選下面的按鈕來查看arr各個位置上的元素。




複製程式碼
程式碼如下: alert(arr[0]) //位置0,也就是第一個元素alert(arr[1]) alert(arr[2])
alert(arr[3])


從上面的程式碼可以看到,在呼叫了數組的幾個方法之後得到了joinArr、bigArr、sortArr這幾個變量,這些方法將在後面具體介紹。可以先觀察變數的值來猜猜這些方法的作用。

數學物件
例JavaScript Math程式碼





複製程式碼



複製程式碼


程式碼如下所示
我們首先吧Math.PI的值保存在num中,這是一個JS內建的常數,可以點擊下面的按鈕來查看它的值。
alert(num)
rNum則是num經過四捨五入的值。

alert(rNum)
random方法則產生一個0-1之間的隨機值。試著多點擊幾次下面的按鈕,可以發現得到的數字會不斷改變。
alert(Math.random())

函數物件
在JavaScript中,函數也是對象,我們使用下面以下語句定義一個函數的時候,其實是定義了一個Function類型的物件。 複製程式碼

程式碼如下:


function add(a,b){
f a b;
} 為了說明這個問題,我們可以使用Function的建構子來定義一個add函數: 複製程式碼 程式碼如下:
使用這種方法定義的函數和上面的函數完全一樣,不過這種語法比較麻煩,一般不會使用。
(函數)Function物件的call方法
call是一個非常有用的方法,它可以控制函數的運作環境,也就是控制函數內部this所指向的物件。下面的例子可以說明這個問題:
function whatsThis(){ alert(this); }我們呼叫以上函數的時候,將會看到this指向的是window,實驗一下:
whatsThis()
但是如果使用call,我們可以控制函數內部this的指向,例如:
whatsThis.call(document)()
以上程式碼使用function物件的call方法將函數內部的this指向了document。
如果原來的函數需要接受參數,例如add函數,可以使用以下形式:
add.call(document,1,2)也就是說,call的第一個參數是要綁定給this的對象,而1和2則是原來的add函數需要接受的參數。
(函數)Function物件的apply方法
apply的使用方法與call基本上一致,只是參數是以陣列的形式傳遞的,還是以add函數為例:
add.call(document,[ 1,2])可以看到,原函數add需要接受的兩個數字參數是以一個陣列的形式傳遞進apply的。
(函數)Function物件的caller屬性
function whoCalls(){ alert(whoCalls.caller); } function SheCalls(){ whoCalls(); }whoCalls()SheCalls()
使用callerCalls(); }whoCalls()SheCalls()
使用callerCalls(); }whoCalls()SheCalls()
使用callerCalls(); }whoCalls()SheCalls()
使用callerCalls(); }whoCalls()SheCalls()
使用callerCalls(); }whoCalls()SheCalls()
使用callerCalls();可以了解誰調用了當前函數。注意,只有在函數體內部caller才有效。
(函數)Function物件的arguments屬性
javascript的函數可以接受任意數量的參數,所以定義的時候,參數的個數作並不會限制函數的這個能力。在函數中,我們可以使用arguments來存取傳入函數的參數,例如:
function howmany(){ var num = arguments.length; alert(num); }howmany函數會輸出傳遞如函數參數的數量,點擊下面的連個按鈕試驗一下。 howmany(1,2,3,4)howmany(1,2,3,4,5,6,7,8) 函數arguments.callee 我們已經知道function會有arguments屬性,而arguments.callee則是目前正在執行的函數,例如: function whoAmI(){ alert(arguments.callee); }whoAmI() 執行上述函數會顯示目前函數的原始碼。當然了,我們可以再次呼叫callee,這主要用於匿名函數遞歸。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

如何使用Go語言實現物件導向的事件驅動程式設計 如何使用Go語言實現物件導向的事件驅動程式設計 Jul 20, 2023 pm 10:36 PM

如何使用Go語言實現物件導向的事件驅動程式設計引言:物件導向的程式設計範式被廣泛應用於軟體開發中,而事件驅動程式設計是一種常見的程式設計模式,它透過事件的觸發和處理來實現程式的流程控制。本文將介紹如何使用Go語言實現物件導向的事件驅動編程,並提供程式碼範例。一、事件驅動程式設計的概念事件驅動程式設計是一種基於事件和訊息的程式設計模式,它將程式的流程控制轉移到事件的觸發和處理上。在事件驅動

@JsonIdentityInfo註解在Java中使用Jackson的重要性是什麼? @JsonIdentityInfo註解在Java中使用Jackson的重要性是什麼? Sep 23, 2023 am 09:37 AM

當物件在Jackson庫中具有父子關係時,將使用@JsonIdentityInfo註解。 @JsonIdentityInfo 註解 用於在序列化和反序列化過程中指示物件身分。 ObjectIdGenerators.PropertyGenerator是一個抽象佔位符類,用來表示要使用的物件識別碼來自POJO屬性的情況。語法@Target(value={ANNOTATION_TYPE,TYPE,FIELD,METHOD,PARAMETER})@Retention(value=RUNTIME)public

探索Go語言中的物件導向編程 探索Go語言中的物件導向編程 Apr 04, 2024 am 10:39 AM

Go語言支援物件導向編程,透過型別定義和方法關聯實作。它不支援傳統繼承,而是透過組合實現。介面提供了類型間的一致性,允許定義抽象方法。實戰案例展示如何使用OOP管理客戶訊息,包括建立、取得、更新和刪除客戶操作。

解析PHP物件導向程式設計中的享元模式 解析PHP物件導向程式設計中的享元模式 Aug 14, 2023 pm 05:25 PM

解析PHP物件導向程式設計中的享元模式在物件導向程式設計中,設計模式是一種常用的軟體設計方法,它可以提高程式碼的可讀性、可維護性和可擴充性。享元模式(Flyweightpattern)是設計模式中的一種,它透過共享物件來降低記憶體的開銷。本文將探討如何在PHP中使用享元模式來提升程式效能。什麼是享元模式?享元模式是一種結構型設計模式,它的目的是在不同物件之間共享相同的

PHP高階特性:物件導向程式設計的最佳實踐 PHP高階特性:物件導向程式設計的最佳實踐 Jun 05, 2024 pm 09:39 PM

PHP中OOP最佳實務包括命名約定、介面與抽象類別、繼承與多型、依賴注入。實戰案例包括:使用倉庫模式管理數據,使用策略模式實現排序。

Golang中有類似類別的物件導向特性嗎? Golang中有類似類別的物件導向特性嗎? Mar 19, 2024 pm 02:51 PM

在Golang(Go語言)中並沒有傳統意義上的類別的概念,但它提供了一種稱為結構體的資料類型,透過結構體可以實現類似類別的物件導向特性。在本文中,我們將介紹如何使用結構體實現物件導向的特性,並提供具體的程式碼範例。結構體的定義和使用首先,讓我們來看看結構體的定義和使用方式。在Golang中,結構體可以透過type關鍵字定義,然後在需要的地方使用。結構體中可以包含屬

Go語言的物件導向特性解析 Go語言的物件導向特性解析 Apr 04, 2024 am 11:18 AM

Go語言支援物件導向編程,透過struct定義對象,使用指標接收器定義方法,並透過介面實現多態。物件導向特性在Go語言中提供了程式碼重用、可維護性和封裝,但也存在缺乏傳統類別和繼承的概念以及方法簽章強制型別轉換的限制。

PHP物件導向程式設計的深入理解:物件導向程式設計的除錯技巧 PHP物件導向程式設計的深入理解:物件導向程式設計的除錯技巧 Jun 05, 2024 pm 08:50 PM

透過掌握追蹤物件狀態、設定斷點、追蹤異常和利用xdebug擴展,可以有效調試PHP物件導向程式碼。 1.追蹤物件狀態:使用var_dump()和print_r()檢視物件屬性和方法值。 2.設定斷點:在開發環境中設定斷點,偵錯器會在執行到達斷點時暫停,以便檢查物件狀態。 3.追蹤異常:使用try-catch區塊和getTraceAsString()取得異常發生時的堆疊追蹤和訊息。 4.利用偵錯器:xdebug_var_dump()函數可在程式碼執行過程中檢查變數的內容。

See all articles