长篇总结之JavaScript，巩固前端基础

你们好，我是魔王哪吒，话很少说，今天带来的是一篇《长篇总结之JavaScript，巩固前端基础》文章，欢迎你们喜欢。
复制代码

前言

什么是JavaScript

JavaScript是一种基于对象和事件驱动的客户端脚本语言，最初是为了检验HTML表单输入的正确性，起源于Netscape公司的LiveScript语言。

了解JavaScript的发展历史

liveScript ==> javaScript => ECMAscript

关系是：liveScript是javaScript的一个曾用名，ECMAscript: 定义了javascript的语法规范，描述了语言的基本语法和数据类型。

了解JavaScript的组成

JavaScript是由ECMAScript语言，Browser Objects(DOM,BOM)组成。

1. 语法：

学习js的注解和分号

//单行注解

/**/多行注解

语句结束使用分号，若是省略，则由接下肯定语句的结尾。

学习JavaScript的语法

ECMAScript中的一切是区分大小写的，如变量，函数名，操做符。

学习标识符

什么是标识符，变量，函数，属性的名称，或者是函数的参数。

标识符的命名规则

1. 由字母，数字，下划线或者是美圆符号组成。
2. 不能以数字开头。
3. 不能使用关键字，保留字等做为标识符。

学习什么是变量

什么是变量，ECMAScript的变量是松散类型的。松散类型是指能够用来保存任何类型的数据。

每一个变量仅仅只是用于保存值的占位符而已。

学习变量的声明和赋值

变量的声明：变量的声明使用var操做符，语法：var变量名。

变量的赋值：

1. 声明的同时赋值，var 变量名=值
2. 先声明后赋值，变量名 = 值

一次声明多个变量，用逗号隔开。

注意，省略var声明的变量是全局变量，不推荐省略var操做符来定义全局变量。

掌握JavaScript的数据类型

ECMAScript中分：简单数据类型和复杂数据类型。

简单数据类型也称为基本数据类型，注意，在ES6中新增了symbol数据类型。

基本数据类型5种：

undefined, null, boolean, number, string

复杂数据类型分：object

学习typeof操做符

typeof是用来检测变量的类型。

语法结构，typeof 变量或者是typeof(变量)

返回值，是string类型，或者是number,boolean,object,function,undefined等。

学习Undefined

undefined类型只有一个值，便是特殊的undefined。

说明：通常而言，不存在须要显式地把一个变量设置为undefined值的状况。

学习null

null值表示一个空对象指针；若是定义的变量准备在未来用于保存对象，那么最好将变量初始化为null而不是其余值。

undefined值是派生自null值的，因此undefined==null的返回结果为true。

学习number知识点

number:表示整数和浮点数。

NaN是（not a number）是一个特殊的数值，表示非数字。

任何涉及NaN的操做，都会返回NaN。

NaN与任何值都不相等，包括NaN自己。

学习isNaN知识点

isNaN(n)表示检测n是否为“非数值”。返回结果为boolean。

说明:isNaN()对接收的数值，先尝试转换为数值，再检测是否为非数值。

数值转换

1. Number()
2. parseInt()
3. parseFloat()

Number()能够用于任何数据类型，parseInt()和parseFloat()用于把字符串转成数值。

parseInt()是会忽略字符串前面的空格，直至找到第一个非空格字符。

parseInt()转换空字符串返回NaN。

parseInt()这个函数提供第二个参数，转换时使用的基数。

parseFloat()从第一个字符开始解析每一个字符，直至碰见一个无效的浮点数字符为止。

除了第一个小数点有效外，parseFloat()与parseInt()的第二个区别在于它始终都会忽略前导的零。

学习Striing

String类型用于表示由零或多个16位Unicode字符组成的字符序列。

学习字符串转换

1. String()
2. toString()

str.toString()将str转换为字符串。使用String()函数，可以将任何类型的值转换为字符串。

学习Boolean

用于表示真假的类型，便是true表示真，false表示假。

学习类型转换

除了0以外的全部数字，转换为布尔型都为true。

除了“ ”以外的全部字符，转换为布尔型都为true。

null和undefined转换为布尔型为false。

算数操做符

