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對象,我們可以擴展任何對象,包括內建的對象,如StringDate

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實現復制對象及擴展

jQueryextend()方法能很方便的實現擴展對象方法,這里要實現的是:使用原生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)自定義對象構造 

一、使用內置對象

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) 返回指定對象的原型 

全局屬性和方法

全局方法

圖片描述

全局屬性

圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM