JS

3.js是一門指令碼語言、解釋性語言，基於物件、是一門弱性語言。

4.js的組成：ECMAScript 、DOM文件物件模型（Document object model）、BOM瀏覽器物件模型（Browser object model）。
5.js引入方式 ：內嵌式、行內式、外聯式。
外聯式：用script標籤src 引入。
6.1. 如果script標籤是引入外部js檔案的作用，那麼這對標籤中不要寫任何的js程式碼，如果要寫，重新寫一對script標籤，裡面寫程式碼。
2. 在一對script的標籤中有錯誤的js程式碼,那麼該錯誤的程式碼後面的js程式碼不會執行
3. 如果第一對的script標籤中有錯誤,不會影響後面的script標籤中的js程式碼執行

38.在事件函式中，this指向的是事件源。
在建構函式中，this指向的是建構函式的例項化物件。
在普通函式中，this指向的是window物件。
在物件函式中，this指向的是當前的物件。
定時器函式指向window
陣列的元素是函式指向該陣列
原型中this 指向例項化物件
自執行函式中this指向window
39.for ...in可以遍歷一個物件
for (var key in obj) {
console.log(obj[key])
}
40.key:value 鍵值對。
41.刪除物件的屬性：delete obj.name;
42.前置++，先將自身的值自增1，再將自增後的值賦值給變數。
後置++，先將自身的值賦值給變數，然後再自增1。
43.JavaScript中的物件分為4種：內建物件、瀏覽器物件、自定義物件、DOM物件。
44.Math.PI 圓周率
生成隨機數 Math.random()
向下取整/向上取整Math.floor()Math.ceil()
取整，四捨五入Math.round()
絕對值Math.abs()
最大值Math.max()
最小值 Math.min()
正弦Math.sin()
餘弦Math.cos()
求指數次冪Math.pow()
求平方根Math.sqrt()
45.instanceof 檢測引用資料型別。（陣列、物件、正則，函式）。
46. // push() 往陣列的末尾增加元素 返回值 是新增元素後陣列的個數
// unshift() 往陣列的開頭增加元素 返回值 是新增元素後陣列的個數
// pop() 刪除末尾元素 返回值是刪除的元素
// shift() 刪除開始元素 返回值是刪除的元素
// concat() 陣列的拼接
reverse() //翻轉陣列
// join() 分割陣列 轉換為字串
// slice(1,3) 擷取陣列的某幾項 引數含義 1代表索引值 代表起始位置
3代表索引值 代表終止位置， 擷取內容不包含終止位置
// 返回值：擷取後的內容 原陣列不變
// splice() 刪除/增加/修改陣列 引數，如果只有2個引數，第一個是起始位置，
第二個引數是擷取的個數，返回值是擷取內容 原陣列會改變
//第一個值：起始位置 第二個值 刪除的個數 第三個值，替換刪除的元素 返回結果：刪除元素
// sort() 排序 只能排序10以內的數
// indexOf() 檢索陣列中是否含有某一項 如果有返回索引位置 沒有返回-1
// forEach() 迴圈遍歷陣列
// instanceof 檢測引用資料型別
// isArray() 檢測是否是陣列
47.str.length字串長度
// chartAt() 返回指定索引的字串
// chartCodeAt()返 回ASCII碼錶
// chartCodeAt()返回ASCII碼錶 括號內為索引值
// index0f() 檢索 是否包含此元素 從前往後。
// lastIndexOf() 從後往前。
//replace(old,new) //替換字串替換字串 new替換old
// split 分割字串必須以str中的內容來進行分割，
同時以傳入的引數為分隔符如果str中沒有此分隔符則以整個str變為陣列輸出
// substr()第一個引數是開始索引值第二 個引數是擷取個數
// substring() 第一個引數是開始索引值 第二個是結束索引值，但是不包含結束索引元素 返回值是擷取的內容
//toUpperCase() //轉換大寫
//toLowerCase() //轉換小寫
// trim() 去除首尾空格

 1 48.建立時間物件
 2 var now = new Date();
 3 49.
 4 var data = new Date();
 5 console.log(data);
 6 console.log(data.value0f()); // 1590595200000 1000亳秒=1s
 7 console.log(data.getTime());//1590595200000距 離1970年1月1日的亳秒值
 8 console.log(data.getFullYear()) //2020 年
 9 console.log(data.getMonth() + 1) //5月
10 console.log(data.getDate()) //29 日
11 console.log(data.getHours()) //14 時
12 console.log(data.getMinutes()) //40分
13 console.log(data.getSeconds()) //32 秒
14 console.log(data.getDay()) // 星期

50.NaN屬性代表數字值的特殊值，該屬性用於指示某個值不是數字。
51.typeof（NaN）===number 成立
null==undefined 成立
NaN不等於NaN
52.l 文件：一個網頁可以稱為文件
l 節點（node）：網頁中的所有內容都是節點（標籤、屬性、文字、註釋等）
l 元素：網頁中的標籤
l 屬性：標籤(元素)的屬性
53. 事件三要素：
l 事件源:觸發(被)事件的元素
l 事件型別:事件的觸發方式(例如滑鼠點選或鍵盤點選)
l 事件處理程式:事件觸發後要執行的程式碼(函式形式)
54.return false 可以組織a連結跳轉。
55.style是和px一起用的。
56.style="resize: none;"文字域禁用
57.
1,id獲取元素

1 <script>
2 vardiv=document.getElementById('main');
3 console.log(div);
4 </script>

2,點選事件

1 <script>
2 varbox=document.getElementById('box');
3 box.onclick=function(){
4 console.log('程式碼會在box被點選後執行');
5 };
6 </script>

3,innerText獲取文字內容
innerHTML 元素的所有節點（包括標籤等都可以獲取）
4,根據標籤名獲取元素
獲取元素為偽陣列
擁有length屬性,(索引為非負整數)不具有陣列所具有的方法
偽陣列，就是像陣列一樣有length屬性，也有0、1、2、3等屬性的物件，看起來就像陣列
一樣，但不是陣列
document.getElementsByTagName("標籤的名字")
5,事件中的this
當在事件中表示當前元素的時候，可以使用this
6.dom操作頁面元素的。
7.dom樹

58.onmouseout 滑鼠移出
onmouseover滑鼠移入
59.onfocus 事件在物件獲得焦點時發生，用於input
onblur 事件會在物件失去焦點時發生，
60.根據name名獲取元素：getElementsByName
根據類名獲取元素：getElementsByClassName
61.除了byid 剩下的獲取的都是集合。
62.//獲取元素的所有方式
//獲取單個元素，可以直接使用方法: ID, queryselector
//獲取集合，拿出來集合中的某一項使用方法:ByClassName，ByTagName
ByName queryselectorAll
63.//兩者區別: innerHTML 可以設定標籤 而innerText只能設定文字，不識別標籤
64.js中做累加操作時需要給變數外層加Number（）轉換為數值型別，再累加。
65.獲取屬性：Api名稱 getAttribute("自定義屬性的名字")
設定屬性：setAttribute("屬性的名字","屬性的值");
移除屬性：my$("dv").removeAttribute("屬性名稱");
66.this.disabled=true this.checked=true this.selected=true
67.節點三要素：
// nodeType nodeName nodevalue
// nodeType : 1---標籤, 2----屬性， 3----文字 8--註釋
// nodeName : 返回的是大寫標籤名 返回小寫屬性名 #text
// nodeValue : null 返回屬性值 文字內容
68.// children 獲取的是直接子元素 childNodes獲取的是所有子元素(包含空格和註釋)
children： 獲取子元素節點，無相容問題
childNodes：
　　IE：獲取子元素節點
　　非IE（chrome，Firefox等）：獲取子節點，包括元素節點和文字節點
69.獲取父級節點 parentNode屬性
獲取父元素節點，無相容問題
獲取第一個兒子元素節點,firstChild與firstElementChild
firstChild：
　　IE6,7,8：獲取第一個子元素節點
　　非IE6,7,8：獲取第一個子節點，元素節點/文字節點
firstElementChild：
　　IE6,7,8：不支援
非IE6,7,8： 獲取第一個子元素節點
獲取最後一個子元素節點,lastChild與lastElementChild
lastChild：
　　IE6,7,8：獲取最後一個子元素節點
　　非IE6,7,8：獲取最後一個子節點，元素節點/文字節點
lastElementChild：
　　IE6,7,8：不支援
　　非IE6,7,8：獲取最後一個元素節點
獲取後一個兄弟元素節點，nextSibling與nextElementChild
nextSibling：
　　IE6,7,8：獲取後一個兄弟元素節點
　　非IE6,7,8：獲取後一個兄弟節點，元素節點/文字節點
nextElementChild：
　　IE6,7,8：不支援
　　非IE6,7,8：獲取後一個兄弟元素
獲取前一個兄弟元素節點previousSibling與previousElementChild
previousSibling：
　　IE6,7,8：獲取前一個兄弟元素節點
　　非IE6,7,8：獲取前一個兄弟節點，元素節點/文字節點
previousElementChild:
　　IE6,7,8：不支援
非IE6,7,8：獲取前一個元素節點
70. createElement使用js動態建立新元素。
appendChild新增元素。
removeChild刪除節點。
var op =document.createElement('p');
op.innerHTML = '我是新建立的'
// insertBefore(插入的新元素，要插入到哪個元素前面)
oDiv .insertBefore(op,p1);
71.event.stopPropagation();阻止事件冒泡（用的多）非IE
event.cancelBubble = true; IE
相容性程式碼
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
72.繫結事件的新方式:addEventListener和attachEvent方法.
oDiv . addEventListener( ' click '，方法名，是否冒泡)
Dom二級事件不加on
Dom零級事件+on
為一個元素繫結多個事件，但方法名不一樣可用DOM二級，不會覆蓋。
73.Event事件的相容寫法
獲得event物件相容性寫法
event || (event = window.event);
獲得target相容型寫法
event.target||event.srcElement
74.移除解綁事件
物件.removeEventListener("沒有on的事件型別",函式名字,false);
75.clearInterval清空定時器
clearTimeout清空定時器
setT imeout只在規定時間內執行一次
setInterval(處理函式，執行時間) 在規定時間內重複執行
76.如何阻止冒泡（存在相容性）
e.stopPropagation(); 谷歌和火狐支援,
window.event.cancelBubble=true; IE特有的,谷歌支援,火狐不支援
77.冒泡：子元素傳到父元素 捕獲：父元素傳到子元素
78.onkeyup鍵盤抬起
onkeydown鍵盤按下
79.// https: 協議www. baidu. com:8080 域名+埠號 ?後面的叫query ，相當於傳遞的值。
// https:/ /www. baidu. com: 8080?name= 'zs ' &age=18
80. 字串方法：
//length返回字串長度
// charAt() 返回指定索引的字串
// charCodeAt()返回ASCII碼錶
// charCodeAt()返回ASCII碼錶 括號內為索引值
//concat 字串拼接 返回值是一個字串
// index0f('l') 第一次出現的位置 返回索引值
// index0f('l',5) 從第5個開始查找出現l的索引值 返回索引值
// lastIndexOf() 字母最後出現的索引值 返回索引值
// replace( 'old', 'new') 返回值是一個字串，原字串是不改變的 。
// split 分割字串必須以str中的內容來進行分割， 返回值是一個數組
//同時以傳入的引數為分隔符如果str中沒有此分隔符則以整個str變為陣列輸出。
// substr()第一個引數是開始索引值第二 個引數是擷取個數 返回值是擷取內容
// substring() 第一個引數是開始索引值 第二個是結束索引值，但是不包含結束索引元素 返回值是擷取的內容
// toLocaleuppercase() //變大寫 返回值是字串
// toUpperCase() 變大寫 返回值是個字串
// toLocaleLowerCase()變小寫 返回值是個字串
//toLowerCase() 變小寫 返回值是個字串
// trim() 去除首尾空格 返回值是字串
陣列方法：
push() 往陣列的末尾增加元素 返回值 是新增元素後陣列的個數
unshift() 往陣列的開頭增加元素 返回值 是新增元素後陣列的個數
pop() 刪除末尾元素 返回值是刪除的元素
shift() 刪除開始元素 返回值是刪除的元素
concat() 陣列的拼接 返回值是一個數組
join() 分割陣列 轉換為字串 返回值為一個字串
翻轉陣列reverse() 返回值還是一個數組
slice() 擷取陣列的某幾項 引數含義 1代表索引值 代表起始位置 3代表索引值 代表終止位置 擷取內容不包含終止位置 // 返回值：擷取後的內容 原陣列不變
splice() 刪除/增加/修改陣列 引數，如果只有2個引數，第一個是起始位置，第二個引數是擷取的個數，返回值是擷取內容 原陣列會改變
第一個值：起始位置 第二個值 刪除的個數 第三個值，替換刪除的元素 返回值：刪除元素
sort() 排序 只能排序10以內的數 返回值還是陣列
sort(function(a,b){return a-b}) a-b 從小到大排序 b-a 從大到小排序
indexOf() 檢索陣列中是否含有某一項 如果有返回索引位置 沒有返回-1 返回值：數值型別
forEach() 迴圈遍歷陣列的方法 返回內容加索引
arr2.forEach(function (ele, index) {
console.log(ele + '------' + index)
})
instanceof 檢測引用資料型別 返回值：布林型別。
isArray() 檢測是否是陣列 返回值：布林型別。
//時間方法
var data =new Date();
//1590595200000 距離1970年1月1日的毫秒值 返回值：數值型別
console.log(data.getTime());
//2020 年 獲取當前年份 返回值：數值型別
console.log(data.getFullYear())
//5 月 獲取當前月份 返回值：數值型別
console.log(data.getMonth())
//29 日 獲取當前日期 返回值：數值型別
console.log(data.getDate())
//14 時 獲取當前小時 返回值：數值型別
console.log(data.getHours())
//40 分 獲取當前分鐘 返回值：數值型別
console.log(data.getMinutes())
//32 秒 獲取當前秒 返回值：數值型別
console.log(data.getSeconds())
// 星期 獲取當前星期 返回值：數值型別
console.log(data.getDay())
81.window.onload = function( ){}保證html和css執行完畢後，再執行js。
82.offsetWidth=width+左右border+左右的padding
offsetHeight=height+上下border+上下padding
offsetLeft：當父元素沒有定位的時候，元素本身距離body最左側的距離（包含margin）
當父元素有定位的時候，元素本身距離父元素最左側的距離（包含padding、border）
offsetTop：當父元素沒有定位的時候，元素本身距離body最上側的距離（包含margin）
當父元素有定位的時候，元素本身距離父元素最上側的距離（包含padding、border）
clientWidth=width+左右padding 常用於獲取一屏的寬度
clientHeight=Height+上下padding常用於獲取一屏的高度
clientLeft=左border(border-left)
clientTop=上border(border-top)
scrollWidh=width+左右的padding(:可視區域寬度+被隱藏區域寬度)
scrollHeight=height+上下的padding(:可視區域高度+被隱藏區域高度)
scrollLeft=被捲去的寬度 （有滾動條）
scrollTop=被捲去的高度（有滾動條）
如果沒有滾動條，裡面元素超出父元素，則指的是父元素頂部距離子元素捲去的寬度和高度。
onscroll是滾動條滾動事件
瀏覽器被捲去的高度
出現滾動條的時候 要用pageX和pageY 而不用clientX/Y。
獲取瀏覽器寬度：
var clientwidth
= document . documentElement .clientwidth | | document . body .clientwidth;

83.opacity：0-1 0是完全透明 1完全不透明。
84.animate(元素 , 目標長度,step)
oSpan[i] . setAttribute( ' index' ,i);
85.瀏覽器頂級模型為：window
html的頂級元素為：document
86. pageX/Y：相對於文件邊緣,包含滾動條距離（獲取超出一屏的滑鼠座標）
clientX/Y：滑鼠相對於當前頁面座標且不包含滾動條距離（獲取當前座標）
clientWidth：獲取元素自身的寬度（不含邊框）
clientHeight：獲取元素自身的高度（不含邊框）
clientX 事件屬性返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（或客戶區）的水平座標。客戶區指的是當前視窗。
clientY 事件屬性返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（客戶區）的垂直座標。
87.json格式：{"width" :"1000"，"height" :”2000"}
88.獲取元素的高階用法（瞭解）
getComputedStyle與currentStyle（相容性寫法）
var style = window.getComputedStyle("元素", "偽類");獲取屬性
// 獲取元素的屬性相容寫法
function getCss(ele, attr) {
return window.getComputedStyle
? window.getComputedStyle(ele, null)[attr]
: ele.currentStyle[attr];
}
89. //阻止事件的預設行為
event.preventDefault();
//這是IE中的處理阻止預設行為
event.returnValue = false;。
event.stopPropagation();阻止事件冒泡（用的多）非IE
event.cancelBubble = true; IE
90.nodeName判斷返回大寫的標籤名。
toLowerCase返回小寫的標籤名。
target.nodeName.toLowerCase()=='li'用來判斷是否是該標籤
91.事件委託要加給父類 如給li加事件委託 要給ul 加 oul.onmouseover
92.ul>(這是第$個)li*10
93.如果呼叫建構函式時需要用return，不呼叫不用加。
94.每個例項物件都有__proto __屬性，
__proto__屬性指向的是建構函式的原型。
95.系統建構函式與 普通建構函式區別：
1.獲取元素的屬性或者方法，系統函式可以直接使用物件名.屬性/方法，而普通建構函式需要使用this.屬性名/方法
2.屬性和方法可以直接使用，而普通建構函式需要建立例項物件使用
96.建立建構函式多了容易浪費記憶體空間，需要把要使用的方法放在建構函式的原型上，通過原型找到它，實現資料共享。
97.棧是先進先出，棧裡邊存的是值和址 。
堆：根據棧裡邊儲存的地址找到具體內容（比如函式體放在堆中）
想要實現資料共享解決記憶體佔用的問題，需要在建構函式的原型上寫方法，這樣可以例項物件相同的時候，直接去堆中查詢對應的方法，而不需要每次都建立一個新的記憶體空間。

98.p1.__proto__.sex屬性必須加上__proto__才可以。
p1.play()方法可以直接打點寫
99.Math . round(Math. random( )* (m-n)+n); 隨機數。
100.暴露屬性給window: //自呼叫函式
(function (window) {
var num = 1;
window.num = num;
})(window)
console.log(num);
101.原型上新增方法：資料共享和節省空間。
102.系統建構函式: string Array object Math Date Number Regexp
103.貪吃蛇思路：
1. 點選遊戲開始
2. 蛇出現 食物出現
3. 開始控制蛇頭方向去撞擊食物
4. 碰撞到食物，食物消失，蛇身拉長。如果撞牆，遊戲結束。
5. 繼續下一輪
104.面向物件：封裝、繼承、多型。
105.基本資料型別的值是存在棧裡邊的，引用資料型別的值存在堆中，引用資料型別其地址存在棧中。（面試）
106
自呼叫：（函式體）（）；
檢測物件的型別，用 instanceof 。
任何函式都有一個prototype屬性，它本身是一個物件。（面試）
建構函式有一個prototype屬性，它本身是一個物件，我們稱為原型。（面試）
建構函式的prototype屬性和方法，都可以被建構函式例項化物件所繼承。（面試）
建構函式的prototype原型物件有個constructor屬性，指向的是當前原型物件所在的建構函式。（面試）
例項化物件有個__proto__屬性，它是一個指標，指向的是建構函式的原型prototype。（面試）
原型：函式的prototype屬性，它本身是一個物件。
原型屬性的查詢規則：
從建構函式本身查詢，如果有就返回，停止查詢，
如果建構函式本身沒有，繼續從原型中查詢，如果有就返回，停止查詢
如果原型沒有，就返回undefined
原型作用優點：
節省記憶體空間。
繼承。（實現資料共享）通過原型繼承: 可以繼承父類的屬性，方法。

繼承：借用建構函式繼承、拷貝繼承、原型繼承和混合繼承。
缺點：:每次建立的例項化物件獲取到的屬性的值都是一樣的，如果想要修改每個例項物件的屬 性或者方法，需要單獨給例項物件設定。
原型函式中，this指向是的例項化物件。
把建構函式的原型寫成字面量函式形式，就會丟失constructor屬性。
107.Student . prototype= new Person( ' ls' ,18);可以改變原型指向。（原型new另外的建構函式。）
109.重點:通過prototype改變的指向從而 可以使用Person的屬性和方法。
110.這是通過call方法來改變thi s的指向
Person.call( this, name ,age);
//借用建構函式:建構函式名稱.call(當前物件，屬性1,屬性2，。。。。。。)
// call()該方法是用來改變this指向的，call中 的第一個引數就是this的指向，後面依次傳入屬性即可
111. call()和 apply() 用來改變this指向的 。 call()傳遞的是單個的值，而apply()傳遞的是陣列。
112.this指向
// 1.普通函式 window
// 2. 建構函式中 例項化物件
// 3.繫結事件 事件源 （事件點前面的元素）
// 4.定時器 window
// 5.自執行函式 window
113.自定義函式: function fn(){} //函式宣告 在ie8種使用if.. .else時會有bug。
匿名函式: var fn1=function(){} //函式表示式 //如果需要做if判斷，需要用函式表示式的寫法
自呼叫函式: (function(){})()
114.arguments是偽陣列。 console.log(arguments)可以拿到函式的屬性。
函式的caller fn.caller 打印出來是調（誰呼叫這個函式）。
caller是函式呼叫者
callee 是函式本身
115.閉包：函式A裡邊巢狀函式B，函式A呼叫，會形成一個私有的作用域。
作用：避免變數汙染。
116.閉包拿到索引值。

1 <li><input type="button" value="贊(1)" id=" inp1"></li>
2 <li><input type= "button" value=" 贊(1)"></li>
3 <li><input type="button" value="贊(1)"></li>
4 <li><input type="button" value="贊(1)"></li>
5 (function (i) {
6 objInp[i].onclick = function () {console . log(i)}
7 })(i)

117.原型鏈最終指向null
118.“所有的函式都是一個物件,所有的物件,都可以用建構函式建立。
119. bind() ：用來複制一份
函式名.bind(物件,引數1，引數2.。。。。。); 返回值是複製之後的這個函式或者物件
120.區域性變數變為全域性變數，掛載到window上。
121.回撥函式就是函式當引數。
122.“閉包就是能夠讀取其他函式內部變數的函式。例如在javascript中，只有函式內部的子函式才能讀取區域性變數，所以閉包可以理解成“定義在一個函式內部的函式“。在本質上，閉包是將函式內部和函式外部連線起來的橋樑。”
123.檢測資料型別方式 一、typeof
二、 instanceof
三、constructor object. prototype. tostring.call();
四、constructor
124.instanceof語法規則：fun instanceof Function 。
125.constructor檢測資料型別語法：arr.constructor==Array
126.靜態成員：函式內部供自己使用的變數
例項成員：例項化物件。
127.// js回收機制有2種方式: 1.標記2.計數
// 1.標記
從你定義變數開始瀏覽器就會做標記，後期回收器會根據你的標記來判斷你是否需要刪除
// 2.計數
定義完變數後，只有由其他變數呼叫 則會累加次數，直到你的次數為0.就會刪除
128.//記憶體洩漏:
// 1、閉包
// 2.定時器如何不清除會因引起記憶體洩漏
// 3.全域性變數，全域性變數生命週期會持續到瀏覽器關閉頁面。
//4、for(){} odiv不用了之後應該 讓odiv=null 清空。
129.//瀏覽器的重排和重繪：
//通過js改變頁面的樣式叫重繪
//通過js改變頁面的結構叫重排
130.//如何優化：
// 如果是要修改樣式:我們需要用類名的方式。
// 如果是建立元素，需要在body裡面設定完成，通過display來切換即可。
131.深拷貝與淺拷貝出現的根源就在於引用資料型別。當我們定義a=[0,1,2,3,4]，b=a時，其實複製的是a的引用地址，而並非堆裡面的值。因為指向了相同的地址，所以當我們更改a時b會改變，更改b時a也會改變，這就是淺拷貝。而深拷貝改變的是內容。
深拷貝是內容拷貝,淺拷貝是地址拷貝
132.callee 返回一個正在被執行函式的引用，通過Arguments呼叫。
function Person(name) {
this.name = name;
console.log(arguments);
}
caller 返回一個呼叫當前函式的引用 如果是由頂層呼叫的話 則返回null 是例項化物件的一個屬性。
133.總結：遞迴：方法自己呼叫自己
// 深拷貝與淺拷貝區別： 前者是拷貝的值，後者是拷貝的地址
// 注意點：如果拷貝的物件中有方法，不能單純的只判斷object，而應該是單獨判斷是否是function型別。
134.自呼叫函式:自己呼叫自己
自呼叫函式:(function(){函式})
自呼叫(自執行函式)的作用:主要用來分割作用域
135.回撥函式：
回撥函式在執行完畢後，根據不同的情況，可能呼叫不同的函式，我們可以呼叫這個函式
回撥函式本質是一個引數。
136.//正到表示式:規則表示式。按照一定的規則組合起來的表示式
//作用:匹配字串
//語法:
元字元
137. * :除了\n以外的其他所有字元
[]:範圍。
[1-9]:從1到9中的任意一個字元
[a-z]:從a-z中的任意一個字元
[A-Z]:從A-Z中的任意一個字元
[a-zA-Z]:從所有字母中的任意一個字元
[0-9a-zA-Z]:所有數字或者字母中的任意一個
| :或者 [0-9]|[a-z]:從0-9或者a-z之間選擇任意一個字元
(): 優先順序最高， [0-9]|([a-z])|[A-Z];
()()():從左往右開始計算
限定符 以^開頭 以$結尾
+ :表示的是前面的表示式出現1次到多次 [a-z][9]+ 'm99' 'm999999' 'a99999'
* ：表示的是前面的表示式出現0次到多次 [0-9][A-Z]* '5ML'
? :表示的前面的表示式出現0次到1次，
最多是1次，最少是0次 [0-9][v]? '9v' '9' '3' [0-9]?[r] '5r' 'r' '8r'
注意：前面的表示式指的就是緊挨著的這個表示式，並不是前面所有的表示式
{0,}:與*一樣，代表前面表示式出現o到多次
{0,1}:與?一樣，代表前面表示式出現0到1次
{1,}:與+一樣，代表前面表示式出現1到多次
[3,5]{4,5}; ”3333' '4444' ' 55555'
\d:數字中的一個
\D:非數字
\s:空白符
\S:非空白符
\w:非特殊字元
\W:特殊字元
^ 以……開頭 $以……結尾
test（正則）檢測驗證匹配正則
138.var reg = /^([A-Z0-9]{6,18})(\W|\-)+@[A-Z0-9]+\.([A-z]{2,3})$/;匹配郵箱的正則表示式
139. [^a-zA-Z ] 以括號裡的引數取反。
140.var reg =/[o]/g; //global 全域性替換
var reg =/[o]/gi; //ignore 忽略大小寫
141.//注意點:想要獲取字串的具體的值，需要在正則匹配的時候進行分組，然後通過正則的建構函式中的$符，獲取對應的分組內容。
142.var arr = str . match(/ \d+/g); match方法可以拿出字串中數字
143.

1 var str = '2020-06-23';
2 var reg = /(\d{4})\-(\d{2})\-(\d{2})/; //分組提取
3 // console.log(reg.test(str));
4 if(reg.test(str)){
5 console.log(RegExp.$3)
6 }

RegExp（正則）
144.

1 var str = 'zs:1000,lisi:500,wangwu:2000';
2 var arr = str.match(/\d+/g);
3 console.log(arr)

match 匹配提取內容
145.var reg3= /[a\-Z]/g;
console. log(reg3. test(str3))
/ /Range out of order in character class
字元類中的"範圍違背了character類" 在裡邊加一個轉義字元 \ 就行。
146.阻止錨點跳轉：JavaScript：；
147.name屬性：只有input有這個屬性。
149. 獲取當前螢幕滾動條的距離：
document.documentElement.scrollTop
document.body.scrollTop -= step
150[...new Set([1,1,1,2,2,3])] 的返回值是去重的陣列。
151.function addEvent(obj ，type , fn){
obj . addEventL istener(type, fn, false);
}
addEvent (window, ' scroll' ,function( ){
console. log(456)
})
addEvent (window, ' scroll' , function(){
console. log(789)
}) dom二級事件 繫結onscroll事件。

報錯資訊總結：
JS中常見的 “函式名 is not a function” 錯誤 是函式括號加錯了。
timer is not defind是定時器作用域問題拿不到 然後在外面定義timer就行了。
”style“ is not defind是角標索引溢位了 應該把邊界值判斷提前。
152.onmouseenter和onmouseleave阻止冒泡。相當於onmouseover和onmouseout。
js基礎總結
第一章JavaScript初識
1.js特點：指令碼語言、解釋性語言、基於物件的語言。
2.js能做什麼:資料處理、資料驗證、網頁特效、服務端、遊戲。
3.js三大核心：ECMAScript 、DOM文件物件模型（Document object model）、BOM瀏覽器物件模型
4.js程式碼書寫：外部引入、script標籤、html文件書寫
5.js列印方式：alert方法、console.log
6.//單行註釋、多行註釋/**/
7.js變數概念：儲存資料的容器，在內容中開闢一個空間來儲存資料。
8.建立一個變數 var a; a=1;
建立一個變數並且賦值 var a=1;
建立多個變數 var age,name,shengao
9.js變數規範：變數名不能夠是關鍵字，不能以數字開頭，特殊符號$ _
起名要有一定的詞義（見名知意）
起名要遵循駝峰命名法。
區分大小寫的
js引入方式 ：內嵌式、行內式、外聯式。
外聯式：用script標籤src 引入。
js資料型別
10.基本資料型別（數值、字串、null、undefined、Boolen）
數值：整數、負數、小數、科學計數、八進位制、十六進位制、NaN not a number(不是一個數值，自己跟自己不相等)
字串：返回值1或NaN 字串長度 str.length 字串連線 +
null 返回值 null undefiend返回值 undefiend Boolen返回值true或flase
11.引用型別：object、正則、函式、陣列
12.檢測資料型別：typeof檢測
13.型別強轉：轉字串：物件.toString()或String()
14.轉number型別：parseInt()轉整的，遇到第一個不是數字的會轉成NaN
parseFloat()轉小數的
Number()方法，只要有一個不是數值就NaN
15.Bollean：轉換為false的，0，null，undefiend，NaN,空字串。
js運算
16.算數運算：+ - * / %
前++ 後++ 前-- 後--（前置++，先將自身的值自增1，再將自增後的值賦值給變數。 後置++，先將自身的值賦值給變數，然後再自增1。）前置++加1，後置++不變
17.邏輯運算：操作符 && || ！ 與或非（與 && 讀作and 同時為true 結果為true，有一個false就是false）（|| 有一個為true就為true）（! 顛倒黑白，取反）
18.比較運算：== 只比較內容、===比較內容與型別、！= 只比較內容、！== 比較型別
19.賦值運算：=
+= -= *= /=
1. () 優先順序最高
2. .點運算子
2. 一元運算子 ++ -- !
3. 算數運算子 先* / % 後 + -
4. 關係運算符 > >= < <=
5. 相等運算子 == != === !==
6. 邏輯運算子 先&& 後||
7. 賦值運算子 = */
//false 0 null undefined 空字串。進行隱式轉換會變為false 其他的都會轉換為true
第二章JavaScript流程控制
分支結構
20.if ：語法 if（條件）{執行語句}單獨寫
if（條件）{}else{}
if（）else if{}else if{}else{}
switch分支：switch case 跳出迴圈 加break
迴圈結構
21.while語法：while（條件）{執行的語句}
一般應用場景：不確定迴圈次數。
22.for語法 for（）{} 一般應用場景：確定執行次數時。
23.do{迴圈體}while（條件） do while不管條件滿不滿足，都會執行一次。
補充知識點
24.新的輸出方式：document.write() 接收輸入：prompt
第三章 JavaScript中陣列與函式
陣列
25.語法與特點：
寫法[],每個成員用逗號來分割。
與其他語言的區別，在其他語言中，往往陣列是一種資料型別。
引用型別中的一種表現形式。
26.陣列的建立：
[];空陣列
一般是放的同一個資料型別
以逗號分割 放到中括號裡。
27.陣列的取值：陣列【下標】
28.陣列的長度：.length
29.陣列的遍歷
for迴圈 退出條件：長度。超過長度，我們是以下標取值的，所以就是undefined了
for(var i = 0; i < arr.length; i++)陣列遍歷的固定結構
30.陣列的替換：如果有 就是替換 語法：arr【5】=“玉棟”
沒有就是新增
31.與其他語言中陣列的不同
在其他語言中有的有索引陣列和關聯陣列的區分，比如下方就是一個關聯陣列 ['name'=>'dongxue','age'=>18]
32.陣列方法：
push（）往陣列末尾增加元素 返回值 是新增元素後陣列的個數。
unshift（）往陣列的開頭增加元素 返回值是新增元素後陣列的個數。
pop（）刪除末尾元素 返回值是刪除的元素
shift（）刪除開始元素 返回值的刪除的元素
concat（）陣列的拼接
join（）分割陣列 轉換字串
slice（）擷取陣列的某幾項 引數含義 第一個代表起始索引值 第二項代表終止索引值 擷取內容不包含終止位置 返回值：擷取後的內容 原陣列不變
splice（）刪除/增加/修改陣列 引數，如果只有2個引數，第一個是起始位置 第二個引數的擷取個數，返回值是擷取內容 原陣列會改變
sort（）排序 只能排序10以內的數。
indexOf（）檢索陣列中是否含有某一項 如果有，返回索引位置 ；沒有，返回-1.
forEach(ele,index)迴圈遍歷陣列
instanceof檢測引用資料型別
函式
33.函式定義：把一段相對獨立的具有特定功能的程式碼塊封裝起來，形成一個獨立實體，就是函式，起個名字（函式名），在後續開發中可以反覆呼叫。
函式的作用就是封裝一段程式碼，將來可以重複使用。
34.return關鍵字：函式的執行結束，如果沒有return，結果是undefiend，沒有值。
35.函式的命名：遵守駝峰命名法和由數字、字母、下劃線、$組成，不能以數字開頭。
36.函式的建立：第一種function函式名（）{方法體}
第二種var 變數=function（）{}
37.函式的呼叫：函式名（）
函式是可以被多次重複的呼叫的
38.函式的引數：引數可以寫n多個
形參：在函式定義時佔位的引數
實參：呼叫函式時，實際傳入的值。
39.演算法：遞迴演算法（自己呼叫自己）（必須要有邊界條件）（從大問題到小問題 最終回到大問題）（案例階乘）
階乘和：
<script>
//輸入彈框
var n = window.prompt("請輸入一個數：")
//定義函式
function fn(n) {
//定義變數初始化值 因為是乘法所以不能為0
var res = 1;
//定義階乘和 並初始化值
var sum = 0;
//遍歷陣列
for (var i = 1; i <= n; i++) {
//n項階乘值
res = res * i
sum = sum + res;
}
//列印階乘和
console.log(sum);
//返回值
return res
}
//呼叫
fn(n);
</script>
第四章 JavaScript函式
函式的知識點
40.函式的命名規則（遵守駝峰命名法和由數字、字母、下劃線、$組成，不能以數字開頭。）
41.偽陣列：arguments他是存在於函式內部的，可以接收傳遞過來的引數
42.函式的覆蓋問題：重複定義會覆蓋前面的
匿名函式
43.函式是一種資料：（變數=）（函式是可以被typeof檢測的）（函式可以傳入，回撥函式）（函式可以被return出來的）
函式自呼叫寫法
44.函式自呼叫寫法：（函式）（）
~函式（）
（函式（））
45.函式提升：牢記函式提升會在第一位
函式表示式不會被提升，函式宣告可以。
46.變數提升：與我們的作用域是息息相關的
作用域鏈
47.一個函式就會創造一個作用域
48.作用域有一個全域性作用域
49.作用域會在當前鏈上找，找不到再一層一層的向上找
繪製作用域鏈的步驟:
（1）看整個全域性是一條鏈, 即頂級鏈, 記為 0 級鏈
（2） 看全域性作用域中, 有什麼成員宣告, 就以方格的形式繪製到 0 級練上
（3）再找函式, 只有函式可以限制作用域, 因此從函式中引入新鏈, 標記為 1 級鏈
然後在每一個 1 級鏈中再次往復剛才的行為

50.補充：
必須要加var 不加var就會產生變數汙染，一定要避免。
隱式全域性變數var a=5,b=5,c=9 b和c是隱式全域性變數
var a=b=c=20 //b和c就是隱式全域性變數
物件
51.引用型別中的其中一個{}
52.語法：{ 一個個的鍵值對 }，必須寫逗號。
53.this：
在事件函式中，this指向的是事件源。
在建構函式中，this指向的是建構函式的例項化物件。
在普通函式中，this指向的是window物件。
在物件函式中，this指向的是當前的物件。
定時器函式指向window
陣列的元素是函式指向該陣列
原型中this 指向例項化物件
自執行函式中this指向window
54.物件遍歷：for…in for（var x in object）{}
55.物件中的屬性只能有一個，新增如果有的話就是覆蓋。
56.物件屬性的刪除：delete關鍵字
第五章 JavaScript內建物件

擴充套件知識
57.引用型別與基本型別資料的區別：引用資料型別按址傳遞，基本資料型別按值傳遞
58.短路寫法：var a = 1 || null 哪個是true 去哪個的值，如果兩個都是false呢,取後面這個（後面會用於解決瀏覽器相容性問題）
基本包裝型別
59.字串建立的形式：字面量和建構函式 new String()
60.Number的建立：字面量和構造 new Number()
61.boolean
string

62.字串方法：
charat()根據位置找字元
charCodeAt() 根據位置找字元，返回的是ascall編碼對應的值
chartCodeAt()返 回ASCII碼錶
concat 字串拼接
index0f() 檢索 是否包含此元素
lastIndexOf() 從後往前 檢索 是否包含此元素
replace( 'old', 'new')原字串是不改變的
split 分割字串必須以str中的內容來進行分割，
同時以傳入的引數為分隔符如果str中沒有此分隔符則以整個str變為陣列輸出
substr()第一個引數是開始索引值 第二 個引數是擷取個數
substring() 第一個引數是開始索引值 第二個是結束索引值，但是不包含結束索引元素 返回值是擷取的內容
toLocaleuppercase()、toUpperCase()變大寫
toLocaleLowerCase()、toLowerCase()變小寫
trim() 去除首尾空格
字串處理
63. concat
64.slice 字元區間，但是開頭0的話，包括0，結尾到end的話，不包括
65.substirng（）跟slice認為是一樣的
66.substr(擷取位置，長度)
67.trim()去除空格
68.search引數可以是正則表示式。
69.replace是替換 引數1 查詢，引數2是替換 （引數1可以寫正則）
70.split根據字串某個分割 切割為陣列
71.formCharCode 掛載在String物件下的
js-API總結
第一章 JavaScript-API（DOM操作）
api
72.webapi
73.api的概念：API是提供給不bai同語言的一個介面，也就du是對應的函式裡面提zhi供了相應的方法。
js構成
74.dom、bom、ecma核心語法
事件
75.點選事件 onclick
76.如何繫結事件 元素.具體事件 = 事件執行函式
77.事件三要素：事件源、事件型別、事件處理程式
獲取dom
78.document.getElementById(id名)就可以獲取id為這個的元素物件
doucment.getElementsByTagName 根據標籤獲取元素，得到一個偽陣列，陣列存的是dom元素物件
for迴圈獲取到的偽陣列給每一個元素繫結事件
屬性操作
79.普通元素屬性（未列全，左側為舉例）href、src 屬性、img的width
80.innerText：獲取元素的文字值
81.表單部分屬性：value獲取值的、selected 下拉框、checked 複選框、disabled 禁用
82.樣式處理：元素物件.style.屬性名
注意:例如z-index加槓的屬性要加 駝峰命名法 小駝峰，class要獲取className
第二章 JavaScript-API(獲取DOM元素方法與事件)
83.阻止a連結跳轉：事件執行邏輯程式碼中 return false
84.新事件:滑鼠移入 onmouseover或者onmouseenter（可以阻止多層元素巢狀所造成的冒泡）
滑鼠移出 onmouseout或者onmouseleave（可以阻止多層元素巢狀所造成的冒泡）
獲取焦點 onfocus
失去焦點 onblur
85.獲取元素新方法：
根據name名獲取元素 getElementsByName()
根據class名獲取元素 getElementsByClassName()
86.根據選擇器來獲取元素：
querySelector（）
querySelectorAll（）
第三章 JavaScript-API(DOM節點操作、事件、BOM)
節點
87.節點增刪改查：
獲取子節點 childNodes（任何瀏覽器都支援）
獲取子節點的第一個 firstChild（任何瀏覽器都支援）
獲取最後一個子元素節點,lastChild與lastElementChild
獲取前一個兄弟元素節點previousSibling與previousElementChild
獲取後一個兄弟元素節點，nextSibling與nextElementChild
獲取父節點 parentNode
增刪改：增（insertBefore（節點，節點位置）在節點位置之前插入）
（節點1.appendChild（節點2） 把節點2新增節點1中）
改： 改變節點上的內容（更改屬性，更改樣式）。
刪
88.判斷節點：nodeType
nodeName 返回節點名，名是大寫
相容性
89.具體的：
innertText與Textcontent
事件物件
節點操作中的
事件物件獲得target相容型寫法
建立元素
90.innertHtml、創造節點 createElement（元素名）、document.write()
91.事件三要素：事件源、事件型別、事件處理程式
事件
92.事件物件：事件相容性
（獲得event物件相容性寫法 event || (event = window.event);）
（獲得target相容型寫法 event.target||event.srcElement）
93.事件委託要加給父類 如給li加事件委託 要給ul 加 oul.onmouseover
94.事件新繫結方法：dom二級事件：addeventlister('不加on的事件'，執行的函式,false)
相容性問題 物件.attachEvent("有on的事件型別",事件處理函式)
95.解綁事件：removeEventListener('不加on的事件',執行的函式,false)
物件.onclick = null
96.新事件：window.onload載入事件
鍵盤事件:onkeypress（高階）(功能鍵不可以獲取到)
onkeyup 鍵盤彈起
onkeydown:可以獲取到對應的一些功能鍵
鍵盤按下
不區分大小寫
bom
97.window大全域性（在js中是瀏覽器獨有的）
98.定時器:setinteval(回撥函式，每隔多少時間)
clearInterval(定時器id) 清理定時器
第四章 JavaScript-API(動畫以及封裝)
動畫原理
99.如何實現？動畫的封裝
offset系列
100.offsetWidth=width+左右border+左右的padding
offsetHeight=height+上下border+上下padding
offsetLeft：當父元素沒有定位的時候，元素本身距離body最左側的距離（包含margin）
當父元素有定位的時候，元素本身距離父元素最左側的距離（包含padding、border）
offsetTop：當父元素沒有定位的時候，元素本身距離body最上側的距離（包含margin）
client系列
101.pageX/Y：相對於文件邊緣,包含滾動條距離（獲取超出一屏的滑鼠座標）
clientX/Y：滑鼠相對於當前頁面座標且不包含滾動條距離（獲取當前座標）
102.獲取文件根節點document
document.body
document.title
scroll系列
103.scrollWidh=width+左右的padding(:可視區域寬度+被隱藏區域寬度)
scrollHeight=height+上下的padding(:可視區域高度+被隱藏區域高度)
scrollLeft=被捲去的寬度 （有滾動條）
scrollTop=被捲去的高度（有滾動條）
如果沒有滾動條，裡面元素超出父元素，則指的是父元素頂部距離子元素捲去的寬度和高度。
onscroll是滾動條滾動事件
阻止預設事件
104.//阻止事件的預設行為
event.preventDefault();
event.returnValue = false;。（IE）
event.stopPropagation();阻止事件冒泡（用的多）非IE
event.cancelBubble = true; IE
JavaScript計算屬性操作
105.getComputedStyle
currentStyle
106.用typeof 檢測資料型別。並不能具體測出物件 正則 陣列，而顯示object。
JavaScritp-高階（總結）
第一章 JavaScript-高階（面向物件）

什麼是面向物件程式設計
107.面向物件程式設計 —— Object Oriented Programming，簡稱 OOP ，是一種程式設計開發思想。它將真實世界各種複雜的關係，抽象為一個個物件，然後由物件之間的分工與合作，完成對真實世界的模擬。
面向物件的三大特徵
108.封裝、繼承、多型。
js建立物件的三種方式
109.字面量、內建建構函式（new Object）、自定義建構函式
額外技巧:
110.利用自呼叫函式把區域性變數變為全域性變數
好處:不汙染外部變數、物件可以暴露給window直接使用
js設計模式
111.工廠模式有返回值，自定義建構函式沒有返回值。
原型鏈
112.原型三成員：例項物件、建構函式、原型物件
113.原型三成員之間的關係：例項物件與建構函式的關係、
例項物件與原型物件的關係（__proto__）
建構函式與原型物件的關係（prototype、sonstructor）
建構函式有一個prototype屬性，它本身是一個物件，我們稱為原型。（面試）
建構函式的prototype屬性和方法，都可以被建構函式例項化物件所繼承。（面試）
建構函式的prototype原型物件有個constructor屬性，指向的是當前原型物件所在的建構函式。（面試）
例項化物件有個__proto__屬性，它是一個指標，指向的是建構函式的原型prototype。（面試）
原型：函式的prototype屬性，它本身是一個物件。
114.原型鏈查詢規則：
從建構函式本身查詢，如果有就返回，停止查詢，
如果建構函式本身沒有，繼續從原型中查詢，如果有就返回，停止查詢
如果原型沒有，就返回undefined
115.原型鏈最終指向null 。
116.原型鏈的優點：節省記憶體空間和實現資料共享。
第二章 JavaScript-高階(面向物件鞏固--貪吃蛇)
遊戲操作步驟分析
117.遊戲開始--蛇出現 食物出現--開始控制蛇頭去撞擊隨機出現的食物--碰撞到食物，食物消失，蛇身體拉長，如果撞牆遊戲結束--繼續下一輪
功能實現拆分
118.場景搭建(階段一：)設定一個map地圖，設定結構和樣式
119.分析物件：
食物物件（屬性：水平座標 X 垂直座標 Y 寬 高 顏色
方法：渲染方法 render() 食物刪除方法 remove（））
蛇物件（屬性：蛇節的寬、蛇節的高、
蛇的身體（每一個蛇節的資訊(水平座標X/垂直座標Y/顏色：color)）移動的方向 direction
方法:渲染方法 render（）、小蛇移動方法 move()、小蛇刪除方法 remove（））
遊戲物件（屬性：地圖、蛇、食物
方法：遊戲初始化 init()、小蛇跑起來 runSnake、設定使用者按鍵 bindKey（））
實現邏輯
120.例項化該遊戲 new Game(場景)：傳參-傳入地圖
內部過程：遊戲的建構函式中進行初始化屬性對應的場景 蛇 食物
121.執行初始化init方法：初始化（渲染）蛇-內部過程-先刪除自己原來的再重新渲染
初始化（渲染）食物-內部過程-先刪除自己原來的再重新渲染
呼叫蛇跑起來方法 runSnake()：傳參-食物物件
地圖物件也就是一個dom而已
內部過程：設定定時器讓蛇動起來
繫結按鍵bindkey（）-內部過程-給文件繫結鍵盤按鈕移動事件
第三章 JavaScript-高階(面向物件之繼承)
原型
122.原型指向null
什麼是繼承
123.繼承可以使得子類具有父類的屬性和方法或者重新定義、追加屬性和方法等。
如何實現繼承
124.原型繼承：通過把建構函式的prototype指向一個物件，從而改變原型的指向
缺陷：父級類別中的方法不能繼承
125.建構函式中借用call來實現繼承：call可以改變this的指向
126.深拷貝與淺拷貝出現的根源就在於引用資料型別。當我們定義a=[0,1,2,3,4]，b=a時，其實複製的是a的引用地址，而並非堆裡面的值。因為指向了相同的地址，所以當我們更改a時b會改變，更改b時a也會改變，這就是淺拷貝。而深拷貝改變的是內容。
深拷貝是內容拷貝,淺拷貝是地址拷貝
函式
127.this指向：
普通函式-window
物件方法-該方法所屬物件
事件繫結方法-繫結事件物件
建構函式-例項物件
定時器函式-window
128.函式也是物件：函式是由new Function 建構函式的形式創造出來的
第四章 JavaScript-高階(函式高階應用)
函式進階
129.函式的三種定義方式：函式宣告、函式表示式、js內建建構函式的形式
130.函式的呼叫方法：（）方法：最基本的形式：普通呼叫、自呼叫函式
幾種變形的容易迷惑的形式：物件中、陣列中、回撥函式
call 、apply、bind：
方法解釋：
call語法：函式.call(物件，引數1，引數2......)
物件.方法.call(物件,引數1，引數2......)
作用：改變呼叫該方法的物件
apply語法：函式.apply（物件,[引數1，引數2，引數3......]）
物件.方法.apply(物件,[引數1,引數2,引數3......])
作用：改變呼叫該函式或者方法的物件
bind語法：函式.bind(物件)，其實相當於物件.函式(),所以函式裡面的this就是該物件了
改變呼叫該函式或者該方法的物件，返回一個函式，需要呼叫
差別差異彙總：相同點（apply與call與bind都可以改變this的指向、apply與call是一種呼叫函式的方式、第一個引數都是物件）
不同點（apply與call的引數不同，apply的第二個引數是陣列、bind返回值是一個函式，需要呼叫）
高階函式
131.函式可以作為引數：回撥函式
132.函式可以作為返回值：return function(){}
133.函式的其他成員：arguments實參列表、caller函式的呼叫者、length 形參列表、name 函式的名稱、callee函式本身
134.函式閉包：閉包概念：閉包定義-定義在一個函式內部的函式
閉包本質-閉包就是將函式內部和函式外部連線起來的一座橋樑
135.閉包的作用：可以在函式外部讀取函式內部成員
讓函式內成員始終存活在記憶體中
136.函式遞迴：函式內部自己呼叫自己
137.遞迴應用場景：深拷貝、選單樹、遍歷dom樹
第五章 正則表示式
課程複習
138.函式的新呼叫方式的區別：apply、call、bind（）
139.閉包：閉包模式：函式模式閉包
物件模式閉包
閉包作用：快取資料
延長作用域鏈
缺點：函式中的變數不能及時的釋放
140.遞迴：函式中自己呼叫自己
遞迴一般用在遍歷上
遞迴輕易不要用，效率很低
深淺拷貝案例
遍歷dom樹
正則表示式
141.概念：正則表示式：用於匹配規律規則的表示式，正則表示式最初是科學家對人類神經系統的工作原理的早期研究，現在在程式語言中有廣泛的應用。正則表通常被用來檢索、替換那些符合某個模式(規則)的文字。正則表示式是對字串操作的一種邏輯公式，就是用事先定義好的一些特定字元、及這些特定字元的組合，組成一個“規則字串”，這個“規則字串”用來表達對字串的一種過濾邏輯。
142.正則的作用：匹配、提取、替換
l 給定的字串是否符合正則表示式的過濾邏輯(匹配)
l 可以通過正則表示式，從字串中獲取我們想要的特定部分(提取)
l 強大的字串替換能力(替換)
143.正則特點：
l 靈活性、邏輯性和功能性非常的強
l 可以迅速地用極簡單的方式達到字串的複雜控制
l 對於剛接觸的人來說，比較晦澀難懂
144.正則的組成：
普通字元：普通數字，字母，中文，符號，特殊字元.....
145.特殊字元：
常用元字元：
\d 匹配數字、\D 匹配任意非數字
\w 字母數字或者下劃線、\W 任意非字母數字或者下劃線
\s任意空白字元、\S 任意不是空白的字元
. 除換行符以外的字元 ^ 匹配行首以誰開始 $ 匹配行尾以誰結束
限定符：
* 重複0次或者多次 + 重複1次或者多次 ？ 重複0次或者1次
{n}重複n次 {n,}重複n次或更多次 {n,m}重複n次到m次
其他：
一個字元 [ ] [^]匹配非中括號以內的內容 \轉義符
| 或者，選擇兩者中的一個。注意|將左右兩邊分為兩部分，而不管左右兩邊有多長多亂
分組()：小例子： eg：gr(a|e)y匹配gray和grey
[\u4e00-\u9fa5] 匹配漢字
在js中使用正則
146.建立正則物件：new Regex('\d', 'i');
var reg = /\d/i;
引數：i 忽略大小寫
g 全域性匹配
gi 全域性匹配+忽略大小寫
147.正則驗證:方式 正則.test（字串）-返回true或者fasle
148.正則提取:str.match()
語法:字串.match(正則物件)/返回值為陣列/技術細節
正則物件.test(str):如果分組檢測成功，
在原生的RegExp物件中將以$1、$2、$3.......等形式來儲存提取的結果
149.正則替換:str.replace(正則，替換的具體內容)
150.正則替換:返回值:一個部分或全部匹配由替代模式所取代的新的字串。
Javascript中型別轉換的情況以及結果
if中的條件會被自動轉為Boolean型別
* 會被轉為false的資料
* 會被轉為true的資料
參與+運算都會被隱式的轉為字串
* 會被轉為空字串的資料
* 會被轉為字串的資料
* 會被轉為資料型別標記的資料
參與*運算都會被隱式的轉為數字
* 會被轉為0的資料
* 會被轉為1的資料
* 會被轉為NaN的資料
== 運算子
* 為true的時候
* 為false的時候
if中的條件會被自動轉為Boolean型別

1 if(false) console.log(2333)
2 if('') console.log(2333)
3 if(null) console.log(2333)
4 if(undefined) console.log(2333)
5 if(NaN) console.log(2333)
6 if('test') console.log(2333) // 2333
7 if([]) console.log(2333) // 2333
8 if({}) console.log(2333) // 2333

參與+運算都會被隱式的轉為字串
轉換為空字串
'str-' + '' // str-
'str-' + [] // str-
b. 轉成字串的資料
'str-' + '1' // "str-1"
'str-' + 1 // "str-1"
'str-' + false // "str-false"
'str-' + true // "str-true"
'str-' + null // "str-null"
'str-' + undefined // "str-undefined"
'str-' + NaN // "str-NaN"
c.轉成資料型別標記
'str-' + {} // "str-[object Object]"
'str-' + {a:1} // "str-[object Object]"
參與*運算都會被隱式的轉為數字
會被轉為0的資料
3 * '' // 0
3 * [] // 0
3 * false // 0
會被轉為1的資料
2 * '1' // 2
2 * [1] // 2
2 * true // 2
會被轉為NaN的資料
2 * {} // NaN
2 * {a:1} // NaN
4. == 運算子
a.會被轉為true
0 == false // true
0 == '' // true
0 == '0' // true
0 == [] // true
0 == [0] // true
1 == true // true
1 == '1' // true
1 == [1] // true
[1] == true // true
[] == false // true
b.會被轉為false
0 == {} // false
0 == null // false
0 == undefined // false
0 == NaN // false
1 == {} // false
1 == null // false
1 == undefined // false
1 == NaN // false
[] == [] // false
[1] == [1] // false
[1] == {} // false
[1] == {a:1} // false
[1] == false // false
[1] == null // false
[1] == undefined // false
[1] == NaN // false
{} == {} // false
{a:1} == {a:1} // false
PS:空陣列[]，在+運算子下是轉為空字串''，在*運算子下是轉為數字0。但在if語句中，則轉為true
2.window.location用法
URL即:統一資源定位符 (Uniform Resource Locator, URL)
完整的URL由這幾個部分構成：
scheme://host:port/path?query#fragment
scheme(通訊協議):常用的http,ftp,maito等
host(主機): 伺服器(計算機)域名系統 (DNS) 主機名或 IP 地址。
port(埠號):整數，可選，省略時使用方案的預設埠，如http的預設埠為80。
path(路徑):由零或多個"/"符號隔開的字串，一般用來表示主機上的一個目錄或檔案地址。
query(查詢):可選，用於給動態網頁（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技術製作的網頁）傳遞引數，可有多個引數，用"&"符號隔開，每個引數的名和值用"="符號隔開。
fragment(資訊片斷):字串，用於指定網路資源中的片斷。例如一個網頁中有多個名詞解釋，可使用fragment直接定位到某一名詞解釋。(也稱為錨點.)
對於這樣一個URL
http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

我們可以用javascript獲得其中的各個部分
1, window.location.href
整個URl字串(在瀏覽器中就是完整的位址列)
本例返回值: http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
2,window.location.protocol
URL 的協議部分
本例返回值:http:
3,window.location.host
URL 的主機部分
本例返回值:www.x2y2.com
4,window.location.port
URL 的埠部分
如果採用預設的80埠(update:即使添加了:80)，那麼返回值並不是預設的80而是空字元
本例返回值:""
5,window.location.pathname
URL 的路徑部分(就是檔案地址)
本例返回值:/fisker/post/0703/window.location.html
6,window.location.search
查詢(引數)部分
除了給動態語言賦值以外，我們同樣可以給靜態頁面,並使用javascript來獲得相信應的引數值
本例返回值:?ver=1.0&id=6
7,window.location.hash
錨點
本例返回值:#imhere <src="http://feeds.feedburner.com/~s/fisker?i=http://www.x2y2.com/fisker/post/0703/window.location.html" type="text/javascript" charset="utf-8">
複習筆記關於建構函式和原型問題
關於建構函式的一些問題
1)函式中出現的私有變數都是把它看做普通函式執行的時候產生的，和我們的當前的例項(p1/p2)是沒有任何的關係的，也就是p1/p2並沒有num這個屬性，只有this.xxx=xxx這樣設定新增的才是我們例項的私有屬性
//2)不需要寫return，瀏覽器也會把建立的例項進行返回(瀏覽器預設返回的是一個物件資料型別)，但是如果我自己寫了呢?
//自己手動返回一個基本資料型別值：對我們建立的例項是沒有任何的影響的
//return 12;
//自己手動返回一個引用資料型別值:會把瀏覽器預設返回的例項覆蓋掉，那麼此時我們創建出來的p1/p2就不在是CreateJsPerson這個類的一個例項了
//return {};
//3)如果在建立的時候不需要給形參傳遞值,後面的小括號可以加也可以不加
//new CreateJsPerson();
//new CreateJsPerson;
//4)如何的檢測某一個例項是否屬於這個類-->instanceof
//5)hasOwnProperty:檢測某一個屬性是否為當前的物件的私有屬性(不管公有屬性是否存在，只要私有中有就返回true，沒有就返回false)
//in:用來檢測某一個屬性是否屬於這個物件 (既可以檢測私有的,也可以檢測公有的)
//檢測attr是否為obj的一個公有的屬性
function hasPubProperty(attr, obj) {
return (attr in obj) && (!obj.hasOwnProperty(attr));
}
isPrototypeOf 與 hasOwnProperty 的區別
1、isPrototypeOf
isPrototypeOf是用來判斷指定物件object1是否存在於另一個物件object2的原型鏈中，是則返回true，否則返回false。
格式如下：
object1.isPrototypeOf(object2);
object1是一個物件的例項；
object2是另一個將要檢查其原型鏈的物件。
原型鏈可以用來在同一個物件型別的不同例項之間共享功能。
如果 object2 的原型鏈中包含object1，那麼 isPrototypeOf 方法返回 true。
如果 object2 不是一個物件或者 object1 沒有出現在 object2 中的原型鏈中，isPrototypeOf 方法將返回 false。
2、hasOwnProperty
hasOwnProperty判斷一個物件是否有名稱的屬性或物件，此方法無法檢查該物件的原型鏈中是否具有該屬性，該屬性必須是物件本身的一個成員。
如果該屬性或者方法是該 物件自身定義的而不是器原型鏈中定義的 則返回true;否則返回false;
格式如下：
object.hasOwnProperty(proName);
判斷proName的名稱是不是object物件的一個屬性或物件。