1. 什么是表达式
2. JavaScript操做符的分类
3. 学习算数操做符

表达式是将同类型的数据，用运算符号按必定的规则链接起来的，有意义的式子。

操做符的分类

1. 算数操做符
2. 逻辑操做符
3. 赋值操做符
4. 比较操做符
5. 三元操做符

递增

++a与a++都对a进行递增的操做。

区别：

++a先返回递增以后的a的值，a++先返回a的原值，再返回递增以后的值。

递减同理。

1. 赋值操做符
2. 比较操做符
3. 三元操做符

三元操做符

语法：条件？执行代码1：执行代码2

逻辑操做符

逻辑与&&

若是第一个操做数隐式类型转换后为true，那么返回第一个操做数。

若是第一个操做数隐式类型转换后为false，那么返回第二个操做数。

若是，只有有一个操做数为null,NaN,undefined，其中一个，就会返回null,NaN,undefined。

逻辑或与逻辑非

||或,只要有一个条件成立，返回true

!非，不管操做数是什么数据类型，逻辑非都会返回一个布尔值。

流程控制语句

1. 学习掌握if，prompt()，alert()

alert()，弹出警告对话框

if语句

if(condition){
    statement1;
}else{
    statement2;
}
复制代码

语法：prompt()

弹出输入框，有肯定和取消。

var age = prompt("请输入您的年龄")
复制代码

NaN和任何内容都不相等，包括它自己

document.wirte()，星期的获取方法，掌握switch

语法：new Date().getDay()

获取星期，返回值，number(0-6)

var week = new Date().getDay();
console.log(week);
复制代码

多条件可使用switch语句

语法：

switch(expression) {
    case value: statement
    break;
    case value: statement
    break;
    ...
    defalut: statement
}
复制代码

向浏览器输出内容：document.write("内容")

JavaScript中的循环语句

1. for
2. for-in
3. while
4. do...while

语法：

while(条件){
    执行的代码;
}
复制代码

语法：

do{
    须要执行的代码
}while(条件)
复制代码

循环至少要被执行一次。

break语句和continue语句

break当即退出循环

continue结束本次循环，继续开始下一次循环

JavaScript中的函数

1. 做用
2. 定义
3. 调用

函数的做用就是经过函数能够封装任意多条语句，能够在任何地方，任什么时候候调用执行。

函数是如何定义的，使用function声明。

函数名属于标识符。

<script>
// 声明一个函数
function myFun(){
    alert("我是一个函数");
}
// 函数的调用
myFun();
</script>
复制代码

函数的返回值

声明一个带有参数的函数：

function add(num1,num2){
    var sum = sum1+sum2;
    return sum;
}

console.log(add(2,3));
复制代码

函数会在执行完return语句以后中止并当即退出，return语句也能够不带有任何返回值，用于提早中止函数执行又不须要返回值的状况。

掌握arguments

在ECMAScript中的参数在内部用一个数组来表示，在函数体内经过arguments对象来访问这个数组参数。

内置对象

对象：字符串，函数，数组

内置对象就是浏览器本身封装好的对象。

1. Array
2. String
3. Math
4. Date

数组是用来存储一组数据的，如何建立数组，数组元素的读和写，数组的length属性。

建立数组：使用Array构造函数，new Array()，使用字面量表示法。

数组的栈方法

1. push()，把参数添加到数组的最后。
2. unshift()，把参数添加到数组的前面。
3. pop()，删除最后一个元素，返回被删除的那个元素。
4. shift()删除第一个元素，返回被删除的那个元素。

join方法，语法：arrayObject.join(separator)，功能是用于把数组中的全部元素放入一个字符串，返回的值是字符串。

reverse()方法，语法：arrayObject.reverse()，功能是用于颠倒数组中元素的顺序，返回值为数组。

sort()方法，语法：arrayObject.sort(sortby)，功能是用于对数组的元素进行排序，返回值为数组。-按照字符串比较的。

代码：

arr.sort(function(a,b){return b-a});
复制代码

concat()方法，是用于链接两个或者多个数组，返回值为数组。

arr3 = arr1.concat(arr2);
复制代码

slice()截取，从已有的数组中返回选定的元素。

语法：arrayObject.slice(start,end)

