"] //["匹配正則表達(dá)式的字符串", "捕獲組"+, index: number, input:str]
console.log(all); // ["
", "", "div", " class="test"", index: 0, input: "
hello world!
"]
捕獲組的引用，利用replace()替換
"fontFamily".replace(/([A-Z])/g, -$1).toLowerCase() // font-family
非捕獲性捕獲組
replace利用函數(shù)進(jìn)行替換
當(dāng)替換值是一個(gè)函數(shù)的時(shí)候。每個(gè)匹配都會(huì)調(diào)用該函數(shù)并帶有一串參數(shù)列表
匹配的完整文本
匹配的捕獲，一個(gè)捕獲對(duì)應(yīng)一個(gè)參數(shù)
匹配索引
源字符串
function upper(all, letter) {
return letter.toUpperCase();
}
var elem = "border-bottom-width".replace(/-(w)/g, upper);
console.log(elem); // borderBottomWidth
// foo=1&foo=2&blah=a&blah=b&foo=3轉(zhuǎn)換成foo=1,2,3&blah=a,b
function compress(source) {
var keys = {};
source.replace(/([^=&]+)=([^=&]*)/g, function (full, match1, match2) {
keys[match1] = (keys[match1] ? keys[match1] + "," : "") + match2;
return "";
});
var result = [];
for (var key in keys) {
result.push(key + "=" + keys[key]);
}
return result.join("&");
}
compress("foo=1&foo=2&blah=a&blah=bc&foo=3"); // foo=1,2,3&blah=a,bc
// 利用正則表達(dá)式修剪字符串---為了兼容低版本瀏覽器如IE8不支持.trim()
// 方案1，適用短字符串
function trim(str) {
return (str || "").replace(/^s+|s+$)/g, "");
}
// 方案2， 適用長(zhǎng)字符串
function trim(str) {
var str = str.replace(/^ss*/, ""),
ws = /s/,
i = str.length;
while (ws.test(str.charAt(--i)));
return str.slice(0, i+1);
}
8.Function類型
函數(shù)本質(zhì)上是對(duì)象，所以函數(shù)名實(shí)際上也是一個(gè)指向函數(shù)對(duì)象的指針，不會(huì)與某個(gè)函數(shù)綁定，因此，一個(gè)函數(shù)可以有多個(gè)名字（指針）。
1.聲明方式：
function fn(arg1, arg2) {
// TODO 字面量聲明方式會(huì)使函數(shù)聲明提升，即即使聲明在后面，也可以在前面訪問到該函數(shù)。
}
var fn = function (arg1, arg2) {
// TODO 函數(shù)表達(dá)式聲明，必須聲明后才可以訪問
}
what(); // 函數(shù)聲明
var what = function () {
console.log("函數(shù)表達(dá)式");
}
what(); // 函數(shù)表達(dá)式
function what() {
console.log("函數(shù)聲明");
}
console.log("3")
what(); // 函數(shù)表達(dá)式
2.內(nèi)部屬性
function factorial(num) {
if (num<=1) {
return 1;
} else {
return num * arguments.callee(num - 1)
}
}
(2)this // 引用函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象嚴(yán)格模式不支持
function outer () {
inner();
}
function inner () {
alert(arguments.callee.caller);
}
outer(); // 顯示outer函數(shù)的源代碼
3.prototype屬性 保存引用類型的實(shí)例方法。不可枚舉。call(),apply() 第一個(gè)參數(shù)為函數(shù)將要運(yùn)行的作用域，函數(shù)將在這個(gè)參數(shù)代表的作用域下運(yùn)行 ，剩下的（apply只接受兩個(gè)參數(shù)，第二個(gè)參數(shù)為參數(shù)數(shù)組或者arguments對(duì)象）參數(shù)為函數(shù)的參數(shù)。
window.color = "red";
var o = {color: "blue"};
function sayColor () {
alert(this.color);
}
sayColor(); // red
sayColor.call(this); // red
sayColor.call(window); // red
sayColor.call(o); // blue
5.bind()方法，會(huì)創(chuàng)建一個(gè)函數(shù)實(shí)例，this會(huì)被綁定到傳給bind()函數(shù)的值。即使在全局調(diào)用這個(gè)函數(shù)實(shí)例，this也會(huì)指向參數(shù)所給出的作用域。
toString(),toLocalString(), valueOf()均會(huì)返回函數(shù)的代碼。
9.基本包裝類型
Boolean,Number,String這三個(gè)基本類型都存在包裝類型，表現(xiàn)類似對(duì)象，在基本類型上調(diào)用方法時(shí)，會(huì)將基本類型轉(zhuǎn)換成基本包裝類型，執(zhí)行完又銷毀。
10.global對(duì)象
encodeURI() // 針對(duì)整個(gè)uri編碼
decodeURI() // 解碼encodeUEI
encodeURIComponent() // 替換所有非字母數(shù)字字符
decodeURIComponent() // 解碼encodeURIComponent
11.Math對(duì)象產(chǎn)生隨機(jī)數(shù)
var num = Math.floor(Math.random() * count + minNum) // 產(chǎn)生總數(shù)為count的范圍為minNum ~ minNum+count
12.理解對(duì)象
1.理解原型
function Person() {
this.name = "吳豆腐";
this.age = 23;
}
Person.prototype.job = "Web Developer";
Person.prototype.sayName = function () {
console.log(this.name);
}
console.log(Person); // function () {this.name = "吳豆腐"; this.age = 23}; 無法訪問到j(luò)ob屬性和sayName方法。類似直接訪問Object對(duì)象。
var person = new Person();
console.log(person); // {age: 23, name: "吳豆腐", __proto__: {constructor: Person(), job: "Web Developer", sayName: function () {console.log(this.name)}}} **chrome瀏覽器會(huì)將prototype里面的屬性展現(xiàn)在__proto__屬性下**。
var person1 = new Person();
person1.name = "LChing";
person1.job = "student";
console.log(person.sayName === person1.sayName); // true指向同一個(gè)函數(shù)對(duì)象。
var keys = Object.keys(person); // 返回一個(gè)包含所有可枚舉屬性的字符串?dāng)?shù)組。
console.log(keys); // ["name", "age"]
原型模式存在的問題：如果prototype中包含引用類型，那么實(shí)例中所做的修改將反映到其他實(shí)例上。故此，引用類型均使用構(gòu)造函數(shù)模式創(chuàng)建
2.理解繼承
function SuperType() {
this.color = ["red", "blue", "green"];
}
function SubType() {
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.color.push("yellow");
console.log(instance1.color); // ["red", "blue", "green", "yellow"]
var instance2 = new SubType();
console.log(instance2.color); // ["red", "blue", "green", "yellow"]
var instance3 = new SuperType();
instance3.color.push("black");
console.log(instance3.color); // ["red", "blue", "green", "black"]
var instance4 = new SuperType();
console.log(instance4.color); // ["red", "blue", "green"]
//借用構(gòu)造函數(shù)來解決原型中引用類型的問題
//通過apply()和call()方法可以在將來創(chuàng)建的對(duì)象上執(zhí)行構(gòu)造函數(shù)SuperType
function SubType1() {
SuperType.call(this);
}
var instance5 = new SubType1();
console.log(instance5); //SubType1({color: [...], __proto__: Object})
組合繼承，結(jié)合構(gòu)造函數(shù)和原型繼承的優(yōu)勢(shì)，避免引用類型污染，發(fā)揮函數(shù)復(fù)用優(yōu)勢(shì)。
function SuperType(name) {
this.name = name;
this.color = ["red", "blue", "yellow"];
}
SuperType.prototype.sayName = function () {
alert(this.name);
}
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
alert(this.age);
}
var instance1 = new SubType("吳豆腐", 23);
console.log(instance1);
// 創(chuàng)建函數(shù)構(gòu)造器
// 第一次讀這個(gè)的時(shí)候，是剛剛?cè)腴T的時(shí)候，當(dāng)時(shí)感覺玄而又玄，但是現(xiàn)在卻能有一個(gè)較深刻的體會(huì)
// 此方式不過是常見的優(yōu)化方式，創(chuàng)造者看到原型中存在一些不必要的屬性，就自己封裝一個(gè)函數(shù)去剔除這些屬性。
// 改寫subType的原型。
// 當(dāng)以非構(gòu)造函數(shù)形式被調(diào)用時(shí)，Object 等同于 new Object()。
function inHeritPrototype(subType, superType) {
var prototype = Object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
alert(this.name);
}
function SubType(name, age) {
// 在創(chuàng)建子類實(shí)例屬性的時(shí)候，調(diào)用超類型構(gòu)造函數(shù)。此時(shí)超類型的作用域指向新的實(shí)例屬性。而子類型的原型指針依然指向的是子類構(gòu)造器，不會(huì)繼承超類型的原型。
SuperType.call(this, name);
this.age = age;
}
// 下面這個(gè)函數(shù)的調(diào)用重寫了子類型的原型，使其繼承了超類型的原型，創(chuàng)建子類型的實(shí)例時(shí)，實(shí)例的原型指針指向這里。
inHeritPrototype(SubType, SuperType);
var instance = new SubType("LChing", 23);
console.log(instance);
13.函數(shù)表達(dá)式
內(nèi)聯(lián)命名函數(shù) 閉包
function fn1() {
var result = new Array();
for (var i = 0; i < 10; i++) {
result[i] = function () {
return i ;
};
}
return result;
}
var arr = fn1();
console.log(arr[1]()); // 10
在匿名函數(shù)從fn1()中返回后，它的作用域鏈被初始化為包含fn1()函數(shù)的活動(dòng)對(duì)象和全局變量對(duì)象。這樣，匿名函數(shù)就可以訪問在fn1()中定義的所有變量。并且，函數(shù)fn1()執(zhí)行完畢后，其活動(dòng)對(duì)象不會(huì)被銷毀，因?yàn)槟涿瘮?shù)的作用域鏈仍然在引用這個(gè)活動(dòng)對(duì)象。換句話說，當(dāng)函數(shù)fn1()執(zhí)行完畢后，其執(zhí)行環(huán)境的作用域鏈會(huì)被銷毀，但它的活動(dòng)對(duì)象任然在內(nèi)存中，匿名函數(shù)在執(zhí)行時(shí)就會(huì)訪問這個(gè)活動(dòng)對(duì)象，故此此時(shí)訪問到的是一個(gè)靜態(tài)的活動(dòng)對(duì)象，所有變量值將是它最終存在在活動(dòng)對(duì)象中的值。 知道閉包被銷毀，創(chuàng)建函數(shù)的活動(dòng)對(duì)象才會(huì)被回收。 this
function f2(){
"use strict"; // 這里是嚴(yán)格模式
return this;
}
f2() === undefined; // true
對(duì)象方法中的this：
var o = {
prop: 37,
f: function() {
return this.prop;
}
};
當(dāng) o.f() 被調(diào)用時(shí)，函數(shù)內(nèi)的this將綁定到o對(duì)象。this的指向取決于函數(shù)被調(diào)用的方式和調(diào)用者。原型鏈中的this
var o = {
f : function(){
return this.a + this.b;
}
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5
在這個(gè)例子中，對(duì)象p沒有屬于它自己的f屬性，它的f屬性繼承自它的原型。但是這對(duì)于最終在o中找到f屬性的查找過程來說沒有關(guān)系；查找過程首先從p.f的引用開始，所以函數(shù)中的this指向p。也就是說，因?yàn)閒是作為p的方法調(diào)用的，所以它的this指向了p。這是JavaScript的原型繼承中的一個(gè)有趣的特性。構(gòu)造函數(shù)中的 this call 和 apply
function bar() {
console.log(Object.prototype.toString.call(this));
}
bar.call(7); // [object Number]
bind 方法
function f(){
return this.a;
}
var g = f.bind({a:"azerty"});
console.log(g()); // azerty
var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty
DOM事件處理函數(shù)中的 this
// 被調(diào)用時(shí)，將關(guān)聯(lián)的元素變成藍(lán)色
function bluify(e){
console.log(this === e.currentTarget); // 總是 true
// 當(dāng) currentTarget 和 target 是同一個(gè)對(duì)象是為 true
console.log(this === e.target);
this.style.backgroundColor = "#A5D9F3";
}
// 獲取文檔中的所有元素的列表
var elements = document.getElementsByTagName("*");
// 將bluify作為元素的點(diǎn)擊監(jiān)聽函數(shù)，當(dāng)元素被點(diǎn)擊時(shí)，就會(huì)變成藍(lán)色
for(var i=0 ; i
內(nèi)聯(lián)事件處理函數(shù)中的 this
Show this
模仿塊級(jí)作用域
function outputNumbers(count) {
for (var i=0; i < count; i++) {
console.log(i);
}
var i;
console.log(i);
}
outputNumbers(5); // 0,1,2,3,4,5
14.BOM
窗口位置
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : screenY;
但是各個(gè)瀏覽器對(duì)窗口位置的表現(xiàn)不一致。移動(dòng)窗口 窗口位置
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
}
移動(dòng)設(shè)備有差別location對(duì)象
function getQueryStringArgs() {
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
args = {},
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
i = 0,
len = items.length;
for (i=0; i
history對(duì)象 檢測(cè)當(dāng)前頁(yè)是否為第一個(gè)頁(yè)面
if(history.length == 0) {
//這應(yīng)該是用戶打開窗口的第一個(gè)頁(yè)面
}
15.DOM
文檔的子節(jié)點(diǎn)
元素。文檔信息 查找元素 element類型 for (var i=0, len=elem.childNodes.length; i < len; i++) {
if (elem.childNodes[i].nodeType === 1) {
// 是元素節(jié)點(diǎn)則執(zhí)行某些操作
}
}
4.DocumentFragment類型，可以包含和控制節(jié)點(diǎn)，但不會(huì)像完整的文檔那樣占用額外的資源。可以作為倉(cāng)庫(kù)使用，給文檔一次添加多個(gè)子元素
var fragment = document.createDocumentFragment(),
ul = document.getElementById("my-lists"),
li = null,
i;
for (i=0; i < 10; i++) {
li = document.createElement("li");
li.appendChild(document.createTextNode("Item " + (i + 1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);
console.log(fragment.childNodes); // []
文檔片段繼承了Node的所有方法，如果將文檔中的節(jié)點(diǎn)添加到文檔片段中，就會(huì)從文檔樹中移除該節(jié)點(diǎn)，如果將文片段中的子節(jié)點(diǎn)添加到文檔樹中，文檔片段中也不會(huì)再存在相應(yīng)的子節(jié)點(diǎn)。
選擇符API
var body = document.querySelector("body"), // 取得body元素
myDiv = document.querySelector("#my-div"), // 取得id為my-div的元素
selected = document.querySelector(".selected"), // 取得類為.selected的第一個(gè)元素
img = document.querySelector("img.button"); // 取得類為"button"的第一個(gè)圖像元素
通過Document類型調(diào)用querySelector()方法時(shí)，會(huì)在文檔元素的范圍內(nèi)查找匹配的元素；通過Element類型調(diào)用querySelector()方法時(shí)，只會(huì)在該元素后代元素范圍內(nèi)查找匹配的元素。
HTML5(DOM)
焦點(diǎn)管理
字符集屬性
自定義數(shù)據(jù)屬性
插入標(biāo)記
scrollIntoView()
IE文檔模式
// 決定ie瀏覽器可以使用哪個(gè)版本所支持的功能Edge：始終以最新的文檔模式來渲染頁(yè)面
children屬性
DOM2 和 DOM3
訪問元素樣式
元素大小