原型類問題
//接下來的每一句話都是規定，不要問我為什麼
//1、所有的函式資料型別(實名函式、匿名函式、類)都天生自帶一個屬性:prototype(原型),並且這個屬性對應的屬性值是一個物件資料型別的,瀏覽器會預設的給它開闢一個堆記憶體
//函式原型的作用：儲存類中所有公有的屬性和方法

//2、在瀏覽器預設給prototype開闢的堆記憶體中有一個天生自帶的屬性constructor,儲存的值是當前函式本身
//console.log(CreateJsPerson.prototype.constructor === CreateJsPerson);//-->true

//3、每一個物件資料型別(普通物件、陣列、正則、時間、例項、函式的prototype屬性...)都有一個天生自帶的屬性:__proto__(IE瀏覽器也存在這個屬性但是給保護起來遮蔽掉了,不允許我們自己使用)
//__proto__這個屬性指向的是當前物件所屬類的原型，例如：
//console.log(p1.__proto__ === CreateJsPerson.prototype);//-->true

//4、查詢過程-->原型鏈模式
//每一個例項在使用自己的屬性和方法的時候，首先先找自己的私有屬性，私有屬性中存在就不在查找了,我們使用的就是私有的屬性和方法;私有的如果不存在，瀏覽器預設根據__proto__找所屬類prototype上的公有的屬性和方法,如果公有中存在,則使用公有的;如果公有的還沒有,則繼續同過__proto__往上找,一直找到Object.prototype為止;
//關於this的查詢問題
//1、Fn這個類中this.xxx=xxx中的this是當前Fn的一個例項
//2、Fn類中某些方法中的this(例如:sum這個公共方法中的this)
//1)首先看sum這個方法執行前有沒".","."前面是誰,那麼sum中的this就是誰
//2)執行sum中的程式碼,然後把this是誰用程式碼給描述出來
//3)按照原型的查詢機制分析結果即可
以下{}括號中的內容對應的是上面的關於this的查詢問題
{function Fn() {
//this-->f
this.index = 100;
}
Fn.prototype.sum = function () {
console.log(this.index);
};
var f = new Fn;
f.sum();//this->f
// console.log(f.index); -->100

f.__proto__.sum();//this->f.__proto__
// console.log(f.__proto__.index); -->原型上沒有index屬性，則往上一級查詢，直到找到Object的原型為止 -->undefined

Fn.prototype.sum();//this->Fn.prototype
// console.log(Fn.prototype.index); 和上面的情況一樣，是直接的查詢原型上的index -->undefined

//f.__proto__.__proto__.sum();//Uncaught TypeError: f.__proto__.__proto__.sum is not a function}

//建構函式模式和工廠模式的區別:
//一般情況下，我們如果是通過建構函式模式來建立一個類的話，我們的類名的第一個字母要大寫(這不是規範而是大家約定俗稱的一個規律)
//1)在執行的時候，我們的建構函式模式是通過 new CreateJsPerson() 來執行的-->我們把CreateJsPerson稱之為一個類，而通過類創建出來的結果(p1)就是當前類的一個例項
//2)類也是一個函式，所以也會像普通函式執行一樣:形成一個私有的所用域,形參賦值,預解釋,程式碼從上到下執行
//但是建構函式模式在程式碼執行之前，瀏覽器預設首先會建立一個物件資料型別的值(不用自己手動的進行建立了)，並且會預設的把這個物件資料型別的值進行返回(不用自己手動的return返回了)
//3)把瀏覽器預設建立的那個物件當做當前函式執行的整體(this)，然後通過this.xxx=xxx這種方式給預設建立的物件增加屬性名和屬性值
//瀏覽器預設建立的這個物件其實就是我們當前類的一個例項
//在建構函式模式建立一個類的時候，方法執行，裡面的this(this.xxx=xxx)其實就是我們當前類的一個例項-->this的第四種情況

//1)函式中出現的私有變數都是把它看做普通函式執行的時候產生的，和我們的當前的例項(p1/p2)是沒有任何的關係的，也就是p1/p2並沒有num這個屬性，只有this.xxx=xxx這樣設定新增的才是我們例項的私有屬性
//2)不需要寫return，瀏覽器也會把建立的例項進行返回(瀏覽器預設返回的是一個物件資料型別)，但是如果我自己寫了呢?
//自己手動返回一個基本資料型別值：對我們建立的例項是沒有任何的影響的
//return 12;
//自己手動返回一個引用資料型別值:會把瀏覽器預設返回的例項覆蓋掉，那麼此時我們創建出來的p1/p2就不在是CreateJsPerson這個類的一個例項了
//3)如果在建立的時候不需要給形參傳遞值,後面的小括號可以加也可以不加
//new CreateJsPerson();
//new CreateJsPerson;
//4)如何的檢測某一個例項是否屬於這個類-->instanceof
//所有的物件資料型別({}、[]、/^$/、Date還有我們的例項也是物件資料型別)都是Object這個類的一個例項 -->Object是所有物件資料型別的基類
//5)hasOwnProperty:檢測某一個屬性是否為當前的物件的私有屬性(不管公有屬性是否存在，只要私有中有就返回true，沒有就返回false)
//in:用來檢測某一個屬性是否屬於這個物件 (既可以檢測私有的,也可以檢測公有的)