splice()方法-删除-插入-替换

删除，语法：arrayObject.splice(index,count)，功能：删除从index处开始的零个或多个元素。返回值为含有被删除的元素的数组。

若是count为0，不删除任何值，若是count不设置，删除从index开始的全部值。

插入，语法：arrayObject.splice(index,0,item1,...itemx)，功能为在指定位置插入值。

替换：语法：arrayObject.splice(index,count,itemq,...itemx)，功能，在指定位置插入值，同时删除任意数量的项。

index为起始位置，count为要删除的项数，item1...itemx为要插入的项。

位置-indexOf和lastIndexOf

indexOf()，语法，arrayObject.indexOf(searchvalue,startIndex)，功能，从数组的开头（位置为0）开始向后查找。

返回值为number，没有找到的话就是返回-1，查找到返回在数组中的位置。

lastIndexOf()，语法：arrayObject.lastIndexOf(searchvalue,startIndex)，功能是从数组的末尾开始向前查找。

String字符串的方法：

1. charAt()
2. charCodeAt()
3. indexOf()
4. lastIndexOf()

charAt()与charCodeAt()的区别

语法：stringObject.charAt(index)，功能返回stringObject中的index位置的字符。

语法：stringObject.charCodeAt(index)，功能返回stringObject中的index位置字符的字符编码。

字符串的截取

字符串对象的截取：

1. slice()
2. substring()
3. substr()

数组对象也有slice()的语法

对于字符串的截取：

语法：stringObject.slice(start,end)

功能，截取子字符串。

参数说明：

1. start为指定字符串的开始位置。
2. end为表示字符串到哪里结束，end自己不在截取范围以内。

substring()

substring()语法，主要区别是这个当参数为负数时，自动转换为0。

substring()会将小的数看成开始位置，把较大的数看成结束位置。

substr()，语法：stringObject.substr(start, len)

功能是截取字符串。

start为指定字符串开始的位置，len为表示截取的字符总数，省略时截取到字符串的末尾。

当start为负数时，会将传入的负值与字符串的长度相加。而len为负值时，返回字符串。

代码：

字符串长度为11

str.substring(6,9);
str.substr(6,3);
str.substr(-5,4); // (6,4)
str.substr(3,-4);
复制代码

获取扩展名

var url="http://xxx/index.txt";
function getFileFormat(url) {
    var pos = url.lastIndexOf(".");
    return url.substr(pos); // .txt
}
var formatName = getFileFormat(url);
复制代码

split()

语法：stringObject.split(separator)。

功能，把一个字符串分割成字符串数组。返回值为array。

separator为分隔符。

replace()替换

语法：stringObject.replace(regexp/substr,replacement)

功能：在字符串中用一些字符替换另外一些字符，或替换一个与正则表达式匹配的子串。返回值为String。

toUpperCase()和toLowerCase()

语法：stringObject.toUpperCase()，把字符串转换为大写。

语法：stringObject.toLowerCase()，把字符串转换为小写。

str.charAt(6).toUpperCase();
复制代码

将每个单词的首字母转换为大写，链接剩余的字符

var newStr = word.charAt(0).toUpperCase()+word.substr(1);
复制代码

数学对象

1. min()
2. max()
3. ceil()，向上取整。
4. floor()，向下取整。
5. round()
6. abs()

取整，ceil()，floor()

Math.ceil()语法：Math.ceil(num)，功能为向上取整，即返回大于num的最小整数。

Math.floor(num)，向下取整，返回num的整数部分。

Math.round()语法，功能是将数值四舍五入为最接近的整数。

绝对值Math.abs()

功能是返回num的绝对值，语法：Math.abs(num)，返回值为Number。

random()方法-随机数

封装一个求n到m之间的随机整数的函数。

random=Math.floor(Math.random()*(m-n+1)+n);

Math.random()语法，是返回大于等于0小于1的随机数。

date对象

new Date()为建立一个日期时间对象。不传参，返回当前的日期时间对象。

经常使用的一些方法

1. getFullYear()返回4位数的年份。
2. getMonth()返回日期中的月份，返回值为0-11。
3. getDate()返回月份中的天数。
4. getDay()返回星期，返回值为0-6。
5. getHours()返回小时。
6. getMinutes()返回分。
7. getSeconds()返回秒。
8. getTime()返回表示日期的毫秒数。

