长篇总结之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()以毫秒数设置日期，会改变整个日期。

错误处理

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="弹出" οnclick='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.οnclick=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. 所有变量都在闭包里保证了隐私性和私有性

后记

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

推荐文章：

前端面试必备ES6全方位总结

考前复习必备MySQL数据库（关系型数据库管理系统）