JavaScript中的對象

對象的基本概念、屬性和方法

JS對象能夠理解爲帶有屬性和方法的特殊數據類型。

類：類是具備相同類型的對象的抽象。一個對象包含的全部數據和過程能夠經過類來構造。

繼承性：在某種狀況下，一個類會有「子類」，子類比本來的類（稱爲父類）要更加具體化

封裝性：類向外部隱藏某一方法的具體執行步驟

多態性：由繼承而產生的相關的不一樣類，其對象對同一消息會作出不一樣的響應。

建立對象：

1.使用構造函數建立對象

基本結構： var  objectName= new  functionName(args)

objectName表示構造的實例對象

functionName表示一個構造函數

Args表示參數列表

構造函數內this指代objectName實例對象

2.使用對象直接量建立對象（推薦）

屬性名與屬性值之間經過冒號進行分隔。屬性與屬性之間經過逗號進行分隔。

對象的屬性值能夠是任意類型數據，函數、數組、對象、值等等

1. new操做符

var cat = new Object();

cat.name=「sunny」;  //屬性

cat.legs=4;

2. 對象字面量表示法(推薦)

var cat={

       name:「Tom」,   //屬性

       legs:4

}

操做對象

引用對象

建立對象後，把對象的地址賦值給變量，實現變量對對象的引用

o = {  // 建立對象，並引用該對象給變量o

   x:1,

   y:true

}

o1 = o;   // 複製變量o

alert(delete o);   // 刪除變量o，返回值爲true，說明刪除成功

alert(o1.x);   // 讀取對象內數據，顯示爲1，說明對象依然存在

alert(o.x);   // 使用o讀取對象內的數據，提示沒有定義對象

複製對象

利用for/in語句遍歷對象成員，而後注意賦值給另外一個對象

function F(x,y){   // 構造函數F

    this.x = x;   // 本地屬性x

    this.y = y;   // 本地屬性y

    this.add = function(){  // 本地方法add()

        return this.x + this.y;

    }

}

F.prototype.mul = function(){  // 原型方法mul()

    return this.x * this.y;

}

var f = new F(2,3)   // 實例化構造函數，並進行初始化

var o = {}   // 定義一個空對象o

for(var i in f){   // 遍歷構造函數的實例，把它的全部成員賦值給對象o

    o[i] = f[i];

}

alert(o.x);   // 返回2

alert(o.y);   // 返回3

alert(o.add());  // 返回5

alert(o.mul());  // 返回6

//注意，有一個易混點，var a=function(){} 此時a即表明方法，alert的話顯示a的方法體也能代表a自己就是方法，說是一個易混點是由於，這個容易與方法爲變量賦值混淆，好比：var a=b();這個就是用b方法爲變量a賦值，而a此時表明的是方法b的返回值，而並不是是方法b自己了。

刪除對象

JavaScript具備自動垃圾收集機制，執行環境會負責管理代碼執行過程當中使用的內存。找出那些再也不繼續使用的變量，而後釋放其佔用的內存。

系統分配給瀏覽器的內存一般小於桌面應用程序，所以須要優化內存管理，讓頁面得到更好的性能。

對象刪除：
var obj = new Object();
obj = null;  //解除引用 ，解除引用以後，js垃圾回收機制自動刪除對象。

操做屬性             

定義屬性

冒號定於對象屬性，左側爲屬性名右側爲屬性值   //注意，是冒號，不是等號。

例如： x:stringtext；

訪問屬性

經過.訪問 x. stringtext；

賦值屬性

x. stringtext=1；

刪除屬性

Delete  x；

 

JavaScript中的經常使用內置對象

對象是一種數據結構，用於將數據（屬性）和功能（方法）組織在一塊兒。

主要分爲：

基本包裝類型：Boolean、Number、String

引用類型：Array、Date、RegExp、Function等      //有時間仔細研究一下。

單體內置對象：Global、Math

-------------------------------------------------------------------------------------------------------------

爲了提升使用基本類型值的便捷性，提供3個基本包裝類型：Boolean、Number、String，封裝了各自的屬性和方法

當讀取一個基本類型值時，後臺將自動建立一個對應的基本類型的對象

var s1 = 「test";

var s2 = s1.substring(2);   //基本類型值不該有方法？

實際上在後臺建立了String類型的實例：

var s1 = new String(「test「);       //建立實例

var s2 = s1.substring(2);            //調用方法

var s1 = null;                                //銷燬實例

-------------------------------------------------------------------------------------------------------------

Number類型

toString()方法

var num = 10;

alert(num.toString());       //"10"

alert(num.toString(2));      //「1010」 二進制數

alert(num.toString(16));     //「a」 十六進制數

toFixed()方法，按設定的小數位數返回字符串

var num = 10;

alert(num.toFixed(2));       //"10.00"

String類型

字符串長度屬性 .length

字符方法 charAt(), charCodeAt()

var stringValue = 「hello world」;

alert(stringValue.charAt(1));      //「e」

alert(stringValue.charCodeAt(1));     //「101」

charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。

//方法 charCodeAt() 與 charAt() 方法執行的操做類似，只不過前者返回的是位於指定位置的字符的編碼，然後者返回的是字符子串。

字符串操做方法

concat()   //拼接字符串

substring   //取子字符串

字符串位置方法

var stringValue = 「hello world」;

alert(stringValue. indexOf(「o」));      //4 ，，這個默認是第一個"o"的位置。

alert(stringValue.lastIndexOf(「o」));     //7 ,仍是很精細的，這個返回最後一個「o」的位置

刪除先後空格的方法   trim()

大小寫轉換方法  toLowerCase()  toUpperCase()

對象－－Array類型

數組，一組值的有序列表

-------------------------------------------------------------------------------------------------------------

特色：

同一數組每一個單元能夠保存不能類型的值，如{「blue」, 3, true, null}

動態數組，長度能夠動態調整

功能強大：提供棧、隊列、排序等功能

-------------------------------------------------------------------------------------------------------------

建立方法包括如下三種方式：

         1）new Array();

         2）new Array(size);

         3）new Array(element0, element1, ..., elementn);

參數:

參數 size 是指望的數組元素個數。

參數 element ..., elementn 是參數列表。

返回值：

1）方法返回的數組爲空，length 字段爲 0。

2）方法返回具備指定個數、元素爲 undefined 的數組。

3）方法返回具備指定個數、元素爲 指定值的數組。

Array對象中包含的主要方法以下：

方法	描述
concat()	鏈接兩個或更多的數組，並返回結果 //這個常常用到。
join()	把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔 //這個很實用。
pop()	刪除並返回數組的最後一個元素      //棧方法
push()	向數組的末尾添加一個或更多元素，並返回新的長度 //絕對最經常使用，注意不是add()方法，而是push
reverse()	顛倒數組中元素的順序
shift()	刪除並返回數組的第一個元素        //隊列方法 ,聯繫pop();
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度  //un
sort()	對數組的元素進行排序    //l相似於java的一個接口
toString()	把數組轉換爲字符串，並返回結果    //貌似沒什麼大用處，數組能夠直接alert(),固然也會有好多其餘用處
valueOf()	返回數組對象的原始值

 

對象－－Date類型

Date 對象用於處理日期和時間，使用自UTC（Coordinated Universal Time,國際協調時間）1970年1月1日午夜（零時）開始通過的毫秒數來保存日期。Date對象建立方法有如下幾種：

var now = new Date();     //得到當前系統日期和時間

var someDate = new Date(Date.parse("May 25,2012"));

var someDate = new Date("May 25,2012"); //與上相同

var someDate = new Date(Date.UTC(2010,0)); //GMT時間2010年1月1日凌晨0時

var someDate = new Date(2010,0); //與上相同

var someDate = new Date(Date.UTC(2010,4,5,17,55,55)); //GMT時間2010年5月6日下午5:55:55，月和時以0爲基數,0表示一月

var someDate = new Date(2010,4,5,17,55,55); //與上相同

Date對象經常使用的方法和說明以下：

