BOM
<!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>
<script text="javascript">
/*
BOM：
浏览器对象模型
BOM可以使我们通过S来操作浏览器
在BOM中为我们提供了一组对象,用来完成对浏览器的操作
BOM对象
Window
代表的是整个浏览器的窗口,同时window也是网页中的全局对象
Navigator
代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
一般我们只会使用userAgent来判断浏览器的信息
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
不同的浏览器会有不同的userAgent
Location
代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
如果直接将location属性修改为一个完整的路径，
或相对路径则我们页面会自动跳转到该路径,
并且会生成相应的历史记录
assign()
用来跳转到其他的页面，作用和直接修改location一样
reload()
用于重新加载当前页面,作用和刷新按钮一样
如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
replace()
可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮回退
History
代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取到具体的历史记录，
只能操作浏览器向前或向后翻页
而且该操作只在当次访问时有效
length属性
可以获取到当成访问的链接数量
back()
可以用来回退到上一个页面，作用和浏览器的回退按钮一样
forward()
可以跳转下一个页面，作用和浏览器的前进按钮一样
go()
可以用来跳转到指定的页面
它需要一个整数作为参数
1:表示向前跳转一个页面相当于forward()
2:表示向前跳转两个页面
-1表示向后跳转一个页面
-2表示向后跳转两个页面
Screen
代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，
可以通过window对象来使用，也可以直接使用
*/
console.log(window);
console.log(navigator);
console.log(location);
console.log(history);
console.log(history.length);
console.log(screen);
</script>
</head>
<body>
</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>
<script text="javascript">
window.onload = function () {
var count = document.getElementById("count");
/*
setInterval()
定时调用
可以将一个函数,每隔一段时间执行一次
参数
1.回调函数,该函数会每隔一段时间被调用一次
2.每次调用间隔的时间,单位是亳秒
clearInterval()
可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
*/
var timer = setInterval(function () {
count.innerHTML = num++;
if (num == 50) {
clearInterval(timer);
}
}, 1000);
/*
延时调用:
延时调用一个函数不马上执行,而是隔一段时间以后在执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
使用clearTimeout()来关闭一个延时调用
延时调用和定时调用实际上是可以互相代替的
*/
var timerout = setTimeout(function () {
console.log(num++);
}, 3000);
clearTimeout(timerout);
};
</script>
</head>
<body>
<h1 id="count">1</h1>
</body>
</html>
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>
<script text="javascript">
/*
JSON
JS中的对象只有JS自己认识,其他的语言都不认识
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
JSON
Javascript object Notation JS对象表示法
JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号
其他的和JS语法一致
JSON分类:
1.对象{}
2.数组[]
JSON中允许的值:
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组
将JSON字符串转换为JS中的对象
在JS中，为我们提供了一个工具类，就叫JSON
这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转化为JSON
json --> js对象
JSON.parse()
可以将以SON字符串转换为js对象
它需要一个JSON字符串作为参数,会将该字符串转换为JS对象
JS对象---> JSON
JSON.stringify ()
可以将一个JS对象转换为JSON字符串
需要一个js对象作为参数，会返回一个JSON字符串
eval()
这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，
但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患
*/
</script>
</head>
<body>
</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>
<script text="javascript">
/*
函数的prototype属性：
每个函数都有一个prototype属性，
它默认指向一个object空对象(即称为:原型对象)
(空对象:没有我们的属性)
原型对象中有一个属性constructor,它指向函数对象
给原型对象添加属性(一般都是方法)
作用:函数的所有实例对象自动拥有原型中的属性(方法)
*/
console.log(Date.prototype, typeof Date.prototype);
/*
显式原型和隐式原型：
每个函数function都有一个prototype,即显式原型(属性)
每个实例对象都有一个_proto_，可称为隐式原型(属性)
对象的隐式原型的值为其对应构造函数的显式原型的值内存结构
函数的prototype属性:
在定义函数时自动添加的，默认值是一个空object对象
对象的_proto_属性:
创建对象时自动添加的，默认值为构造函数的prototype属性值
程序员能直接操作显式原型，但不能直按操作隐式原型(ES6之前)
*/
function Fun() {
}
var fun = new Fun();
// 对象的隐式原型的值为其对应构造函数的显式原型的值内存结构
console.log(Fun.prototype === fun.__proto__);//输出 true
/*
原型链：
访问一个对象的属性时，
先在自身属性中查找，找到返回
如果没有，再沿着_proto_这条链向上查找，找到返回
如果最终没找到，返回undefined
别名:隐式原型链
作用:查找对象的属性(方法)
读取对象的属性值时:
会自动到原型链中查找
设置对象的属性值时:
不会查找原型链，如果当前对象中没有此属性，
直接添加此属性并设置其值
方法一般定义在原型中，属性一般通过构造函数定义在对象本身上
*/
// 所有函数都是Function的实例(包含Function)
console.log(Function._proto_===Function.prototype);
// object的原型对象是原型链尽头
console.log(object.prototype._proto_); // null
</script>
</head>
<body>
</body>
</html>
instanceof
<!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>
<script text="javascript">
/*
instanceof:
instanceof是如何判断的?
表达式:A instanceof B
如果B函数的显司原型对象在A对象的原型链上，返回true，否则返回false
Function是通过new自己产生的实例
*/
function Fun() {
}
var fun = new Fun();
console.log(fun instanceof Fun);//输出 true
console.log(fun instanceof Object);//输出 true
</script>
</head>
<body>
</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>
<script text="javascript">
/*
变量声明提升
通过var定义(声明)的变量，在定义语句之前就可以访问到
值: undefined
函数声明提升
通过function声明的函数，在之前就可以直接调用
值:函数定义(对象)
*/
var a = 3;
fun();//可以调用 函数声明提升
function fun(){
console.log(a);//输出 undefined 变量声明提升
};
</script>
</head>
<body>
</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>
<script text="javascript">
/*
代码分类(位置)
全局代码
函数(局部)代码
全局执行上下文
在执行全局代码前将window确定为全局执行上下文
对全局数据进行预处理
var定义的全局变量==>undefined，添加为window的属性
function声明的全局函数==>赋值(fun)，添加为window的方法
this==>赋值(window)
开始执行全局代码
函数执行上下文
在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象
对局部数据进行预处理
形参变量==>赋值(实参)==>添加为执行上下文的属性
arguments==>赋值(实参列表)，添加为执行上下文的属性
var定义的局部变量==>undefined，添加为执行上下文的属性
function声明的函数==>赋值(fun )，添加为执行上下文的方法
this==>赋值(调用函数的对象)
开始执行函数体代码
*/
//全局执行上下文
console.log(a1, window.a1)
a2()
console.log(this)
var a1 = 3
function a2() {
console.log('a2() ')
}
console.log(a1)
//函数执行上下文
function fn(a1) {
console.log(a1)//2
console.log(a2)//undefineda3
a3()//a3()
console.log(this)//window
console.log(arguments)//伪数组(2,3)
var a2 = 3
function a3() {
console.log('a3()')
}
}
fn(2, 3)
/*
执行上下文栈：
在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象
在全局执行上下文(window)确定后，将其添加到栈中(压栈)
在函数执行上下文创建后，将其添加到栈中(压栈)
在当前函数执行完后,将栈顶的对象移除(出栈)
当所有的代码执行完后，栈中只剩下window
*/
var a = 10
var bar = function (x) {
var b = 5
foo(x + b)
}
var foo = function (y) {
var c = 5
console.log(a + c + y)
}
bar(10)
</script>
</head>
<body>
</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>
<script text="javascript">
/*
作用域与作用域链
理解：
就是一块"地盘”，一个代码段所在的区域
它是静态的(相对于上下文对象)，在编写代码时就确定了
分类：
全局作用域
函数作用域
没有块作用域(ES6有了)
作用
隔离变量，不同作用域下同名变量不会有冲突
*/
var a = 10, b = 20
function fn(x) {
var a = 100,
c = 300;
console.log('fn()', a, b, c, x)
function bar(x) {
var a = 100,
d = 400
console.log('bar()', a, b, c, d, x)
}
bar(100)
bar(200)
}
fn(10)
</script>
</head>
<body>
</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>
<script text="javascript">
/*
闭包：
如何产生闭包?
当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时，
就产生了闭包
闭包到底是什么?
使用chrome调试查看
理解一:闭包是嵌套的内部函数(绝大部分人)
理解二:包含被引用变量(函数)的对象(极少数人)*注意:闭包存在于嵌套的内部函数中
产生闭包的条件?
函数嵌套
内部函数引用了外部函数的数据(变量/函数)
常见的闭包：
将函数作为另一个函数的返回值
将函数作为实参传递给另一个函数调用
闭包的作用：
使用函数内部的变量在函数执行完后，仍然存活在内存中(延长了局部变量的生命周期)
让函数外部可以操作(读写)到函数内部的数据(变量/函数)
闭包的生命周期：
产生:在嵌套内部函数定义执行完时就产生了(不是在调用)
死亡:在嵌套的内部函数成为垃圾对象时
闭包的应用：
定义JS模块
具有特定功能的js文件
将所有的数据和功能都封装在一个函数内部(私有的)
只向外暴露一个包信n个方法的对象或函数
模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能
闭包的缺点：
函数执行完后，函数内的局部变量没有释放，占用内存时间会变长
容易造成内存泄露
解决
能不用闭包就不用
及时释放
*/
function fn1() {
var a = 2
var b = 3
function fn2() { //执行函数定义 产生闭包(不用调用函数)
console.log(a)//a 闭包
}
fu2()
}
fn1()
/*
内存溢出
一种程序运行出现的错误
当程序运行需要的内存超过了剩余的内存时，就出抛出内存溢出的错误
内存泄露
占用的内存没有及时释放
内存泄露积累多了就容易导致内存溢出
常见的内存泄露:
意外的全局变量
没有及时清理的计时器或回调函数
闭包
*/
</script>
</head>
<body>
</body>
</html>
