前端入门系列--JavaScript（3）

1、作用域相关

ES6前的作用域分为以下两种：

• 全局作用域：整个script标签中或者整个js文件中；

• 局部作用域(函数作用域):作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域;这些函数作用域的变量一般是在函数中声明的；如果仅在函数中使用而非在函数中声明则是全局作用域；

注意：现在还没有块级作用域的概念，其是在ES6中才有的；

2、变量相关

由上面的作用域，则变量可分为以下两种：

• 全局变量：在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）；
  1、全局变量在代码的任何位置都可以使用
  2、在全局作用域下 var 声明的变量 是全局变量
  2、特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

• 局部变量：在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）；
  1、局部变量只能在该函数内部使用
  2、在函数内部 var 声明的变量是局部变量
  3、函数的形参实际上就是局部变量

两种变量的区别：

• 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
• 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

3、作用域链

上面我们说了在函数外部声明的变量是全局变量而在函数内部声明的变量是局部变量，即函数内部是一个局部作用域；但有时函数内部又有函数（又有一个作用域），这是就引出了作用域链的概念：

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链；

4、预解析

JavaScript 解析器在运行 JavaScript 代码的时候分为两步：

• 预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义；
  变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升（所以虽然将声明提升了，但是没有赋值，如果打印的话仍是undefined）
  函数的声明同理，函数的声明会提升到当前作用域的最上面但函数的调用不会被提升；

• 代码执行：将代码从上到下执行；

5、对象相关

注意对象中除了有属性外还可以有方法（对象中的函数称为方法）；

5.1对象创建方式

1、使用字面量创建对象（即直接赋的值是对象），如：

var star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};

若想访问对象的属性，有两种方法：

对象名.属性名

对象名['属性名']

若想调用对象的方法，则：

对象名.方法名()

2、使用new object创建对象

//创建空对象
var andy = new Obect();
//给空对象赋值
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}

3、利用构造函数创建对象
构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面

• 构造函数的封装

 function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

• 构造函数的调用

var obj = new 构造函数名(实参1，实参2，实参3)

则obj会接收到构造函数创建出来的对象

注意：

1. 构造函数约定首字母大写
2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法
3. 构造函数中不需要 return 返回结果
4. 当我们创建对象的时候，必须用 new 来调用构造函数

通过new关键字创建对象的过程称为对象实例化

new的作用：

1. 在构造函数代码开始执行之前，创建一个空对象；
2. 修改this的指向，把this指向创建出来的空对象；
3. 执行函数的代码
4. 在函数完成之后，返回this—即创建出来的对象
   
   

5.2对象的遍历

除了选择对象中属性，对象名.属性名
如果想遍历对象中的所有属性的话，则使用for in语句：

for (变量 in 对象名字) {
    // 在此执行代码
}

如：

for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

5、内置对象

js的对象分成三种：

• 自定义对象：上面所说的对象；
• 内置对象：内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发；如：
  Math、 Date 这些；（不用都会，当用到时会查文档使用即可）
• 浏览器对象：js独有；

5.1Math对象

如果需要取一定范围内的整数：

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

5.2日期对象

上面的math对象不是构造函数，可以直接使用。但是日期对象date是一个构造函数必须实例化后才能使用

实例化对象：

//获取当前日期对象
var now = new Date();
//获取指定日期对象
var future = new Date('2019/5/1');

date对象的属性方法：

另一个重要点是获取总时间毫秒数（从1970年1月1日起到现在的总毫秒数），在一些页面中倒计时效果中会用到：

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())	
console.log(date.getTime())	
// 2. 简单写可以这么做
var now = + new Date();			
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();