方法	描述
getDate()	從 Date 對象返回日期 (1 ~ 31)  //日
getDay()	從 Date 對象返回星期幾(0 ~ 6)  //星期幾
getTime()	返回 1970 年 1 月 1 日至今的毫秒數  //經常使用來測試程序
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒數
setDate()	設置 Date 對象中月的某一天 (1 ~ 31)
setTime()	以毫秒設置 Date 對象
toString()	把 Date 對象轉換爲字符串
toTimeString()	把 Date 對象的時間部分轉換爲字符串
toDateString()	把 Date 對象的日期部分轉換爲字符串

===============================================================

有一個問題應當注意：

var a=new Date().parse();   //這個是容許的，由於parse方法是Date類的靜態方法，容許點點直接點調用。可是其餘的非靜態方法則不行。

var a=new Date().getDate();

var b=a.getTime();    //非靜態方法應當如此定義（getTime是靜態方法，只是舉個例子）。4

===============================================================

對象－－RegExp類型

RegExp 對象表示正則表達式，它是對字符串執行模式匹配的強大工具，被用來檢索、替換那些符合某個模式的文本。

語法：

          new RegExp(pattern, attributes);

參數：

          pattern 是一個字符串，指定了正則表達式的模式或其餘正則表達式。

attributes 是一個可選的字符串，包含屬性 "g"、"i" 和 "m"，分別用於指定全局匹配、區分大小寫的匹配和多行匹配。

方括號用於查找某個範圍內的字符：

表達式	描述
[abc]	查找方括號之間的任何字符
[^abc]	查找任何不在方括號之間的字符
[0-9]	查找任何從 0 至 9 的數字
[a-z]	查找任何從小寫 a 到小寫 z 的字符
[A-Z]	查找任何從大寫 A 到大寫 Z 的字符
[A-z]	查找任何從大寫 A 到小寫 z 的字符
[adgk]	查找給定集合內的任何字符
[^adgk]	查找給定集合外的任何字符
(red|blue|green)	查找任何指定的選項

 

元字符（Metacharacter）是擁有特殊含義的字符：

元字符	描述
\d	查找數字
\D	查找非數字字符
\s	查找空白字符
\S	查找非空白字符
\n	查找換行符
\f	查找換頁符
\r	查找回車符
\t	查找製表符

 

RegExp對象屬性：

屬性	描述
global	RegExp 對象是否具備標誌 g
ignoreCase	RegExp 對象是否具備標誌 i
lastIndex	一個整數，標示開始下一次匹配的字符位置
multiline	RegExp 對象是否具備標誌 m
source	正則表達式的源文本

 

RegExp對象方法：

方法	描述
exec	檢索字符串中指定的值。返回找到的值，並肯定其位置
test	檢索字符串中指定的值。返回 true 或 false

 

對象－－Function類型lJS 中Function類型其實是一種對象Object。每個函數實際上都是Function類型的一個實例，每個函數都有一些默認的屬性和方法。

function sum(num1, num2)

{ return num1 + num2;}

至關於

var sum = function(num1, num2)

{ return num1 + num2;};

函數名其實是一個指向函數對象的指針變量

function sum(num1, num2)

{ return num1 + num2;}

alert(sum(10,10));         //20

var anotherSum = sum;

alert(anotherSum(10,10));  //20

sum = null;

alert(anotherSum(10,10));  //20

函數名是指針，JS函數沒有重載。

做爲值的函數，能夠像傳遞參數同樣將函數傳遞給另外一個函數

function callSomeFunction(someFunction, someArgument){

            return someFunction(someArgument);        }

 

function add10(num){   return num + 10;        }

 

var result1 = callSomeFunction(add10, 10);

        alert(result1);   //20

注意不是 callSomeFunction(add10(), 10);   //add10()是執行函數後的結果，這個地方很容易出錯

函數內部屬性

arguments，是一個數組對象，包含傳入函數的全部參數，如能夠經過arguments[0]取第一個參數

