JavaScript笔记3

目录

一、作用域

1. 全局作用域

2. 局部作用域 （函数作用域）

3. 变量的作用域

4. 作用域链

二、 JavaScript预解析

1. 预解析

2. 变量预解析和函数预解析

三、对象

1.创建对象的三种方式

2. new关键字

3. 遍历对象属性

---

一、作用域

就是代码名字（变量）在某个范围内起作用和效果

目的：为了提高程序的可靠性，减少命名冲突

1. 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

2. 局部作用域 （函数作用域）

在函数内部就是局部作用域，这个代码名字只在函数内部起效果和作用

3. 变量的作用域

• 全局变量：在全局作用域下的变量

注：特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

• 局部变量：在局部作用域下的变量（在函数内部的变量）

只能在该函数内部使用，函数的形参实际上就是局部变量

4. 作用域链

• 只要是代码，就至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
• 内部函数可以访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构称为作用域链
• 采取就近原则的方式来查找变量最终的值。

一个案例：结果是几？

var a=1;
function fun1(){
    var a=2;
    var b='22';
    fun2();
    function fun2(){
        var a=3;
        fun3();
        function fun3(){
            var a=4;
            console.log(a); //4
            console.log(b); //22
         }
    }
}
fun1();

二、 JavaScript预解析

1. 预解析

 js引擎运行分为两步：预解析 、代码执行

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

2. 变量预解析和函数预解析

2.1 变量预解析（变量提升）

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

2.2 函数预解析（函数提升）

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

一个案例： 结果是几？

f1();
console.log(c);  //9
console.log(b);  //9
console.log(a);  //报错
function f1() {
    var a = b = c = 9;//相当于 var a=9; b=9; c=9;
    //b 和 c直接赋值，当做全局变量看，而a属于局部变量
    // 集体声明 var a=9,b=9,c=9;
    console.log(a); //9
    console.log(b); //9
    console.log(c); //9
}

三、对象

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

对象是由属性（事物的特征）和方法（事物的行为）组成的。

优点：JS 中的对象表达结构更清晰，更强大。

1. 创建对象的三种方式

1.1 利用字面量创建对象

    对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

• { } 里面采取键值对的形式表示

 键：相当于属性名

 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

• 多个属性或者方法中间用逗号隔开
• 方法冒号后面跟的是一个匿名函数

   对象的调用：

• 对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”  
• 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用      
• 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

// var obj ={};  //创建一个空的对象
var obj={
    uname:'张三',
    age: 1,
    sex:'男',
    sayHi:function(){
        console.log('Hi');
    }
}
//调用对象
//调用对象的属性
console.log(obj.uname);   //张三
console.log(obj['age']);  //1
// 调用对象的方法
obj.sayHi();   //Hi

  变量、属性、函数、方法总结

• 变量：单独声明赋值，单独存在
• 属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
• 函数：单独存在的，通过“函数名()”的方式就可以调用
• 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

1.2 利用 new Object 创建对象  

1. new Object() ：需要 new 关键字
2. Object() ：第一个字母大写
3. 使用的格式：对象.属性 =  值;  

var obj =new Object();
    obj.uname ='张三';
    obj.age = 1;
    obj.sex = '男';
    obj.sayHi = function() {
        console.log('Hi');
    }
// 调用对象同上
//调用对象的属性
console.log(obj.uname);   //张三
console.log(obj['age']);  //1
// 调用对象的方法
obj.sayHi();   //Hi

1.3 利用构造函数创建对象

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

在 js 中，使用构造函数要时要注意以下两点：

1. 构造函数用于创建某一类对象，其首字母要大写
2. 构造函数要和 new 一起使用才有意义

 // 利用构造函数创建对象
function 构造函数名(){
    this.属性 = 值;
    this.方法 = function(){}
}
new 构造函数名();     // 调用对象

注：

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

//实例
function Star(uname, age, sex) {       // 构造函数名字首字母大写
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function (sang) {
        console.log(sang);
    }
}
var ldh = new Star('刘德华', 18, '男'); // 构造函数不需要return就可以返回结果
var zxy = new Star('张学友', 19, '男'); // 调用构造函数，必须用new
console.log(typeof ldh);  // object    //  调用函数返回的是一个对象
console.log(ldh.name);    // 刘德华
console.log(zxy['age']);  // 19
ldh.sing('冰雨');  // 冰雨

2. new关键字

new 在执行时会做四件事情：

1. 在内存中创建一个新的空对象。

2. 让 this 指向这个新的对象。

3. 执行构造函数里面的代码，给这个新对象添加属性和方法。

4. 返回这个新对象（所以构造函数里面不需要return）。

3. 遍历对象属性

for...in 语句用于对数组或者对象的属性进行循环操作。

其语法如下：

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

语法中的变量是自定义的，它需要符合命名规范，通常会将这个变量写为 k 或者 key。

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