代码：

var today = new Date(),
year = today.getFullYear(),
month = today.getMonth()+1,
date = today.getDate(),
week = today.getDay(), // 0-6
hours = today.getHours(),
minutes = today.getMinutes(),
seconds = today.getSeconds(),
复制代码

设置方法

1. setFullYear(year)设置4位数。
2. setMonth(mon)设置日期中的月份。
3. setDate()设置日期。
4. setHours()设置小时。
5. setMinutes()设置分。
6. setSeconds()设置秒。
7. setTime()以毫秒数设置日期，会改变整个日期。

错误处理

1. Chrome DevTools的基本使用

语法错误：不符合js语法的错误。

运行时错误，代码没有语法错误，可是在运行时发生错误。

如何区分语法错误与运行时错误

1. 语法错误是不可能运行成功的。
2. 运行时错误是有可能运行成功的。

逻辑错误

什么是逻辑错误？就是指计算结果很想象的不同。

代码：

function foo() {
    try {
        throw new Error();
    }catch(e){
        return 1;
    }finally{
        return 2;
    }
}
复制代码

DOM节点操做

DOM操做，添加节点，删除节点，修改节点，查找节点。

DOM document(文档) object(对象) model(模型)

建立节点

document.write()建立节点

create建立方法：

document.createElement()

document.createTextNode()

document.createDocumentFragment()

document.createComment()

代码create建立节点：

myReady(function(){
    var ul = document.getElementById("myList");
    var li = document.createElement("li");
    ul.appendChild(li);
});

<ul id="myList"></ul>
复制代码

建立节点的高效方法：

outerText，innerText

innerHTML,outerHTML

节点遍历

documentElement属性可返回文档的根节点

tagName属性返回元素的标签名

类数组对象NodeList

类数组对象HTMLCollection

• Ele.getElementsByTagName()
• document.scripts
• document.links
• document.images
• document.forms
• tr.cells
• select.options

示例：

myReady(function(){
    var scripts = document.scripts;
    var links = document.links;
    var cells = document.getElementById("tr").cells;
    var imgs = document.images;
    var forms = document.forms;
    var options = document.getElementById("select").options;
    var ps = document.getElementsByTagName("p");
}
复制代码

类数组对象NamedNodeMap

• Ele.attributes

类数组对象的动态性

三个集合NodeList，HTMLCollection，NamedNodeMap都是动态的。

节点查找

1. getElementById()
2. getElementByName()
3. getElementByTagName()
4. getElementByClassName()
5. querySelector()
6. querySelectorAll()

获取元素的方式

• document.getElementById()

1. 根据ID获取元素
2. 返回一个元素
3. 对ID区分大小写(IE8和IE8以上)

• document.getElementsByClassName()

1. 根据class名获取元素
2. 返回是一个伪数组
3. IE8和IE8如下不支持

• document.getElementsByTagName()

1. 根据标签名获取元素
2. 返回一个伪数组
3. 兼容很好

• document.getElementsByName()

1. 根据name名获取，通常应用于表单
2. 返回伪数组
3. 只针对对name属性有效的标签生效。

伪数组

1. 必须是对象
2. 必须有length属性
3. 存放内容必须以索引+内容
4. 有数组的一些基本特性，可是不能使用数组的方法。

获取元素属性

ele.setAttribute("属性名","属性值")
ele.getAttribute("属性名")
ele.removeAttribute("属性名")
ele.dataset.prop="值"
复制代码

dom.style.prop

1. 可读写行间样式
2. 写入的值必须是字符串格式

window.getComputeStyle(ele,null)

1. null的地方能够存放伪类
2. 返回的都是绝对值
3. 是只读的，不可修改

ele.currentStyle

1. 是只读的，不可修改
2. 返回的是通过转换的绝对值
3. IE独有的属性

ele.id ele.title

1. 获取样式：ele.style.prop--效率低，维护不方便
2. ele.className---维护方便

获取元素的内容

innerHTML:

1. 在赋值的时候：标签会被解析成标签，页面中不会输出
2. 在提取内容时：标签会一并被提取

innerText:

1. 在赋值的时候：标签会被解析成文本，在页面中输出
2. 在提取内容时：标签不会并被提取，只提取文本内容

value:

使用于表单

offset系列属性

滚动条滚动的距离：

window.pageYOffset(ie9如下不支持)
document.body.scrollTop
document.documentElement.scrollTop;
复制代码

可视窗口尺寸：

window.innerWidth(IE8如下不兼容)
document.documentElement.clientWidth
document.body.clientWidth(怪异模式)

判断怪异模型的方法
    document.compatMode
复制代码

滚动到指定位置

scroll(x,y)   scrollTo(x,y)  scrollBy(x,y);  
复制代码

节点查找querySelector()和querySelectorAll()

querySelector()返回指定css选择器的一个元素

querySelectorAll()返回指定css选择器的一组元素

操做节点

1. appendChild()
2. insertBefore()
3. replaceChild()
4. cloneNode()
5. normalize()
6. splitText()

appendChild()为指定元素节点的最后一个子节点以后添加节点，该方法返回新的子节点。

insertBefore()在指定的已有子节点以前插入新的子节点。

replaceChild()该方法用于新节点替换某个子节点。返回被替换的节点。

cloneNode()建立节点的拷贝，并返回该副本。

var myUrl = document.getElementById("myUrl");
var newNode = myUrl.cloneNode(true); // 深度，有其子节点，默认为false，只有父节点
复制代码

normalize()可以合并相邻的Text节点。

代码：

myReady(function(){
    var div = document.createElement("div");
    var textNode = document.createTextNode("dom");
    div.appendChild(textNode);
    
    var textNode2 = document.createTextNode("web");
    div.appendChild(textNode2);
    document.body.appendChild(div);
    
    console.log(div.childNodes.length);
    div.normalize();
    console.log(div.childNode);
    console.log(div.firstChild.nodeValue);
}
复制代码

splitText()按照指定的位置把文本节点分割为两个节点。

删除节点方法

1. removeChild()
2. removeNode()
3. innerHTML
4. deleteContents()
5. textContent

removeChild()删除某个节点中指定的子节点。

removeChild()必须有参数

myReady(function(){
    var myUrl = document.getElementById("myUrl");
    console.log(myUrl.childNodes.length);
    
    var secondChild = myUrl.removeChild(myUrl.childNode[1]);
    console.log(secondChild);
    console.log(myUrl.childNodes.length);
}
复制代码

removeNode()

1. ie的私有实现
2. 将目标节点从文档删除，返回目标节点
3. 参数是布尔值，默认值为false

removeChild()和innerHTML比较

HTML DOM removeChild() 方法

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
复制代码

移除前:

Coffee
Tea
Milk
复制代码

移除后:

Tea
Milk
复制代码

浏览器支持 Internet ExplorerFirefoxOperaGoogle ChromeSafari

全部主要浏览器都支持 removeChild 方法

语法node.removeChild(node)

建立节点，查找节点，操做节点，删除节点

DOM属性

示例：

<div
id="div0"
class="active"
style=""
url=""
xxx=""></div>
复制代码

属性分：property固有属性和attribute自定义属性

1. getNamedItem()
2. removeNamedItem()
3. setNamedItem()

示例：

myReady(function(){
    var inputs = document.querySelectorAll("input”);
    inputs[0].checked = true;
}
<input type="checkbox">1
<input type="checkbox" checked="checked">2
<input type="checkbox" checked>3
复制代码

性别:
男 女

示例：

性别:<br/>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
复制代码

你去过的城市：
北京 上海

示例：

你去过的城市：<br/>
<select name="city" id="city">
 <option value="北京">北京</option>
 <option value="上海">上海</option>
</select>
复制代码

你去过的城市：
北京 上海 纽约

示例：

你去过的城市：<br/>
<select name="city" id="city" multiple="multiple">
 <option value="北京">北京</option>
 <option value="上海" selected>上海</option>
 <option value="纽约">纽约</option>
</select>
复制代码

常见的字符串属性

前端

示例：

<p style="text-align:center" title="前端">前端</p>
复制代码

事件

什么是事件？是文档或浏览器窗口发生的一些交互瞬间。

事件方法：

1. onload页面加载时触发
2. onclick鼠标点击时触发
3. onmouseover鼠标滑过期触发
4. onmouseout鼠标离开时触发
5. onfoucs获取焦点时触发
6. onblur失去焦点时触发
7. onchange域的内容改变时发生

HTML事件

示例：

<input type="button" value="弹出" onclick='alert("我是按钮")'>
复制代码

绑定事件

绑定事件的方法：

1.onclick:

1. 一个元素上只能绑定一个
2. this指向dom元素自己

2.obj.addEventListener(type,fn,false);

• IE9如下不兼容
• 能够为一个元素绑定多个事件
• this指向dom元素自己

3.obj.attchEvent("on"+type,fn);

• IE独有
• 能够为一个元素绑定多个事件
• this指向window

1. onsubmit表单中的确认按钮被点击时发生
2. onmousedown鼠标按钮在元素上按下时触发
3. onmousemove在鼠标指针移动时发生
4. onmouseup在元素上松开鼠标按钮时触发
5. onresize当调整浏览器窗口的大小时触发
6. onscroll拖动滚动条滚动时触发

键盘事件与keyCode属性

onkeydown在用户按下一个键盘按键时发生

onkeypress在按下键盘按键时发生

onkeyup在键盘按键被松开时发生

keyCode返回onkeypress,onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码。

当用户与web页面进行某些交互时，解释器就会建立响应的event对象以描述事件信息。

事件句柄，称事件处理函数，事件监听函数，指用于响应某个事件而调用的函数。

事件的解绑

移除事件，removeEventListener()

语法：element.removeEventListener(event,function,useCapture)，功能，移除addEventListener()方法添加的事件句柄。

示例：

var btn2 = document.getElementById("btn2");
btn2.addEventListener('click',function(){
    alert('btn2');
},false);

// 事件解绑
btn2.removeEventListener('click',function(){
    alert('btn2');
});
复制代码

事件解绑成功的主要缘由在保存addxx和removexx里面的参数相同。

ie事件流（ie事件处理程序）

添加事件：attachEvent()

语法：element.attachEvent(event,function)

功能是用于向指定元素添加事件句柄

移除事件

detachEvent()

语法：element.detachEvent(event,function)

功能是移除attachEvent()方法添加的事件句柄。

事件委托和事件冒泡

事件周期：事件捕获（事件对象沿dom树向下传播），目标触发(运行事件监听函数)，事件冒泡（事件沿着dom树向上传播）。

事件冒泡和事件捕获

示例：

// 事件冒泡
document.getElementById('parent').addEventListener("click",function(e){
  alert("parent事件被触发"+this.id);  
})

document.getElementById("child").addEventListener("click",ffunction(e){
  alert("child事件被触发"+this.id);  
})
复制代码

事件委托的原理就是事件冒泡

event对象属性与方法

type事件的类型，srcElement/target事件源，就是发生事件的元素。

阻止默认行为

var link = document.getElementById("mylink");
link.onClick = function(event){
    event.preventDefault();
}
复制代码

取消事件捕获或者冒泡

var btn = document.getElementById("myBtn");
btn.onclick=function(event){
    alert("Click");
    event.stopPropagation();
}
document.body.onclick = function(event){
    alert("Body clicked");
}
复制代码

target点击谁谁就是target，事件源

currentTarget事件绑定在谁身上，就指向谁

clientY就是指浏览器顶部底边到鼠标的位置

pageY就是指浏览器顶部底边到鼠标的位置

screenY就是指屏幕顶部到鼠标位置

event对象中的属性和方法

• srcElement/target事件源，就是发生事件的元素。
• cancelBubble布尔属性，设置为true时，将中止事件进一步起泡到包容层次的元素。
• returnValue布尔属性，设置为false时能够组织浏览器执行默认的事件动做。

event对象跨浏览器兼容

示例：

var EventUtil = {
    addHandler: function(element, type, handler) {
        
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        },
        removeHandler: function(element,type,handler){
            
        },
        stopPropagation: function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    }
}
复制代码

Event addEventListener attacEvent

示例：

var EventUtil = {
    addHandler: function(element,type,handler){
        
    },
    removeHandler: function(element,type,handler){
        
    }
}
复制代码

什么是bom

Bom浏览器对象模型。

Window 对象

Window 对象表示浏览器中打开的窗口。

若是文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档建立一个 window 对象，并为每一个框架建立一个额外的 window 对象。

全局变量

window声明和关键字声明

window.变量名=值和var 变量名=值

window对象的方法

语法：window.alert("content")

语法：window.confirm("message")

Window	对象属性
属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用
frames	返回窗口中全部命名的框架。该集合是 Window 对象的数组，每一个 Window 对象在窗口中含有一个框架。
history	对 History 对象的只读引用。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
localStorage	在浏览器中存储 key/value 对。没有过时时间。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
navigator	对 Navigator 对象的只读引用

定时器

超时调用，间歇调用

语法：setTimeout(code,millisec)

语法：setInterval(code,millisec)

示例：

var intervalId = setInterval(function(){
    console.log("web");
},1000);
setTimeout(function(){
    clearInterval(intervalId);
},10000);
复制代码

函数能够访问由函数内部定义的变量，如：

实例

function myFunction() {
    var a = 1;
    return a * a;
}
复制代码

函数也能够访问函数外部定义的变量，如：

实例

var a = 1;
function myFunction() {
    return a * a;
}
复制代码

location对象

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。

location.href返回当前加载页面的完整的url。

location.host返回服务器名称和端口号。

location.hostname返回不带端口号的服务器名称。

location.pathname返回url中的目录和文件名。

location.port返回url中指定的端口号，若是没有，返回空字符串。

location.protocol返回页面使用的协议。

location.search返回url的查询字符串。

改变浏览器位置的方法：

location.href属性。

location对象其余属性也是能够改变url

location.hash和location.search

location.replace()是从新定向url

location.reload()从新加载当前显示的页面

history对象保存了用户在浏览器中访问页面的历史记录

history.back()回到历史记录的上一步

示例：

var btn = document.getElementById("btn");
// 点击btn按钮时回到历史记录的上一步
btn.onclick = function(){
    //history.back();
    history.go(-1);
}
复制代码

history.forward()历史记录的下一步

history.go(-n)回到历史记录的前n步

history.go(n)回到历史记录的后n步

screen对象属性

screen.availWidth返回可用的屏幕宽度

screen.availHeight返回可用的屏幕高度

获取窗口文档显示区的高度和宽度，可使用innerHeight和innerWidth

navigator对象

示例：

// 检测浏览器类型
function getBrowser(){
    // 获取userAgent属性
    var explorer = navigator.userAgent.toLowerCase(),browser;
    if(explorer.indexOf("mise")>-1){
        browser = "IE";
    }else if(explorer.indexOf("chrome")>-1){
        browser = "chrome";
    }else if(explorer.indexOf("opera")>-1){
        browser = "opera";
    }else if(explorer.indexOf("safari")>-1){
        browser = "safari"
    }
    return browser;
}
复制代码

闭包

什么是执行上下文环境？

console.log(a);  // undefined
console.log(this)； //window
b(); // b() is not a function 
c(); // "c"
var a = "a";
var b = function () {
  var b = "b"
  console.log(b);
}  

function c () {
  var c = "c"
  console.log(c);
}
复制代码

上下文栈就是一个存储执行上下文的栈，栈中只有一个上下文是处于活动状态的，执行全局代码时就会有一个全局上下文被压入栈，调用一个函数时就会产生一个函数的上下文环境，而后将其压入栈

js的做用域 - 词法做用域

js的做用域是词法做用域(静态做用域)，实际上大部分的语言做用域都是词法做用域，与词法做用域相对的是动态做用域

什么是闭包

闭包是指有权访问另外一个函数做用域中变量的函数。

闭包的使用

做用域链指向的变量对象

闭包的造成及优缺点

造成闭包即要把一个函数当成值传递，该函数还引用另外一个函数的做用域链使得被引用的函数不能被回收

优势：

1. 闭包里的变量不会污染全局，由于变量被封在闭包里
2. 全部变量都在闭包里保证了隐私性和私有性

后记

扫码关注公众号，订阅更多精彩内容。