JavaScript原生對象及擴展

轉自：http://segmentfault.com/a/1190000002634958

內置對象與原生對象

內置（Build-in）對象與原生（Naitve）對象的區別在於：前者老是在引擎初始化階段就被建立好的對象，是後者的一個子集；然後者包括了一些在運行過程當中動態建立的對象。

原生對象（New後的對象）

ECMA-262 把原生對象（native object）定義爲「獨立於宿主環境的 ECMAScript 實現提供的對象」。包括以下：

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、ActiveXObject(服務器方面)、Enumerator(集合遍歷類)、RegExp（正則表達式） 

由此能夠看出，簡單來講，原生對象就是 ECMA-262 定義的類（引用類型）。

來源： http://es5.github.com/#x4.3.6

內置對象（不須要New）

定義：由ECMAScript實現提供的對象，獨立於宿主環境，在一個腳本程序執行的開始處。

注：每一個內置對象(built-in object)都是原生對象（Native Object），一個內置的構造函數是一個內置的對象，也是一個構造函數。

來源：http://es5.github.io/#x4.3.7

舉個栗子：

Native objects: Object (constructor), Date, Math, parseInt, eval。 string 方法好比 indexOf 和 replace, array 方法, ... Host objects (假定是瀏覽器環境): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, ... 

ECMA-262(15頁) 只定義了兩個新的內置對象，即 Global 和 Math （它們也是原生對象，根據定義，每一個內置對象都是原生對象）。

如下是ECMA-262定義的內置對象（built-in）：

global、Object、Function、Array、String、Boolean、Number、Math、Date、RegExp、JSON、Error對象（Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError 和URIError） 

咱們也能夠修改內置對象的原型

if (!Array.prototype.forEach) { Array.prototype.forEach = function(fn){ for ( var i = 0; i < this.length; i++ ) { fn( this[i], i, this ); } }; } ["a", "b", "c"].forEach(function(value, index, array){ assert( value, "Is in position " + index + " out of " + (array.length - 1) ); }); 

以上代碼將輸出：

PASS Is in position 0 out of 2 PASS Is in position 1 out of 2 PASS Is in position 2 out of 2 

注意：擴展原型是很危險的：

Object.prototype.keys = function(){ var keys = []; for ( var i in this ) keys.push( i ); return keys; }; var obj = { a: 1, b: 2, c: 3 }; assert( obj.keys().length == 3, "We should only have 3 properties." ); delete Object.prototype.keys; 

輸出： FAIL We should only have 3 properties.

若是不是有特殊須要而去擴展原生對象和原型（prototype）的作法是很差的

//不要這樣作 Array.prototype.map = function() { // code }; 

除非這樣作是值得的，例如，向一些舊的瀏覽器中添加一些ECMAScript5中的方法。
在這種狀況下，咱們通常這樣作：

<script type="text/javascript"> if (!Array.prototype.map) { Array.prototype.map = function() { //code }; } </script> 

用原型擴展對象

對js原生對象的擴展無非就是往prototype裏註冊，例如，咱們能夠往String對象裏擴展ltrim,rtrim等方法。js每一個對象都繼承自Object，而且，對象和其餘屬性都經過prototype對象來繼承。經過prototype對象，咱們能夠擴展任何對象，包括內建的對象，如String和Date：

String對象的擴展

<script type="text/javascript"> if(typeof String.prototype.ltrim=='undefined'){ String.prototype.ltrim = function(){ var s = this; s = s.replace(/^\s*/g, ''); return s; } } if(typeof String.prototype.rtrim=='undefined'){ String.prototype.rtrim = function(){ var s = this; s = s.replace(/\s*$/g, ''); return s; } } if(typeof String.prototype.trim=='undefined'){ String.prototype.trim = function(){ return this.ltrim().rtrim(); } } if(typeof String.prototype.htmlEncode=='undefined'){ String.prototype.htmlEncode = function(encodeNewLine){//encodeNewLine:是否encode換行符 var s = this; s = s.replace(/&/g, '&amp;'); s = s.replace(/</g, '&lt;'); s = s.replace(/>/g, '&gt;'); s = s.replace(/'/g, '&quot;'); if(encodeNewLine){ s = s.replace(/\r\n/g, '<br />'); s = s.replace(/\r/g, '<br />'); s = s.replace(/\n/g, '<br />'); } return s; } } </script> 

Date對象的擴展

getDaysInMonth：獲取某月有多少天

Date.getDaysInMonth = function (year, month) { var days = 0; switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: days = 31 break; case 4: case 6: case 9: case 11: days = 30; break; case 2: if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) days = 29; else days = 28; break; } return days; } if (typeof Date.prototype.format == 'undefined') { Date.prototype.format = function (mask) { var d = this; var zeroize = function (value, length) { if (!length) length = 2; value = String(value); for (var i = 0, zeros = ''; i < (length - value.length); i++) { zeros += '0'; } return zeros + value; }; return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function ($0) { switch ($0) { case 'd': return d.getDate(); case 'dd': return zeroize(d.getDate()); case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()]; case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()]; case 'M': return d.getMonth() + 1; case 'MM': return zeroize(d.getMonth() + 1); case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()]; case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()]; case 'yy': return String(d.getFullYear()).substr(2); case 'yyyy': return d.getFullYear(); case 'h': return d.getHours() % 12 || 12; case 'hh': return zeroize(d.getHours() % 12 || 12); case 'H': return d.getHours(); case 'HH': return zeroize(d.getHours()); case 'm': return d.getMinutes(); case 'mm': return zeroize(d.getMinutes()); case 's': return d.getSeconds(); case 'ss': return zeroize(d.getSeconds()); case 'l': return zeroize(d.getMilliseconds(), 3); case 'L': var m = d.getMilliseconds(); if (m > 99) m = Math.round(m / 10); return zeroize(m); case 'tt': return d.getHours() < 12 ? 'am' : 'pm'; case 'TT': return d.getHours() < 12 ? 'AM' : 'PM'; case 'Z': return d.toUTCString().match(/[A-Z]+$/); // Return quoted strings with the surrounding quotes removed default: return $0.substr(1, $0.length - 2); } }); }; } 

使用原生js實現複製對象及擴展

jQuery的extend()方法能很方便的實現擴展對象方法，這裏要實現的是：使用原生js實現複製對象，擴展對象，相似jQuery中的extend()方法

var obj1 = { name : 'trigkit4', age : 22 }; var obj2 = { name : 'frank', age : 21, speak : function(){ alert("hi, I'm + name "); } }; var obj3 ={ age : 20 }; function cloneObj(oldObj) { //複製對象方法 if (typeof(oldObj) != 'object') return oldObj; if (oldObj == null) return oldObj; var newObj = Object(); for (var i in oldObj) newObj[i] = cloneObj(oldObj[i]); return newObj; } function extendObj() { //擴展對象 var args = arguments;//將傳遞過來的參數數組賦值給args變量 if (args.length < 2) return; var temp = cloneObj(args[0]); //調用複製對象方法 for (var n = 1; n < args.length; n++) { for (var i in args[n]) { temp[i] = args[n][i]; } } return temp; } var obj =extendObj(obj1,obj2,obj3); console.log(obj);//{ name: 'frank', age: 20, speak: [Function] } console.log(obj1);//{ name: 'trigkit4', age: 22 } console.log(obj2);//{ name: 'frank', age: 21, speak: [Function] } console.log(obj3);//{ age: 20 } 

es5-safe 模塊

es5-safe 模塊裏，僅擴展了能夠較好實現的能夠安全使用的部分方法，包括：

Function.prototype.bind Object.create Object.keys Array.isArray Array.prototype.forEach Array.prototype.map Array.prototype.filter Array.prototype.every Array.prototype.some Array.prototype.reduce Array.prototype.reduceRight Array.prototype.indexOf Array.prototype.lastIndexOf String.prototype.trim Date.now 

詳情：http://es5.github.io/

對象的建立

JavaScript 支持四種類型的對象：內部對象、生成的對象、宿主給出的對象（如 Internet 瀏覽器中的 window 和document）以及 ActiveX 對象（外部組件）。

Microsoft Jscript 提供了 11 個內部（或「內置」）對象。它們是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error 以及 String 對象。每個對象有相關的方法和屬性，

JavaScript中對象的建立有如下幾種方式：

（1）使用內置對象 （2）使用JSON符號 （3）自定義對象構造 

1、使用內置對象

JavaScript可用的內置對象可分爲兩種：

1，JavaScript語言原生對象（語言級對象），如String、Object、Function等； 2，JavaScript運行期的宿主對象（環境宿主級對象），如window、document、body等。 

內置對象列表

Array Boolean Date Error EvalError Function Infinity JSON Map Math NaN Number Object ParallelArray Promise Proxy RegExp Set String Symbol SyntaxError Uint32Array WeakSet decodeURI decodeURIComponent() encodeURI() encodeURIComponent() escape()已廢棄 eval() isFinite() isNaN() null parseFloat parseInt undefined 

以上資料來源於：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Glob...

自定義對象構造

建立高級對象構造有兩種方式：使用「this」關鍵字構造、使用原型prototype構造

Date對象

get系列方法

getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。 getDay() 從 Date 對象返回一週中的某一天 (0 ~ 6)。 getMonth() 從 Date 對象返回月份 (0 ~ 11)。 getFullYear() 從 Date 對象以四位數字返回年份。注意不要使用getYear()。 getHours() 返回 Date 對象的小時 (0 ~ 23)。 getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。 getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。 getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒數。 getTimezoneOffset() 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。 getUTCDate() 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。 getUTCDay() 根據世界時從 Date 對象返回週中的一天 (0 ~ 6)。 getUTCMonth() 根據世界時從 Date 對象返回月份 (0 ~ 11)。 getUTCFullYear() 根據世界時從 Date 對象返回四位數的年份。 getUTCHours() 根據世界時返回 Date 對象的小時 (0 ~ 23)。 getUTCMinutes() 根據世界時返回 Date 對象的分鐘 (0 ~ 59)。 getUTCSeconds() 根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。 getUTCMilliseconds() 根據世界時返回 Date 對象的毫秒(0 ~ 999)。 

set系列方法

setDate() 設置 Date 對象中月的某一天 (1 ~ 31)。 setMonth() 設置 Date 對象中月份 (0 ~ 11)。 setFullYear() 設置 Date 對象中的年份（四位數字）。注意不要使用setYear()方法。 setHours() 設置 Date 對象中的小時 (0 ~ 23)。 setMinutes() 設置 Date 對象中的分鐘 (0 ~ 59)。 setSeconds() 設置 Date 對象中的秒鐘 (0 ~ 59)。 setMilliseconds() 設置 Date 對象中的毫秒 (0 ~ 999)。 setTime() 以毫秒設置 Date 對象。 setUTCDate() 根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。 setUTCMonth() 根據世界時設置 Date 對象中的月份 (0 ~ 11)。 setUTCFullYear() 根據世界時設置 Date 對象中的年份（四位數字）。 setUTCHours() 根據世界時設置 Date 對象中的小時 (0 ~ 23)。 setUTCMinutes() 根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。 setUTCSeconds() 根據世界時設置 Date 對象中的秒鐘 (0 ~ 59)。 setUTCMilliseconds() 根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。 

toString系列方法

toString() 把 Date 對象轉換爲字符串，toString()老是返回一個用美式英語表達的字符串。 toTimeString() 把 Date 對象的時間部分轉換爲字符串。 toDateString() 把 Date 對象的日期部分轉換爲字符串。 toUTCString() 根據世界時，把 Date 對象轉換爲字符串。 toLocaleString() 根據本地時間格式，把 Date 對象轉換爲字符串。 toLocaleTimeString() 根據本地時間格式，把 Date 對象的時間部分轉換爲字符串。 toLocaleDateString() 根據本地時間格式，把 Date 對象的日期部分轉換爲字符串。 

Array對象

屬性

constructor
    指定建立對象原型的函數。

index 若是數組是經過正則表達式匹配建立的，比配是字符串的下標索引爲0. input 若是數組是經過正則表達式匹配建立的，返回原始的字符串。 length長度 返回數組中元素個數. prototype 容許爲全部對象附加屬性. 

方法

這些方法能夠改變數組自身:

pop 移除數組的最後一個元素，返回值是被刪除的元素。 push 在數組的末尾添加一個或者多個元素，返回值是新的數組的長度。 reverse 顛倒數組中元素的順序，原先第一個元素如今變成最後一個，一樣原先的最後一個元素變成了如今的第一個，也就是數組的索引起生了變化。 shift 刪除數組的第一個元素，返回值是刪除的元素。 sort 對數組中的元素進行排序。 splice 添加或刪除數組中的一個或多個元素。 unshift 添加一個或者多個元素在數組的開頭，返回值是新的數組的長度。 

Accessor 方法

這些過程不改變數組自身

concat
    返回一個包含此數組和其餘數組和/或值的結合的新數組
indexOf
    返回第一個與給定參數相等的數組元素的索引，沒有找到則返回-1。
join
    將全部的數組元素鏈接成一個字符串。

lastIndexOf
    返回在數組中搜索到的與給定參數相等的元素的最後（最大）索引。

slice
    返回數組中的一段。

toSource
    Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the Object.toSource method. toString 返回表明該數組及其元素的字符,重寫Object.toString 過程. valueOf Returns the primitive value of the array. Overrides the Object.valueOf method. 

循環（迭代）過程

filter
    對數組中的每個元素調用參數中指定的過濾函數，並將對於過濾函數返回值爲true的那些數組元素集合爲新的數組返回。 forEach 對數組的每個元素依次調用參數中指定的函數。 every 若是數組中每個元素都知足參數中提供的測試函數，則返回真。 map Creates a new array with the results of calling a provided function on every element in this array. some 若是數組中至少有一個元素知足參數函數的測試，則返回true。 

總結：

改變原數組的方法：pop()、push()、reverse()、shift()、sort()、splice()、unshift() 不改變原數組的方法：concat()、join()、slice()、toString() 

Boolean

屬性

Boolean.length 長度屬性,值爲1. Boolean.prototype 表明Boolean構造器的原型. 

方法

Boolean.prototype.toSource() Boolean.prototype.toString() Boolean.prototype.valueOf() 

String 對象

屬性

String.length String.prototype 

方法：

charAt() 方法可返回指定位置的字符。stringObject.charAt(index)

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

concat() 方法用於鏈接兩個或多個字符串。
stringObject.concat(stringX, stringX, …, stringX)

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
stringObject.indexOf(searchvalue, fromindex)

lastIndexOf() 方法可返回一個指定的字符串值最後出現的位置，在一個字符串中的指定位置從後向前搜索。

localeCompare()：用本地特定的順序來比較兩個字符串stringObject.localeCompare(target)

match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。
該方法相似 indexOf() 和 lastIndexOf()，可是它返回指定的值，而不是字符串的位置。
stringObject.match(regexp)


replace() 方法用於在字符串中用一些字符替換另外一些字符，或替換一個與正則表達式匹配的子串。stringObject.replace(regexp/substr, replacement) search() 方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。 stringObject.search(regexp) slice() 方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。 stringObject.slice(start, end) substring()不推薦使用，建議使用slice()替代。 substr()不推薦使用，建議使用slice()替代。 toLocaleLowerCase()不推薦使用，只在土耳其語等少數語種中有用，建議使用toLowerCase()替代。 toLocaleUpperCase()不推薦使用，只在土耳其語等少數語種中有用，建議使用toUpperCase()替代。 toLowerCase() 方法用於把字符串轉換爲小寫。 toUpperCase() 方法用於把字符串轉換爲大寫。 

注意：String 對象的方法 slice()、substring() 和 substr() 均可返回字符串的指定部分。強烈建議在全部場合都使用 slice() 方法。

RegExp對象

屬性

RegExp.prototype.constructor 建立該正則對象的構造函數。 RegExp.prototype.global 是否開啓全局匹配，也就是匹配目標字符串中全部可能的匹配項，而不是隻進行第一次匹配。 RegExp.prototype.ignoreCase 在匹配字符串時是否要忽略字符的大小寫。 RegExp.prototype.lastIndex 下次匹配開始的字符串索引位置。 RegExp.prototype.multiline 是否開啓多行模式匹配（影響 ^ 和 $ 的行爲） RegExp.prototype.source 正則對象的源模式文本。 

方法

RegExp.prototype.exec() 在目標字符串中執行一次正則匹配操做。 RegExp.prototype.test() 測試當前正則是否能匹配目標字符串。 RegExp.prototype.toString() 返回一個字符串，其值爲該正則對象的字面量形式。覆蓋了Object.prototype.toString() 方法。 

Object對象

當以非構造函數形式被調用時，Object 等同於 new Object()。

屬性或方法

Object的每一個實例都具備共同的基本屬性和方法

屬性或者方法	說明
constructor	指向建立當前對象的構造函數
hasOwnProperty(name)	檢測給定屬性name在實例對象（不是原型對象）中是否存在。name以字符串形式指定
isPropertyOf(object)	檢測傳入的對象object是否該方法調用者的原型對象。通常格式：Class.prototype.isPropertyOf(object)
propertyIsEnumerable(pr)	檢測屬性pr可否用for-in循環枚舉。屬性pro用字符串形式指定
toLocaleString()	返回對象的字符串表示。與地區和環境對應
toString()	返回對象的字符串表示
valueOf()	返回對象的字符串、數值或布爾值表示

靜態方法

Object.create(prototype, descriptors) 以指定的原型建立對象，而且能夠（可選）的設置對象的屬性 Object.defineProperty(object, propertyname, descriptor) 對指定的對象的一個屬性設置豐富的值控制 Object.defineProperties(object, descriptors) 對指定的對象的一組屬性提供豐富的值控制 Object.getOwnPropertyDescriptor(object, propertyname) 返回屬性的定義 Object.getOwnPropertyNames(object) 返回全部屬性的名稱，哪怕說是不能枚舉的屬性 Object.preventExtensions(object) 防止新的屬性添加到對象 Object.isExtensible(object) 是否可添加屬性到對象 Object.seal(object) 阻止向指定對象添加新屬性或刪除現有屬性 Object.freeze(object) 防止現有屬性和屬性值的修改，並防止新特性的添加。 Object.isFrozen(object) 檢查當前對象是否已凍結 Object.getPrototypeOf(object) 返回指定對象的原型 

全局屬性和方法

全局方法

全局屬性