学习链接：https://www.bilibili.com/video/BV1Sy4y1C7ha
JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程?
笔记涉及的是视频p135~p155的内容，涉及js的作用域、预解析和对象的知识
目录
?
1. js作用域
? ? ? ? 作用域是限定一段程序代码中的名字的可用性的代码范围，作用域目的是为了提高程序可靠性并且可以减少命名冲突；在同一个作用域内不能引起命名冲突
? ? ? ? 1.1 全局作用域
? ? ? ? ? ? ? ? 整个<script></script>标签/单独js文件
? ? ? ? 1.2 局部作用域
? ? ? ? ? ? ? ? 代码名字仅在在函数内部起效果作用
? ? ? ? 1.3 变量的作用域
- ? ? ? ? ? ? ? ? 全局变量--全局作用域下的变量
- ? ? ? ? ? ? ? ? 局部变量--函数内部声明的变量，函数的形参也是局部变量
- 注意：在函数内部没有声明直接赋值的变量也属于全局变量
? ? ? ? ?1.4 作用域链
? ? ? ? ? ? ? ? 内部函数能调用外部函数变量，用链式查找决定哪些数据能被内部函数访问，一层一层向外查找，就近原则取最近的变量。
2. js预解析
? ? ? ? 2.1 js引擎运行步骤：
- ? ? ? ? ? ? ? ? 预解析
- ? ? ? ? ? ? ? ? 代码执行
? ? ? ? ?2.2 预解析
? ? ? ? ? ? ? ? js引擎 会将js里面所有的 var 和 function 提升到当前作用域的最前面
? ? ? ? ? ? ? ?2.2.1?预解析分类
- ? ? ? ? ? ? ? ? ? ? ? ? 变量预解析（变量提升）--将所有变量声明提升到当前的作用域最前面? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 不提升赋值
- ? ? ? ? ? ? ? ? ? ? ? ? 函数预解析（函数提升）--将所有函数声明提升到当前的作用域最前面? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?不调用函数
?变量预解析例子?
例1
console.log(num);
var num = 10;
等同于
var num;//变量声明提升
console.log(num);
num = 10;//赋值没有提升，因此会报错
例2
fun();
var fun = function();{ //fun为变量表达式，不算函数
? ? ? ? ? ? ? ? console.log(22);
}
相当于
var fun;//变量预解析
fun();
fun =?function();{
? ? ? ? ? ? ? ? console.log(22);
}
?函数预解析例子?
例1
fun();
var fun = function(){//fun为变量表达式，不是函数
? ? ? ? ? ? ? ? console.log(22);
}
相当于
var fun;//变量预解析
fun();
fun = function(){
? ? ? ? ? ? ? ? console.log(22);
}
预解析综合案例?
?f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
? ? ? ? var a=b=c=9;? ? ?
????????console.log(a);
????????console.log(b);
????????console.log(c);
}
相当于
function f1(){//函数预解析
? ? ? ??//var a =?9, b = 9, c = 9;? b、c直接赋值没有var声明，看成全局变量
? ? ? ? var a;? ?//变量预解析
? ? ? ? a = b = c = 9;
????????console.log(a);
????????console.log(b);
????????console.log(c);
}
console.log(c);
console.log(b);
console.log(a);
运行结果
3. js对象
? ? ? ? 对象--一个具体的事物，一组无序的相关属性和方法的集合
? ? ? ? ?3.1 创建对象的三种方法
? ? ? ? ? ? ? ? 3.1.1利用字面量创建对象
? ? ? ? ? ? ? ? ? ? ? ? 对象字面量：花括号｛｝内包含了表达这个具体事物的属性和方法
???????????????????????? 实例：
? ? ? ? ? ? ?var obj = {
? ? ? ? ? ? ? ? ? ? ? ? ? uname : ' ', 属性名:属性值,
? ? ? ? ? ? ? ? ? ? ? ? ? age : ' ',
? ? ? ? ? ? ? ? ? ? ? ? ? sex : ' '，
? ? ? ? ? ? ? ? ? ? ? ? ? sayHi : function(){
? ? ? ? ? ? ? ? ? ? ? ? ? console.log('hi');}
????????????????};//创建对象
? ? ? ? ? ? ? ? 3.1.2利用new Object创建对象
? ? ? ? ????????var obj = new Object();
????????????????obj.uname = '张三 '; 对象.属性 = 属性值;
????????????????obj.age = 18;
????????????????obj.sayHi = function(){
? ? ? ? ????????????????console.log('hi');
???????????????}?
? ? ? ? ? ? ? ? 3.1.3利用构造函数创建对象
? ? ? ? ? ? ? ? ? ? ? ? 构造函数：将对象里面一些相同的属性和方法抽象出来封装到函数中
声明：????????function 构造函数名(形参){
? ? ? ????????????????? this.属性 = 值;
? ? ? ????????????????? this.方法 = function(){}
????????????????}
调用：? ? ? ? ?new 构造函数名(实参);
<script>
function Star(uname) {//构造函数
this.name = uname;
}
var tmt = new Star('番茄');//对象
console.log(tmt.name);
</script>?注意：
- 构造函数名字首字母要大写
- 构造函数不用return就可以返回结果
- 调用构造函数必须用new，并且同时创建了一个对象
? ? ? ? 3.2 使用对象的方法
? ? ? ? ? ? ? ? 3.2.1 方法一
????????????????????????对象名.属性名 例：obj.uname;obj.sayHi();函数必须记得带上括号
? ? ? ? ? ? ? ? 3.2.2 方法二
? ? ? ? ? ? ? ? ? ? ? ? 对象名['属性名'] 例：obj['age']
? ? ? ? 3.3 变量、属性、函数、方法的区别
? ? ? ? ? ? ? ? 3.3.1变量&属性
- ? ? ? ? ? ? ? ? ? ? ? ? 变量：单独声明，赋值；使用时直接写变量名
- ? ? ? ? ? ? ? ? ? ? ? ? 属性：在对象内不需要声明；格式：对象.属性
? ? ? ? ? ? ? ? 3.3.2 函数&方法
- ? ? ? ? ? ? ? ? ? ? ? ? 函数：单独声明和调用；格式：函数名();
- ? ? ? ? ? ? ? ? ? ? ? ? 方法：在对象内调用；格式：对象.方法();
? ? ? ? 3.4 遍历对象
? ? ? ? ? ? ? ? for(变量 in 对象)?{}
?????????????????例
? ? ? ? ? ? ? ? for(var k in obj){
? ? ? ? ? ? ? ? ? ? ? ? console.log(k);//输出得到对象obj的属性名
? ? ? ? ? ? ? ? ? ? ? ? console.log(obj[k]);//输出得到对象obj的属性
????????????????}