"] //["匹配正則表達式的字符串", "捕獲組"+, 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利用函數進行替換
當替換值是一個函數的時候。每個匹配都會調用該函數并帶有一串參數列表
匹配的完整文本
匹配的捕獲，一個捕獲對應一個參數
匹配索引
源字符串
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轉換成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
// 利用正則表達式修剪字符串---為了兼容低版本瀏覽器如IE8不支持.trim()
// 方案1，適用短字符串
function trim(str) {
return (str || "").replace(/^s+|s+$)/g, "");
}
// 方案2， 適用長字符串
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類型
函數本質上是對象，所以函數名實際上也是一個指向函數對象的指針，不會與某個函數綁定，因此，一個函數可以有多個名字（指針）。
1.聲明方式：
function fn(arg1, arg2) {
// TODO 字面量聲明方式會使函數聲明提升，即即使聲明在后面，也可以在前面訪問到該函數。
}
var fn = function (arg1, arg2) {
// TODO 函數表達式聲明，必須聲明后才可以訪問
}
what(); // 函數聲明
var what = function () {
console.log("函數表達式");
}
what(); // 函數表達式
function what() {
console.log("函數聲明");
}
console.log("3")
what(); // 函數表達式
2.內部屬性
function factorial(num) {
if (num<=1) {
return 1;
} else {
return num * arguments.callee(num - 1)
}
}
(2)this // 引用函數據以執行的環境對象嚴格模式不支持
function outer () {
inner();
}
function inner () {
alert(arguments.callee.caller);
}
outer(); // 顯示outer函數的源代碼
3.prototype屬性 保存引用類型的實例方法。不可枚舉。call(),apply() 第一個參數為函數將要運行的作用域，函數將在這個參數代表的作用域下運行 ，剩下的（apply只接受兩個參數，第二個參數為參數數組或者arguments對象）參數為函數的參數。
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()方法，會創建一個函數實例，this會被綁定到傳給bind()函數的值。即使在全局調用這個函數實例，this也會指向參數所給出的作用域。
toString(),toLocalString(), valueOf()均會返回函數的代碼。
9.基本包裝類型
Boolean,Number,String這三個基本類型都存在包裝類型，表現類似對象，在基本類型上調用方法時，會將基本類型轉換成基本包裝類型，執行完又銷毀。
10.global對象
encodeURI() // 針對整個uri編碼
decodeURI() // 解碼encodeUEI
encodeURIComponent() // 替換所有非字母數字字符
decodeURIComponent() // 解碼encodeURIComponent
11.Math對象產生隨機數
var num = Math.floor(Math.random() * count + minNum) // 產生總數為count的范圍為minNum ~ minNum+count
12.理解對象
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}; 無法訪問到job屬性和sayName方法。類似直接訪問Object對象。
var person = new Person();
console.log(person); // {age: 23, name: "吳豆腐", __proto__: {constructor: Person(), job: "Web Developer", sayName: function () {console.log(this.name)}}} **chrome瀏覽器會將prototype里面的屬性展現在__proto__屬性下**。
var person1 = new Person();
person1.name = "LChing";
person1.job = "student";
console.log(person.sayName === person1.sayName); // true指向同一個函數對象。
var keys = Object.keys(person); // 返回一個包含所有可枚舉屬性的字符串數組。
console.log(keys); // ["name", "age"]
原型模式存在的問題：如果prototype中包含引用類型，那么實例中所做的修改將反映到其他實例上。故此，引用類型均使用構造函數模式創建
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"]
//借用構造函數來解決原型中引用類型的問題
//通過apply()和call()方法可以在將來創建的對象上執行構造函數SuperType
function SubType1() {
SuperType.call(this);
}
var instance5 = new SubType1();
console.log(instance5); //SubType1({color: [...], __proto__: Object})
組合繼承，結合構造函數和原型繼承的優勢，避免引用類型污染，發揮函數復用優勢。
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);
// 創建函數構造器
// 第一次讀這個的時候，是剛剛入門的時候，當時感覺玄而又玄，但是現在卻能有一個較深刻的體會
// 此方式不過是常見的優化方式，創造者看到原型中存在一些不必要的屬性，就自己封裝一個函數去剔除這些屬性。
// 改寫subType的原型。
// 當以非構造函數形式被調用時，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) {
// 在創建子類實例屬性的時候，調用超類型構造函數。此時超類型的作用域指向新的實例屬性。而子類型的原型指針依然指向的是子類構造器，不會繼承超類型的原型。
SuperType.call(this, name);
this.age = age;
}
// 下面這個函數的調用重寫了子類型的原型，使其繼承了超類型的原型，創建子類型的實例時，實例的原型指針指向這里。
inHeritPrototype(SubType, SuperType);
var instance = new SubType("LChing", 23);
console.log(instance);
13.函數表達式
內聯命名函數 閉包
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
在匿名函數從fn1()中返回后，它的作用域鏈被初始化為包含fn1()函數的活動對象和全局變量對象。這樣，匿名函數就可以訪問在fn1()中定義的所有變量。并且，函數fn1()執行完畢后，其活動對象不會被銷毀，因為匿名函數的作用域鏈仍然在引用這個活動對象。換句話說，當函數fn1()執行完畢后，其執行環境的作用域鏈會被銷毀，但它的活動對象任然在內存中，匿名函數在執行時就會訪問這個活動對象，故此此時訪問到的是一個靜態的活動對象，所有變量值將是它最終存在在活動對象中的值。 知道閉包被銷毀，創建函數的活動對象才會被回收。 this
function f2(){
"use strict"; // 這里是嚴格模式
return this;
}
f2() === undefined; // true
對象方法中的this：
var o = {
prop: 37,
f: function() {
return this.prop;
}
};
當 o.f() 被調用時，函數內的this將綁定到o對象。this的指向取決于函數被調用的方式和調用者。原型鏈中的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
在這個例子中，對象p沒有屬于它自己的f屬性，它的f屬性繼承自它的原型。但是這對于最終在o中找到f屬性的查找過程來說沒有關系；查找過程首先從p.f的引用開始，所以函數中的this指向p。也就是說，因為f是作為p的方法調用的，所以它的this指向了p。這是JavaScript的原型繼承中的一個有趣的特性。構造函數中的 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事件處理函數中的 this
// 被調用時，將關聯的元素變成藍色
function bluify(e){
console.log(this === e.currentTarget); // 總是 true
// 當 currentTarget 和 target 是同一個對象是為 true
console.log(this === e.target);
this.style.backgroundColor = "#A5D9F3";
}
// 獲取文檔中的所有元素的列表
var elements = document.getElementsByTagName("*");
// 將bluify作為元素的點擊監聽函數，當元素被點擊時，就會變成藍色
for(var i=0 ; i
內聯事件處理函數中的 this
Show this
模仿塊級作用域
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;
但是各個瀏覽器對窗口位置的表現不一致。移動窗口 窗口位置
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;
}
}
}
移動設備有差別location對象
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對象 檢測當前頁是否為第一個頁面
if(history.length == 0) {
//這應該是用戶打開窗口的第一個頁面
}
15.DOM
文檔的子節點
元素。文檔信息 查找元素 element類型 for (var i=0, len=elem.childNodes.length; i < len; i++) {
if (elem.childNodes[i].nodeType === 1) {
// 是元素節點則執行某些操作
}
}
4.DocumentFragment類型，可以包含和控制節點，但不會像完整的文檔那樣占用額外的資源。可以作為倉庫使用，給文檔一次添加多個子元素
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的所有方法，如果將文檔中的節點添加到文檔片段中，就會從文檔樹中移除該節點，如果將文片段中的子節點添加到文檔樹中，文檔片段中也不會再存在相應的子節點。
選擇符API
var body = document.querySelector("body"), // 取得body元素
myDiv = document.querySelector("#my-div"), // 取得id為my-div的元素
selected = document.querySelector(".selected"), // 取得類為.selected的第一個元素
img = document.querySelector("img.button"); // 取得類為"button"的第一個圖像元素
通過Document類型調用querySelector()方法時，會在文檔元素的范圍內查找匹配的元素；通過Element類型調用querySelector()方法時，只會在該元素后代元素范圍內查找匹配的元素。
HTML5(DOM)
焦點管理
字符集屬性
自定義數據屬性
插入標記
scrollIntoView()
IE文檔模式
// 決定ie瀏覽器可以使用哪個版本所支持的功能Edge：始終以最新的文檔模式來渲染頁面
children屬性
DOM2 和 DOM3
訪問元素樣式
元素大小
