Table of Contents generated with DocToc
通常情況下只有對(duì)象才存在方法,但 JavaScript 不同它具有12種內(nèi)置對(duì)象。內(nèi)置對(duì)象又分為兩類(lèi),普通對(duì)象(屬性和方法)與構(gòu)造器對(duì)象(可用于實(shí)例化普通對(duì)象,它還包含原型對(duì)象屬性和方法,及實(shí)例對(duì)象屬性和方法)。
JavaScript 對(duì)象原型鏈的簡(jiǎn)要說(shuō)明
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.move = function(x, y) {
this.x += x;
this.y += y;
}
var p = new Point(1, 1);
p.move(2,2);
__proto__
稱(chēng)之為原型鏈,有如下特點(diǎn):
__proto__
為對(duì)象內(nèi)部的隱藏屬性__proto__
為實(shí)例化該對(duì)象的構(gòu)造器的 prototype
對(duì)象的引用,因此可以直接方法 prototype
的所有屬性和方法Object
每個(gè)對(duì)象都有一個(gè) __proto__
屬性且逐級(jí)增長(zhǎng)形成一個(gè)鏈,原型鏈頂端是一個(gè) Object
對(duì)象。__proto__
跟瀏覽器引擎實(shí)現(xiàn)相關(guān),不同的引擎中名字和實(shí)現(xiàn)不盡相同(chrome、firefox中名稱(chēng)是 __proto__
,并且可以被訪問(wèn)到,IE中無(wú)法訪問(wèn))?;诖a兼容性、可讀性等方面的考慮,不建議開(kāi)發(fā)者顯式訪問(wèn) __proto__
屬性或通過(guò) __proto__
更改原型鏈上的屬性和方法,可以通過(guò)更改構(gòu)造器prototype
對(duì)象來(lái)更改對(duì)象的 __proto__
屬性。構(gòu)造器對(duì)象與普通對(duì)象的區(qū)別
__proto__
是一個(gè) Function.prototype
對(duì)象的引用,因此可以調(diào)用 Function.prototype
的屬性及方法prototype
屬性,用該構(gòu)造器實(shí)例化對(duì)象時(shí)該 prototype
會(huì)被實(shí)例對(duì)象的 __proto__
所引用function
對(duì)象,因此也會(huì)有自身屬性構(gòu)造器對(duì)象
其他對(duì)象
內(nèi)置對(duì)象,其實(shí)也叫內(nèi)置構(gòu)造器,它們可以通過(guò) new
的方式創(chuàng)建一個(gè)新的實(shí)例對(duì)象。內(nèi)置對(duì)象所屬的類(lèi)型就叫內(nèi)置對(duì)象類(lèi)型。其聲明方式如下:
var i = new String("str"); // String Object
var h = new Number(1); // Number Object
var g = new Boolean(true); // Boolean Object
var j = new Object({name : "Tom"}); // Object Object
var k = new Array([1, 2, 3, 4]); // Array Object
var l = new Date(); // Date Object
var m = new Error();
var n = new Function();
var o = new RegExp("\\d");
注意:雖然標(biāo)準(zhǔn)類(lèi)型中有Boolean
String
Number
Object
,內(nèi)置對(duì)象類(lèi)型中也有Boolean
String
Number
Object
,但它們其實(shí)是通過(guò)不同的聲明方式來(lái)進(jìn)行區(qū)別的。標(biāo)準(zhǔn)類(lèi)型通過(guò)直接賦值,而對(duì)象類(lèi)型則是通過(guò)構(gòu)造器實(shí)現(xiàn)初始化。
構(gòu)造器的原型對(duì)象在對(duì)象實(shí)例化時(shí)將會(huì)被添加到實(shí)例對(duì)象的原型鏈當(dāng)中。
__proto__
為原型鏈屬性,編碼時(shí)不可被顯像調(diào)用。但是實(shí)例化對(duì)象可以調(diào)用原型鏈上的方法。
用 String/Number 等構(gòu)造器創(chuàng)建的對(duì)象原型鏈頂端對(duì)象始終是一個(gè)Object對(duì)象,因此這些對(duì)象可以調(diào)用Object的原型對(duì)象屬性和方法。所以 String/Number 等構(gòu)造器是 Object 的子類(lèi)。
更多關(guān)于 Object 的內(nèi)容可以在這里找到。
構(gòu)造器說(shuō)明:
實(shí)例化方法
var obj0 = new Object({name: 'X', age: 13});
// 常用方法
var obj1 = {name: 'Q', age: 14};
屬性及方法
**原型對(duì)象屬性及其方法
實(shí)例對(duì)象屬性及方法
無(wú)
功能:基于原型對(duì)象創(chuàng)造新對(duì)象
// Object.create(prototype[, propertiesObject])
var prototype = {name: 'X', age: 13};
var obj = Object.create(proto);
功能:獲取方法調(diào)用者的標(biāo)準(zhǔn)類(lèi)型
// objectInstance.toString()
var obj = {};
obj.toString(); // Object
功能:判斷一個(gè)屬性是否是一個(gè)對(duì)象的自身屬性
// objectInstance.hasOwnProperty("propertyName")
var obj = Object.create({a: 1, b: 2});
obj.c = 3;
obj.hasOwnProperty('a'); // false
obj.hasOwnProperty('c'); // true
構(gòu)造器說(shuō)明:值為 true 與 false
屬性及方法
**原型對(duì)象屬性及其方法
構(gòu)造器說(shuō)明:?jiǎn)坞p引號(hào)內(nèi)的字符串
實(shí)例化方法
'Hello, world!'
var str0 = 'Xinyang';
var str1 = new String('Xinyang');
屬性及方法
原型對(duì)象屬性及其方法
功能:獲取子字符串在字符串中的索引
// stringObject.indexOf(searchValue, fromIndex)
var str = "I am X. From China!";
var index = str.indexOf('a'); // 2
str.indexOf('a', index + 1); // 16
str.indexOf('Stupid'); // -1 字符串不存在
功能:查找字符串替換成目標(biāo)文字
// stringObject.replace(regexp/substr, replacement)
var str = "apple is bad";
str = str.replace('bad', 'awesome');
功能:按分隔符將分隔符分成字符串?dāng)?shù)組
// stringObject.split(separator, arrayLength)
var str = '1 2 3 4';
str.split(' '); // ['1', '2', '3', '4'];
str.split(' ', 3); // ['1', '2', '3'];
str.split(/\d+/); // ["", " ", " ", " ", ""]
構(gòu)造器說(shuō)明:整型直接量,八進(jìn)制直接量(0-),十六進(jìn)制直接量(0x-),浮點(diǎn)型直接量
實(shí)例化方法
10
1.2e5
var count = 0x10;
var pi = new Number(3.1415);
屬性及方法
原型對(duì)象屬性及其方法
功能:四舍五入至指定小數(shù)位
// numberObject.toFixed(num)
var num0 = 3.14;
num0.toFixed(1); // 3.1
var num1 = 3.35;
num1.toFixed(1); // 3.4
構(gòu)造器說(shuō)明:定義數(shù)組對(duì)象
實(shí)例化方法
var a0 = [1, 'abc', true, function(){}];
var a1 = new Array();
var a2 = new Array(1, 'abc', true);
屬性及方法
原型對(duì)象屬性及其方法
功能:從數(shù)組中刪除或添加元素,返回被刪除的元素列表(作用域原有數(shù)組)
// arrayObject.splice(start, deleteCount[, item1[, item2[, ...]]])
var arr = ['1', '2', 'a', 'b', '6'];
var ret = arr.splice(2, 2, '3', '4', '5'); // ['a', 'b']
arr; // ['1', '2', '3', '4', 5', '6']
功能:遍歷元素組并調(diào)用回調(diào)函數(shù)
// arrayObject.forEach(callback[, thisArg])
// 回調(diào)函數(shù)
// function callback(value, index, arrayObject) {...}
// value - 當(dāng)前值 index - 當(dāng)前索引 arrayObject - 數(shù)組本身
function logArray(value, index, arrayObject) {
console.log(value);
console.log(value === array[index]);
}
[2, 5, 6, 9].forEach(logArray);
構(gòu)造器說(shuō)明:定義函數(shù)或新增對(duì)象構(gòu)造器
實(shí)例化方法
// 對(duì)象實(shí)例化
var f0 = new Function('i', 'j', 'return (i + j)');
// 函數(shù)關(guān)鍵字語(yǔ)句
function f1(i, j){return i + j;}
// 函數(shù)表達(dá)式
var f3 = function(i, j){return i + j;};
屬性及方法
原型對(duì)象屬性及其方法
實(shí)例對(duì)象屬性和方法
下面的代碼聲明一個(gè) Point 增加了一個(gè)move方法,最后創(chuàng)建了一個(gè) Point 的實(shí)例對(duì)象。
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.move = function(x, y) {
this.x += x;
this.y += y;
}
var p = new Point(1, 2);
功能:通過(guò)參數(shù)指定調(diào)用者和函數(shù)參數(shù)并執(zhí)行該函數(shù)
// functionObj.apply(thisArg[, argsArray])
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.move = function(x, y) {
this.x += x;
this.y += y;
}
var p = new Point(1, 1);
var circle = {x: 1, y: 1, r: 1};
p.move.apply(circle, [2, 1]); // {x: 3, y: 2, r: 1}
功能:通過(guò)參數(shù)指定函數(shù)調(diào)用者和函數(shù)參數(shù)并返回該函數(shù)的引用
// functionObj.bind(thisArg[, arg1[, arg2[, ...]]])
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.move = function(x, y) {
this.x += x;
this.y += y;
}
var p = new Point(1, 1);
var circle = {x: 1, y: 1, r: 1};
var circleMoveRef = p.move.bind(circle, 2, 1);
setTimeout(circleMoveRef, 1000); // {x: 3, y: 2, r: 1}
// 之間使用 circleMoveRef() 效果等同于 apply()
circleMoveRef();
function Circle(x, y, r) {
Point.apply(this, [x, y]);
this.radius = r;
}
Circle.prototype = Object.create(Point.prototype);
Circle.prototype.constructor = Circle;
Circle.prototype.area = function(){
return Math.PI * this.radius * this.radius;
}
var c = new Circle(1, 2, 3);
c.move(2, 2);
c.area();
()
apply
call
arguments 的常用屬性
function max(a, b) {
if (max.length === arguments.length) {
return a>b?a:b;
} else {
var _max = arguments[0];
for(var i = 0; i < arguments.length; i++) {
if (_max < arguments[i]) {
_max = arguments[i];
}
}
return _max;
}
}
函數(shù)參數(shù)的值專(zhuān)遞是參數(shù)復(fù)制都是棧內(nèi)存中的復(fù)制。
// 原始類(lèi)型
function plusplus(num) {
return num++;
}
var count = 0;
var result = plusplus(count); // result = 1; count = 0;
// 引用類(lèi)型
function setName(obj) {
obj.name = 'obama';
}
var president = {name: 'bush'};
setName(president); // {name: 'obama'};
以 Require.JS
中的 define()
為例:
define(function(){
var add = function(x, y) {
return x + y;
};
return {
add: add
};
})
define(['lib'], function(){
var add = function(x, y) {
return x + y;
};
return {
add: add
};
})
define('math', ['lib'], function(){
var add = function(x, y) {
return x + y;
};
return {
add: add
};
})
// define 的實(shí)現(xiàn)代碼
/**
* The function that handles definitions of modules. Differs from
* require() in that a string for the module should be the first argument,
* and the function to execute after dependencies are loaded should
* return a value to define the module corresponding to the first argument's
* name.
*/
define = function (name, deps, callback) {
var node, context;
//Allow for anonymous modules
if (typeof name !== 'string') {
//Adjust args appropriately
callback = deps;
deps = name;
name = null;
}
//This module may not have dependencies
if (!isArray(deps)) {
callback = deps;
deps = null;
}
// 省略以下代碼
// ...
};
構(gòu)造器說(shuō)明:用于定義正則表達(dá)式,一個(gè) RegExp 對(duì)象包含一個(gè)正則表達(dá)式和關(guān)聯(lián)的標(biāo)志
定義方法
/pattern/flags
new RegExp(pattern[, flags]);
屬性及方法
原型對(duì)象屬性及其方法
功能:使用正則表達(dá)式對(duì)字符串進(jìn)行測(cè)試,并返回測(cè)試結(jié)果
// regexObj.text(str)
var reg = /^abc/i;
reg.test('Abc123'); // true
reg.test('1Abc1234'); // false
構(gòu)造器說(shuō)明:用于定義日期對(duì)象
定義方法
var date0 = new Date();
var date1 = new Date(2014, 3, 1, 7, 1, 1, 100);
屬性及方法
原型對(duì)象屬性及其方法
對(duì)象說(shuō)明:擁有屬性和方法的單一對(duì)象主要用于數(shù)字計(jì)算
對(duì)象屬性:
對(duì)象方法:
功能:向下取整
// Math.floor(num)
Math.floor(0.97); // 0
Math.floor(5.1); // 5
Math.floor(-5.1); //6
相似方法:ceil
,round
功能:返回 0~1 之間的浮點(diǎn)數(shù)
// Math.random()
Math.random(); // 0.14523562323461
對(duì)象說(shuō)明:用于存儲(chǔ)和交換文本信息
對(duì)象方法:
功能:將 JSON 對(duì)象轉(zhuǎn)換為字符轉(zhuǎn)
// JSON.stringify(value[, replacer[, space]])
var json = {'name': 'X'};
JSON.stringify(json); // "{"name":"X"}"
功能:將 JSON 字符轉(zhuǎn)轉(zhuǎn)換為對(duì)象
// JSON.parse(text[, reviver])
var jsonStr = '{"name":"X"}';
JSON.parse(jsonStr); // {name: 'X'}
全局對(duì)象定義了一系列的屬性和方法在編程過(guò)程中可以被之間調(diào)用。
屬性:NaN,Infinity,undefined
方法:
處理 URI 方法:
構(gòu)造器屬性:
對(duì)象屬性:
非數(shù)字值:表示錯(cuò)誤或無(wú)意義的運(yùn)算結(jié)果,NaN 參與運(yùn)算仍會(huì)返回 NaA,且 NaN 不等于任何值,包括它本身??梢允褂?nbsp;isNaN()
判斷運(yùn)算結(jié)果的類(lèi)型是否為 NaN。
isNaN(NaN); // true
isNaN(4 - '2a'); // true;
功能:轉(zhuǎn)換字符串成數(shù)字
// parseInt(string[, radix])
// radix - 為進(jìn)制數(shù)
parseInt('010'); // 10
parseInt('010', 8) // 8
parseInt('010', 16) // 16
parseInt('0x1f'); // 31
parseInt('0x1f', 16); // 31
parseInt('1f'); // 1
parseInt('1f', 16); // 31
功能:計(jì)算字符串并執(zhí)行其中的 JavaScript 代碼(會(huì)帶來(lái)安全性和代碼邏輯問(wèn)題,通常不建議使用)
// eval(string)
var res = '{"error": "0", "msg": "OK"};
var obj;
if (!JSON) {
obj = eval('(' + res + ')');
} else {
obj = JSON.parse(res);
}
功能:將 URI 參數(shù)中的特殊字符,中文等作為 URI 的一部分進(jìn)行編碼
var uri = "http://w3schools.com/my test.asp?name=st?le&car=saab";
var res = encodeURIComponent(uri);
// 結(jié)果
// http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab
更多建議: