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).引用类型(对象、数组、函数)
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.变量计算-强制类型转换
(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){
//这里相当于obj.a === null || obj.a===undefined,简写形式
//这是jQuery源码中推荐的写法
}
4.JS中的内置函数
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.构造函数
function Foo(name,age){
this.name=name;
this.age=age;
this.class="class-1;
//return this //默认有这一行
}
var f = new Foo("小林"，20)；//创建多个对象
2.构造函数-扩展
(1).var a={}其实是var a=new Object()的语法糖。
(2).var a=[]其实是var a=new Array()的语法糖。
(3).function Foo(){....}其实是var Foo=new Fuction(...)
(4).使用instanceof判断一个函数是否是一个变量的构造函数。
3.原型规则和示例
(1).所有的引用类型（数组、对象、函数 ），都具有对象特性，即可自由扩展属性（除了"null"之外）。
var obj={};obj.a=100;
var arr=[];arr.a=100;
function fn(){} fn.a=100;
(2).所有的引用类型（数组、对象、函数 ），都有一个__proto__属性，属性值是一个普通的对象。
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
(3).所有的函数，都有一个prototype属性，属性值也是一个普通的对象。
console.log(fn.prototype)
(4).所有的引用类型（数组、对象、函数 ）,__proto__属性值指向它的构造函数的"prototype"属性值。
console.log(obj.__proto__===Object.prototype);
(5).当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找。
//构造函数
function Foo(name, age){
this.name=name;
}
Foo.prototype.alertName = function(){
alert(this.name);
}
//创建示例
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__一层一层往上，能否对应到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; //链式操作
}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.执行上下文
(1).范围:一段<script>或者一个函数。
(2).全局：变量定义、函数声明。一段<script>。
(3).函数：变量定义、函数声明、this、argument、函数
(4).函数声明和函数表达式的区别。
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要执行时才能确认值，定义时无法确认
(2).场景
1.作为构造函数执行
function Foo(name){
this.name=name;
}
var f=new Foo("小林")
2.作为对象属性执行
var obj = {
name:"A",
printName: function(){
console.log(this.name);
}
}
obj.printName()
3.作为普通函数执行
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).只有函数和全局作用域。
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)//当前作用域没有定义的变量，即“自由变量”
console.log(b)
}
4.闭包
(1).闭包的使用场景
1.函数作为返回值。
function f1(){
var a=10;
return function (){
console.log(a)//自由变量，父作用域寻找
}
}
var f =f1();
var a=2000;
f();// 10
2.函数作为函数传递。
function f1(){
var a=10;
return function (){
console.log(a)//自由变量，父作用域寻找
}
}
var f =f1();
function f2(fn){
var a=200;
fn();
}
f2(f1);
12.png
13.png
8.异步和单线程
14.png
15.png
1.何时需要异步
(1).在可能发生等待的情况。
(2).等待过程中不能像alert一样阻塞程序运行。
(3).因此，所以的'等待的情况'都需要异步。
2.异步的场景
(1).定时任务：setTimeout,setInverval。
(2).网络请求：ajax请求，动态<img>加载。
(3).事件绑定
3.同步和异步的区别是什么
(1).同步会阻塞代码执行，而异步不会。
(2).alert是同步，setTimeout是异步。
16.png
9.日期、Math、数组api、对象api
17.png
上面解答
21.png
22.png
23.png
1.日期
18.png
2.Math
(1).获取随机数Math.random()。
3.数组api
19.png
1.forEach
var arr=[1,2,3];
arr.forEach(function(item, index){
//遍历数组的所有元素
console.log(index, item);
})
2.every
var arr=[1,2,3];
var result=arr.every(function (item, index){
//用来判断所有的数组元素，都满足一个条件
if(item < 4){
return ture;
}
})
console.log(result);
3.some
var arr=[1,2,3];
var result = arr.some(function (item, index){
//用来判断所有的数组元素，只要有一个满足条件即可
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){
//通过某一个条件过滤数组
if(item >= 2){
return true;
}
})
console.log(arr2);
4.对象api
20.png
总结：
24.png
8.JS-WEB-API
25.png
26.png
1.DOM操作
(1).获取DOM节点。
(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.状态码
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.开发工具
59.png
60.png
13.模块化
61.png
62.png
63.png
64.png
65.png
66.png
67.png
68.png
69.png
14.前端运行环境
70.png
71.png
72.png
73.png
74.png
75.png
15.性能优化
76.png
77.png
16.安全性
1.XSS跨站请求攻击
2.XSRF跨站点请求伪造
