1.知識點
1.png
2.列如
2.png
3.變量類型和計算
1.變量類型
(1).值類型（null、undefined勾怒、boolean谒拴、number串结、string）
var a=100;
var b=a;
a=200;
console.log(b); //100
(2).引用類型(對象蒿柳、數(shù)組、函數(shù))
var a={age：20}岳枷；
var b=a;
b.age=21;
console.log(b); // 21
(3).typeof運算符詳解
typeof undefined //undefined
typeof 'abc' // string
typeof 123 //number
typeof true // boolean
typeof {} // object
typeof [] // object
typeof null // object
typeof console.log // function
2.變量計算-強制類型轉(zhuǎn)換
(1).字符串拼接
var a=100+10; // 110
var b=100+'10'; // '10010'
(2).==運算符
100 == '100' // true
0 == '' // true
null == undefined // true
(3).if語句
1.var a=true;
if(a){
//....
}
2.var b=100;
if(b){
//...
}
3.var c= '';
if(c){
//..
}
(4).邏輯運算
console.log(10 && 0); // 0
console.log('' || 'abc'); // 'abc'
console.log(!window.abc); // true
3.何時使用===和==
if(obj.a == null){
//這里相當(dāng)于obj.a === null || obj.a===undefined,簡寫形式
//這是jQuery源碼中推薦的寫法
}
4.JS中的內(nèi)置函數(shù)
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
5.如何理解JSON
JSON.stringify({a:10,b:20})
JSON.parse('{"a":10,"b":20}')
4.原型和原型鏈
3.png
4.png
1.構(gòu)造函數(shù)
function Foo(name,age){
this.name=name;
this.age=age;
this.class="class-1;
//return this //默認(rèn)有這一行
}
var f = new Foo("小林"芒填，20)；//創(chuàng)建多個對象
2.構(gòu)造函數(shù)-擴展
(1).var a={}其實是var a=new Object()的語法糖空繁。
(2).var a=[]其實是var a=new Array()的語法糖殿衰。
(3).function Foo(){....}其實是var Foo=new Fuction(...)
(4).使用instanceof判斷一個函數(shù)是否是一個變量的構(gòu)造函數(shù)。
3.原型規(guī)則和示例
(1).所有的引用類型（數(shù)組盛泡、對象闷祥、函數(shù) ），都具有對象特性傲诵，即可自由擴展屬性（除了"null"之外）凯砍。
var obj={};obj.a=100;
var arr=[];arr.a=100;
function fn(){} fn.a=100;
(2).所有的引用類型（數(shù)組箱硕、對象、函數(shù) ）果覆，都有一個__proto__屬性颅痊，屬性值是一個普通的對象。
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
(3).所有的函數(shù)局待，都有一個prototype屬性，屬性值也是一個普通的對象菱属。
console.log(fn.prototype)
(4).所有的引用類型（數(shù)組钳榨、對象、函數(shù) ）,__proto__屬性值指向它的構(gòu)造函數(shù)的"prototype"屬性值纽门。
console.log(obj.__proto__===Object.prototype);
(5).當(dāng)試圖得到一個對象的某個屬性時薛耻，如果這個對象本身沒有這個屬性，那么會去它的__proto__（即它的構(gòu)造函數(shù)的prototype）中尋找赏陵。
//構(gòu)造函數(shù)
function Foo(name, age){
this.name=name;
}
Foo.prototype.alertName = function(){
alert(this.name);
}
//創(chuàng)建示例
var f=new Foo('小林');
f.printName=function(){
console.log(this.name);
}
//測試
f.printName();
f.alertName();
f.toString();//要去f.__proto__.__proto__中查找饼齿。
6.png
5.png
5.instanceof
1.f instanceof Foo的判斷邏輯是：
2.f的__proto__一層一層往上，能否對應(yīng)到Foo.prototype蝙搔。
3.再試著判斷f instanceof Object缕溉。
7.png
8.png
9.png
6.原型繼承實例
1.function Elem(id) {
this.elem = document.getElementById(id);
}
Elem.prototype.html = function (val){
var elem = this.elem;
if(val){
elem.innerHTML = val;
return this; //鏈?zhǔn)讲僮? }else {
return elem.innerHTML;
}
}
Elem.prototype.on = function (type, fn){
var elem = this.elem;
elem.addEventListener(type, fn);
}
var div1 = new Elem('box');
// console.log(div1.html());
// div1.html('<p>2222</p>');
// div1.on("click", function(){
// alert("111");
// })
div1.html('<p>2222</p>').on("click", function(){
alert("this.text()");
})
7.作用域和閉包
10.png
11.png
1.執(zhí)行上下文
(1).范圍:一段<script>或者一個函數(shù)。
(2).全局：變量定義吃型、函數(shù)聲明证鸥。一段<script>。
(3).函數(shù)：變量定義勤晚、函數(shù)聲明枉层、this、argument赐写、函數(shù)
(4).函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別鸟蜡。
console.log(a); //undefined
var a = 100;
fn('zhangsan') // 'zhangsan' 20
function fn(name) {
age=20;
console.log(name,age);
var age;
}
2.this指向
(1).this要執(zhí)行時才能確認(rèn)值，定義時無法確認(rèn)
(2).場景
1.作為構(gòu)造函數(shù)執(zhí)行
function Foo(name){
this.name=name;
}
var f=new Foo("小林")
2.作為對象屬性執(zhí)行
var obj = {
name:"A",
printName: function(){
console.log(this.name);
}
}
obj.printName()
3.作為普通函數(shù)執(zhí)行
function fn(){
console.log(this)//window
}
fn()
4.call挺邀、Apple揉忘、bind
function fn1(name, age){
alert(name);
console.log(this)//window
}
fn1.call({x:100}, "zhangsan", 20);//{x:100}this指向
fn1.call({x:100}, ["zhangsan", 20]);//{x:100}this指向
var fn2 = function(name, age){
alert(name);
console.log(this);
}.bind({y:200})
fn2('zhangsan', 20)
var a={
name: "A",
fn: function(){
console.log(this.name);
}
}
a.fn() // this===a
a.fn.call({name:'B'}) // this ==={name: 'B'}
var fn1 = a.fn;
fn1 // this===window
3.作用域
(1).沒有塊級作用域。
if(true){
var name="zhangsan";
}
console.log(name);
(2).只有函數(shù)和全局作用域悠夯。
var a=100;
function fn(){
var a=200;
console.log('fn', a);
}
console.log('global', a);
fn();
(3).作用域鏈
var a=100;
function fn(){
var b=200;
console.log(a)//當(dāng)前作用域沒有定義的變量癌淮，即“自由變量”
console.log(b)
}
4.閉包
(1).閉包的使用場景
1.函數(shù)作為返回值。
function f1(){
var a=10;
return function (){
console.log(a)//自由變量沦补，父作用域?qū)ふ? }
}
var f =f1();
var a=2000;
f();// 10
2.函數(shù)作為函數(shù)傳遞乳蓄。
function f1(){
var a=10;
return function (){
console.log(a)//自由變量，父作用域?qū)ふ? }
}
var f =f1();
function f2(fn){
var a=200;
fn();
}
f2(f1);
12.png
13.png
8.異步和單線程
14.png
15.png
1.何時需要異步
(1).在可能發(fā)生等待的情況夕膀。
(2).等待過程中不能像alert一樣阻塞程序運行虚倒。
(3).因此美侦，所以的'等待的情況'都需要異步。
2.異步的場景
(1).定時任務(wù)：setTimeout,setInverval魂奥。
(2).網(wǎng)絡(luò)請求：ajax請求菠剩，動態(tài)<img>加載。
(3).事件綁定
3.同步和異步的區(qū)別是什么
(1).同步會阻塞代碼執(zhí)行耻煤，而異步不會具壮。
(2).alert是同步，setTimeout是異步哈蝇。
16.png
9.日期棺妓、Math、數(shù)組api炮赦、對象api
17.png
上面解答
21.png
22.png
23.png
1.日期
18.png
2.Math
(1).獲取隨機數(shù)Math.random()怜跑。
3.數(shù)組api
19.png
1.forEach
var arr=[1,2,3];
arr.forEach(function(item, index){
//遍歷數(shù)組的所有元素
console.log(index, item);
})
2.every
var arr=[1,2,3];
var result=arr.every(function (item, index){
//用來判斷所有的數(shù)組元素，都滿足一個條件
if(item < 4){
return ture;
}
})
console.log(result);
3.some
var arr=[1,2,3];
var result = arr.some(function (item, index){
//用來判斷所有的數(shù)組元素吠勘，只要有一個滿足條件即可
if(item < 2){
return ture
}
})
console.log(result);
4.sort
var arr=[1,4,2,3,5];
var arr2 = arr.sort(function(a, b){
//從小到大排序
return a-b;
//從大到小排序
// return b-a
})
console.log(arr2);
5.map
var arr=[1,2,3,4];
var arr2 = arr.map(function(item, index){
//將元素重新組裝性芬，并返回
return '<b>'+item+'</b>';
})
console.log(arr2);
6.filter
var arr=[1,2,3];
var arr2=arr.filter(function(item, index){
//通過某一個條件過濾數(shù)組
if(item >= 2){
return true;
}
})
console.log(arr2);
4.對象api
20.png
總結(jié)：
24.png
8.JS-WEB-API
25.png
26.png
1.DOM操作
(1).獲取DOM節(jié)點。
(2). ()()()
27.png
28.png
29.png
30.png
31.png
32.png
33.png
34.png
9.BOM
35.png
36.png
37.png
38.png
10.事件
39.png
40.png
10.Ajax交互
41.png
42.png
43.png
1.狀態(tài)碼
44.png
45.png
46.png
47.png
48.png
49.png
50.png
51.png
52.png
53.png
54.png
11.存儲
55.png
56.png
57.png
58.png
12.開發(fā)工具
59.png
60.png
13.模塊化
61.png
62.png
63.png
64.png
65.png
66.png
67.png
68.png
69.png
14.前端運行環(huán)境
70.png
71.png
72.png
73.png
74.png
75.png
15.性能優(yōu)化
76.png
77.png
16.安全性
1.XSS跨站請求攻擊
2.XSRF跨站點請求偽造
