前端学习（十六）JavaScript基础-作用域和对象

作用域

JS（ES6之前）的作用域有两种：

• 全局作用域
• 局部作用域

全局作用域

在整个script标签或者js文件内有效

局部作用域

在函数内部有效，也称为函数作用域

JS没有块级作用域

变量的作用域

• 全局变量：在全局作用域下声明的变量叫做全局变量
  • 全局变量在代码的任何位置都可以使用
  • 在函数内部，不声明而直接赋值的变量，会变成全局变量
• 局部变量：在局部作用域下声明的变量叫做局部变量（函数内部定义）
  • 局部变量只能在该函数内部使用
  • 函数的形参也是局部变量
• 全局变量和局部变量的区别
  • 全局变量在任何地方都能使用，只有浏览器关闭才销毁，因此占用内存
  • 局部变量只在函数内部使用，函数结束后，被销毁，节省内存

作用域链

不同的作用域中存在多个同名变量时，采用就近原则

预解析

JS代码是由浏览器中的JS解析器来执行的，这个过程分两步：预解析和代码执行

• 预解析：在当前作用域下，JS代码执行之前，浏览器会默认把带有var和function声明的变量在内存中进行提前声明或者定义
• 代码执行：从上到下依次执行

变量预解析

变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升

函数预解析

函数的声明会被提升到当前作用域的最上面，但是不会调用函数

函数表达式声明函数问题

函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：

fn();
var  fn = function() {
    console.log('不会执行');
}
//fn is not a function

对象

对象是一组无序的相关属性和方法的集合，所有的事务都是对象，例如字符串、数值、数组、函数等，对象由属性和方法组成

• 属性：事务的特征，在对象中用属性来表示
• 方法：事务的行为，在对象中用方法来表示

创建对象的三种方式

利用字面量创建对象

利用确定的键和值来初始化一个对象

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

利用new Object创建对象

• 创建空对象

var andy = new Obect();

• 给对象添加属性和方法

andy.name = 'duck';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好');
}

注意：

• Object()第一个字母大写
• new Object() 需要用new关键字

利用构造函数创建对象

• 构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初值，它总是与new运算符一起使用，一般把对象的公共属性和方法抽象出来，封装到构造函数中
• 构造函数的格式

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

• 构造函数的调用

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

• 注意事项：
  • 构造函数首字母大写
  • 函数内的属性和方法需要用this访问
  • 构造函数不需要return
  • 创建对象时必须用new关键字

new关键字的作用

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

对象的使用

• 访问对象的属性：

star.name;
star.['name'];

• 访问对象的方法

star.hello();

遍历对象

语法

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