this，指向函數執行的環境對象

        window.color = "red";

        var o = { color: "blue" };

        function sayColor(){

            alert(this.color);

        }

        sayColor();     //red

        o.sayColor = sayColor;  //這點要注意,Js是基於對象的，用於一個對象的方法一般對其餘對象再也不適用，可是能夠在想應用的對象上在定義一個函數使其等於目標函數。

        o.sayColor();   //blue

內置對象：ECMAScript實現提供的、不依賴於宿主環境的對象，在ECMAScript程序執行以前就已經存在。

Global對象：全部在全局做用域中定義的屬性和函數，都屬於Global對象，好比isNaN()、parseInt()、parseFloat()、encodeURI()、eval()方法。

Math對象：用於執行數學任務

屬性：Math.PI、SQRT2（2 的平方根）等

方法：abs(x)、sin(x)、max(x, y)、round(x)、ceil(x)等。

瀏覽器對象

BOM瀏覽器對象模型（Browser Object Model）

主要用於管理瀏覽器窗口，提供獨立於內容而與瀏覽器窗口進行交互的對象。這些功能與任何網頁內容無關。

能夠對瀏覽器窗口進行訪問和操做，如能夠彈出新的窗口，改變狀態欄中的文本等

============================================================

Window：客戶端JS中的頂層對象。每當body或frameset標籤出現時，window對象就會被自動建立。

Navigator：包含客戶端有關瀏覽器的信息。

Screen：包含客戶端顯示屏的信息。

History：包含瀏覽器窗口訪問過的URL信息。

Location：包含當前網頁文檔的URL信息。

Document：包含整個HTML文檔，可被用來訪問文檔內容，及其全部頁面元素。

============================================================

window對象

Window對象時BOM的核心，表明瀏覽器窗口的一個實例。在瀏覽器中，window對象既是JavaScript訪問瀏覽器窗口的接口，也是JavaScript的全局對象，所以在全局做用域中聲明的全部變量和函數也是window對象的屬性和方法

表示整個瀏覽器窗口，不包含內容

frames集合--能夠用window.frames[0]或者window[「frameName」]來引用框架

框架中包含框架，父框架parent對象，self對象

window對象

窗口操做：調整瀏覽器窗口的大小和位置
window.resizeTo(150,300);

打開新窗口
window.open(「http://www.163.com」,」topFrame」,」屬性字符串height=300,width=300,resizable=yes」);

彈出系統對話框 alert()  、confirm()等

歷史history
window.history.go(-1);   //後退一頁
window.history.go(1);   //前進一頁
history.length  //歷史頁面數

document對象

瀏覽器當前文檔對象，既屬於BOM也屬於DOM （Document Object Model，文檔對象模型）

屬性
            bgColor      //背景顏色
            fgColor      //文本顏色
            linkColor   //連接的顏色
            title            //<title/>中的文本
            URL          //當前頁面的url

集合
            anchors    //<a href=「……」 >
            images      //頁面中全部圖片的集合
            forms      //全部表單的集合
            links        //全部外部文件鏈接的集合

   可使用document.images[0] 或者 document.images[「imagename」]訪問圖片

在調用的位置寫入字符串
write(「This is a test」);
writeln(「This is a test」);   //末尾加上換行符\n

open()打開文檔進行編寫

close()關閉open()打開的文檔，讓瀏覽器顯示頁面

必須在徹底載入頁面前調用write()。若是在頁面載入後調用，將抹去頁面的內容，顯示指定的內容。

location對象

地址對象，就是將URL封裝成了一個對象

屬性
      host  //返回服務器的名字，如www.qq.com
      href  //當前瀏覽器的完整url
   pathname      //url主機名後的部分，如www.qq.com/news/index.aspx  將放回/news/index.aspx
      port            //端口
      protocol      //url中使用的協議，http://或者ftp://
      search         //將返回?後（包括?）的內容

lnavigator對象

瀏覽器信息對象，提供瀏覽器的信息

大多數瀏覽器支持的屬性
appName    //官方瀏覽器名
appVersion    //瀏覽器版本
platform      //運行瀏覽器的平臺

screen對象

height / width屏幕的高度和寬度，像素

colorDepth，調色板的顏色深度