1 JavaScript 函数
1.1 JavaScript 的函数的实参和形参;
形参和实参想对应(数量可以不对应); 形参可以是设置默认值; 参数的类型不确定; 实参的值可以是字面量;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
function react ( a, b = 5 ) {
console. log ( a + b) ;
}
react ( 5 )
react ( "JavaScript" , "函数" ) ;
react ( 1 , 5 , 96 , 9 ) ;
</ script>
</ body>
</ html>
1.2 声明函数的3种方法
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
function react ( a, b ) {
console. log ( a + b) ;
}
var react1 = function ( c, d ) {
console. log ( c + d) ;
}
var react2 = new Function ( "e" , "f" , "console.log(e + f)" ) ;
react1 ( 1 , 2 ) ;
</ script>
</ body>
</ html>
1.3 return
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
function react ( a, b ) {
console. log ( a + b) ;
return a + b
}
function react1 ( a ) {
if ( a < 5 ) {
return "a点结束了"
}
console. log ( "b点结束了" )
}
console. log ( react1 ( 1 ) )
</ script>
</ body>
</ html>
1.4 变量的作用域
全局变量:挂载到window对象上的; 局部变量:函数体内部声明的变量; 函数可以使用全局变量,但是在函数内部声名的局部变量,其他变量无法使用;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var aa = 100 ;
function react1 ( a ) {
var b = 200 ;
return a + aa + b;
}
console. log ( react1 ( 1 ) )
function react2 ( c ) {
return c + b;
}
console. log ( react2 ( 1 ) )
</ script>
</ body>
</ html>
1.5 JavaScript的隐藏参数arguments
arguments 指的实参的数组; 传⼊的实参都能在函数体⾥通过arguments类数组取到;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
function react1 ( a ) {
return a + arguments[ 1 ] + arguments[ 2 ] ;
}
console. log ( react1 ( 1 , 20 , 20 ) )
</ script>
</ body>
</ html>
1.6 递归
自己调用自己: 必须设置一个中止条件不然会一直调用下去;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
function react2 ( sum ) {
sum++
console. log ( sum)
return sum < 10 ? react2 ( sum) : sum;
}
react2 ( 1 ) ;
</ script>
</ body>
</ html>
1.7 直接执行的函数
匿名; 自动执行; 执行后自动销毁; 前⾯的语句必须加分号,否则会解析错误; 格式:
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
( function ( sum ) {
console. log ( sum)
} ) ( 1 ) ;
( function ( sum ) {
console. log ( sum)
} ( 1 ) ) ;
</ script>
</ body>
</ html>
1.8 小挑战
编写⼀个函数,排列任意元素个数的数字数组,按从⼩到⼤顺序输出
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var array = [ 1 , 85 , 16 , 9 , 57 , 65 , 62 , 85 , 22 , 5 ] ;
for ( var i = 0 ; i < array. length - 1 ; i++ ) {
for ( var j = 0 ; j < array. length - i - 1 ; j++ ) {
if ( array[ j] > array[ j + 1 ] ) {
var c = array[ j] ;
array[ j] = array[ j + 1 ] ;
array[ j + 1 ] = c;
}
}
}
console. log ( array) ;
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
function mul ( a ) {
if ( a === 1 ) {
return a;
} else {
return a * mul ( a - 1 ) ;
}
}
console. log ( mul ( 5 ) ) ;
< / script>
< / body>
< / html>
2 闭包
什么是闭包:闭包就是访问另一个函数的变量的函数; 缺点:正常函数调用后,变量都会进行销毁,但是通过闭包的方式会把变量强行的保留下来,会造成内存溢出;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
function close ( ) {
var a = 5 ;
return function closeone ( ) {
a++
return a;
} ;
}
var sum = close ( ) ;
console. log ( sum ( ) ) ;
console. log ( sum ( ) ) ;
</ script>
</ body>
</ html>
3 原型及原型链;
3.1 原型
每一个构造函数都有一个prototye属性,这个属性指向了一个对象,这个对象就是原型对象,根据这个构造函数声明的对象都会继承这个原型对象的方法和属性; 构造函数有prototye属性,对象没有prototye属性,但是对象有一个隐式属性_proto_这个属性指向prototye属性,换句话说就是_proto_和prototye的值相同,但是构造函数可以修改prototye属性,对象却不能修改; 原型对象里面有一个constructor方法指向了构造函数;
3.2 原型链
原型链:当对象访问属性name 如果本地有这个属性则会直接返回,如果没有,则会去原型对象去寻找name属性,如果原型对象没有则会一直上找去直到_proto_为null;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
function Close ( ) {
this . name = "张三" ;
}
Close . prototype. name = "政帅" ;
Close . prototype. name1 = "瓜蛋" ;
Close . prototype. age = "27" ;
Close . prototype. sex = "男" ;
var clsoe1 = new Close ( ) ;
console. log ( clsoe1. name) ;
console. log ( clsoe1. name1)
console. log ( clsoe1. age)
var clsoe2 = new Close ( ) ;
console. log ( clsoe2. name1)
console. log ( clsoe2. age)
console. log ( Close . prototype. constructor === Close)
</ script>
</ body>
</ html>
3.3 instance of
用来判断对象的prototype是否出现在某个构造函数的原型链,及判断该对象是不是构造函数的实例对象;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
function ins ( ) { }
function insi ( ) { }
var one = new ins ( ) ;
var two = new insi ( ) ;
console. log ( one instanceof ins ) ;
console. log ( two instanceof ins ) ;
</ script>
</ body>
</ html>
3.4 插件化开发初体验之写⼀个插件
写⼀个对两个数字进⾏加法运算计算器
声明⼀个构造函数 将公共⽅法写在原型上 将构造函数挂载到window上 写⼀个⽴即执⾏函数
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
( function ( ) {
function Sum ( ) { }
Sum . prototype. add = function ( a, b ) {
return a + b;
}
window. Sum = Sum;
} ( ) ) ;
var adda = new Sum ( ) ;
console. log ( adda. add ( 1 , 2 ) ) ;
</ script>
</ body>
</ html>
4 ajax
4.1 JOSN
JavaScript Object Noation是一种轻量级的信息交换格式,易于人们编写和查看,也便于机器的解析; 格式:
字符串必须用双引号 键值对,用逗号隔开,最后一个值不用逗号 数组用[]; 序列化于反序列化;
序列化把json对象转化为json字符串; 反序列化把json字符串转化json对象;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var json1 = {
name : "dog" ,
age : 2 ,
type : "dog"
}
var jsonstr = JSON . stringify ( json1) ;
console. log ( jsonstr) ;
var jsonobj = JSON . parse ( jsonstr) ;
console. log ( jsonobj) ;
</ script>
</ body>
</ html>
4.2 ajax基本知识
什么是ajax:向服务器发送异步请求。 背景:没有前后端分离的时候,后端响应的是整个html; 原理;
使用XmlHttpRequest异步发送请求; 是js操作BOM ajax是IE5引入的异步请求技术; 通过js发送异步请求和接收响应,不阻塞流程;
4.3 XmlHttpRequest
XmlHttpRequest 就是xml的http请求,是浏览器的一个接口,使javascript实现了http(s)通信,ajax就是基于XmlHttpRequest 实现的,ajax的翻译就是异步的JavaScript 和 XML,传统的网页是如果需要重载内容就必须要更新整个网页,使用了ajax就可以实现异步更新网页;
4.3.1 访问的基本流程;
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta http- equiv= "X-UA-Compatible" content= "IE=edge" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< title> Document< / title>
< / head>
< body>
< script>
var Xhr = new XMLHttpRequest ( ) ;
Xhr. open ( "GET" , "https://api-v2.xdclass.net/api/category/v1/list" ) ;
console. log ( Xhr. readyState) ;
Xhr. send ( ) ;
console. log ( Xhr. readyState) ;
Xhr. timeout = 2000 ;
Xhr. onreadystatechange = function ( ) {
if ( Xhr. readyState === 4 && Xhr. status === 200 ) {
alert ( Xhr. responseText) ;
} else {
alert ( '出错了,Err:' + Xhr. status) ;
}
} ;
< / script>
< / body>
< / html>
4.3.2 设置请求头
setRequestHeader 请求头对大小写不敏感,context-type和Context-type都不会报错 setRequestHeader方法必须放在open方法之后,send方法之前; setRequestHeader对相同的键不会覆盖而进行覆盖;
< script>
var Xhr = new XMLHttpRequest ( ) ;
Xhr. open ( "GET" , "https://api-v2.xdclass.net/api/category/v1/list" ) ;
Xhr. setRequestHeader ( "context-type" , "application/json" ) ;
Xhr. send ( ) ;
console. log ( Xhr. readyState) ;
< / script>
4.3.3 建立连接
open();方法; 方法的第一个参数为请求的方法例如:get、post、head、put、delete… 第二个请求参数为请求的地址; 第三个参数为async,默认参数为true,表示异步,false表示同步; 第四个参数username请求认证的用户名; 第五个密码为userpassword 请求认证的用户名密码;
< script>
var Xhr = new XMLHttpRequest ( ) ;
Xhr. open ( "GET" , "https://api-v2.xdclass.net/api/category/v1/list" , "true" , "zhangsan" , "*****" ) ;
</ script>
4.4.4 发送请求
send 方法是向目标地址发送请求; 一般get请求send的值为null,就算有值也会被忽略; send可以发送的值有
Arraybuffer Nlob document DOMString FormatData null 如果请求头不设置context-type就会根据不同的值设置默认的 context-type;如果请求头设置context-type值则会被覆盖
Document 类型context-type的值为 text/html;charset=UTF-8;或者application/xml;charset=UTF-8; DOMString 类型context-type的值为 text/plain;charset=UTF-8; FormData 类型context-type的值为 multipart/form-data; boundary=[xxx]; 如果是其他类型则不会设置默认值;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var Xhr = new XMLHttpRequest ( ) ;
Xhr. open ( "PSOT" , "https://api-v2.xdclass.net/api/account/v1/login" ) ;
Xhr. setRequestHeader ( "content-type" , "application/json" ) ;
Xhr. setRequestHeader ( "chaset" , "utf-8" ) ;
var data = {
identifier : "zhangsan" ,
credential : "zhangsan"
} ;
Xhr. send ( fordata) ;
Xhr. onreadystatechange = function ( ) {
if ( Xhr. readyState === 4 && Xhr. status === 200 ) {
alert ( Xhr. responseText) ;
} else {
alert ( '出错了,Err:' + Xhr. status) ;
}
} ;
</ script>
</ body>
</ html>
4.4.5 监听事件
onreadystatechange事件,会监听ajax请求,每次readystate变化就会触发onreadystatechange事件; readystate共有五种状态
0 unsent 未发送,指的是创建了xmlhttprequest对象,未建立连接; 1 opened 建立了连接 但是未调用send方法; 2 headers_revieced 请求头 正在下载; 3 laoding 请求体正在下载; 4 done 请求结束;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var Xhr = new XMLHttpRequest ( ) ;
console. log ( Xhr. readyState) ;
Xhr. open ( "GET" , "https://api-v2.xdclass.net/api/account/v1/detail" ) ;
console. log ( Xhr. readyState) ;
Xhr. send ( ) ;
Xhr. onreadystatechange = function ( ) {
if ( Xhr. readyState === 1 ) {
console. log ( Xhr. readyState) ;
}
if ( Xhr. readyState === 2 ) {
console. log ( Xhr. readyState) ;
}
if ( Xhr. readyState === 3 ) {
console. log ( Xhr. readyState) ;
}
if ( Xhr. readyState === 4 ) {
console. log ( Xhr. readyState) ;
}
}
</ script>
</ body>
</ html>
4.4.6 获取响应头
xml请求中有2个获取请求头的方法:
getAllResponeHeaders获取响应header的所有的数据(这点的所有数据和我们在浏览器网络看到的数据不同,这里的所有的数据是背W3C定义的安全的数据例如:)
simple response header :Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma; Access-Control-Expose-Headers; getResponeHeader(),获取指定的数据,如果获取到被限制的字段会报错 :study.html:20 Refused to get unsafe header “Transfer-Encoding”;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var Xhr = new XMLHttpRequest ( ) ;
Xhr. open ( "GET" , "https://api-v2.xdclass.net/api/account/v1/detail" ) ;
Xhr. send ( ) ;
Xhr. onreadystatechange = function ( ) {
if ( Xhr. readyState === 4 && Xhr. status === 200 ) {
console. log ( Xhr. getAllResponseHeaders ( ) ) ;
console. log ( Xhr. getResponseHeader ( "Transfer-Encoding" ) ) ;
console. log ( Xhr. getResponseHeader ( "content-type" ) ) ;
}
}
</ script>
</ body>
</ html>
4.7.7 获取响应头以及设置响应参数的类型
XMLHttpRequest在level1(overRideMimeType)不支持把响应参数转化为二进制,所以在level2中加上了responeType()方法 responeType()可以设置的类型有:
值 类型 说明 ” “ String字符串 responeType不设置任何值 ”text“ String字符串 ”document“ document对象 文件 ”Blod“ Blod对象 ”arraybuffer“ arraybuffer对象
获取XMLHttpRequest影响的方法有三个:
Respone
当请求完成时,此属性才有正确的值; 请求未完成时,此属性的值可能是"“或者 null,具体与 xhr.responseType有关:当responseType为”“或"text"时,值为”";responseType为其他值时,值为 null; ResponeText
只有当 responseType 为"text"、""时,xhr对象上才有此属性,此时才能调用xhr.responseText,否则抛错 请求未完成、请求失败都是空字符串; ResponeXml
只有当 responseType 为"text"、“”、"document"时,xhr对象上才有此属性,此时才能调用xhr.responseXML,否则抛错 请求未完成、请求失败都是null;
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var Xhr = new XMLHttpRequest ( ) ;
Xhr. open ( "GET" , "https://api-v2.xdclass.net/api/account/v1/detail" ) ;
Xhr. send ( ) ;
Xhr. responseType = "text" ;
Xhr. onreadystatechange = function ( ) {
if ( Xhr. readyState === 4 && Xhr. status === 200 ) {
console. log ( Xhr. responseText) ;
}
}
</ script>
</ body>
</ html>
4.7.8 如何设置超时时间
timeout 设置超时时间; 必须send方法设置在之后; 同步请求时候必须设置为0
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
</ head>
< body>
< script>
var Xhr = new XMLHttpRequest ( ) ;
Xhr. open ( "GET" , "https://api-v2.xdclass.net/api/account/v1/detail" ) ;
Xhr. send ( ) ;
Xhr. responseType = "text" ;
Xhr. timeout = 10 ;
Xhr. onreadystatechange = function ( ) {
if ( Xhr. readyState === 4 && Xhr. status === 200 ) {
console. log ( Xhr. responseText) ;
}
}
</ script>
</ body>
</ html>