Web前端基础—JavaScript基础（作用域、预解析、对象和内置对象）

作用域

1. 作用域

1.1作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

简单来说：作用域就是代码名字（变量）在某个范围内起作用和效果。

目的是：为了提高程序的可靠性，更重要的是减少命名冲突。

1.2js的作用域（es6之前版本）

1. 全局作用域：
   1. 1. 整个script标签；
      2. 单独的js文件
2. 局部作用域（函数作用域）
   1. 1. 在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用。

全局作用域不会影响局部作用域

1. 变量的作用域

2.1变量作用域的分类

在JavaScript中，根据作用域的不同，变量可分为两种：

1. 全局变量：在全局作用域下的变量；
2. 局部变量：在局部作用域下的变量（在函数内部使用）

全局变量在全局下都可以使用，也可以在局部变量中使用。

注意：

如果在函数内部 没有声明直接赋值的变量也属于全局变量

局部变量不能在函数以外使用。

注意：

函数的形参也可以看作是局部变量

2.2从执行效率来看全局变量和局部变量

1. 全局变量只用浏览器关闭的时候才会销毁，比较占内存资源；
2. 局部变量  当我们的程序执行完毕就会销毁，比较节约内存资源。

1. 作用域链（内部函数访问外部函数的变量的方式）

只要是代码，就至少有一个作用域

写在函数内部的局部作用域

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪写数据能被内部函数访问，就称为作用域链。—就近原则

预解析

1. 预解析

JavaScript代码是由浏览器中的JavaScript解析器来解析的。JavaScript解析器在运行JavaScript代码的时候，分为两步：预解析和代码执行。

预解析：js引擎会把js里面的 var 还有function 提升到当前作用域的最前面；

预解析分为：变量预解析（变量提升）和函数预解析（函数提升）

变量提升：就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作。

函数提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数

代码执行：按照代码书写顺序从上往下执行。

1. 预解析案例

  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;

        //     a = b = c = 9;

        //     // 相当于 var  a  = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看

        //     // 集体声明  var a = 9, b = 9, c = 9;

        //     console.log(a);

        //     console.log(b);

        //     console.log(c);

        // }

        // f1();

        // console.log(c);

        // console.log(b);

        // console.log(a);

JavaScript 对象

1. 对象

1.1什么是对象？

现实生活中：万物皆对象，对象是一个具体的事务，看的见摸得着的实物。例如：一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器 的连接也可以是“对象”。

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

对象是由属性和方法组成的。

1. 属性：事物的特征，在对象中用属性来表示（常用名词）。
2. 方法：事物的行为，在对象中用方法来表示（常用动词）。

1.2为什么需要对象？

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？

1. 创建对象的三种方式

1. 利用 字面量 创建对象；
2. 利用 new Object创建对象；
3. 利用 构造函数 创建对象。

2.1利用字面量创建对象

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

  ar obj = {

            //属性

            uname: '张三丰',

            agr: 18,

            aex: '男',

            //方法

            sayHi: function() {

                console.log('hi~');

            }

        };

1. 里面的属性或者方法我们采取键值对的形式，

（键）  属性名 ： （值）  属性值

1. 多个属性或方法中间用逗号隔开
2. 方法：后面跟的是一个匿名函数

2.2使用对象

（1）调用对象的属性 我们采取   对象名.属性名

   console.log(obj.uname);

（2）调用对象还有一种方法： 对象名[‘属性名’]

console.log(obj['age']);

（3）调用对象的方法   对象名.方法名

obj.sayHi();

2.3利用 new Object创建对象

var obj = new Object(); //创建一个空的对象

        //通过追加属性的方式  添加

        obj.uname = '张三丰';

        obj.age = 18;

        obj.sex = '男';

        obj.sayHi = function() {

            console.log('hi~');

        }

1. 利用的是等号赋值的方法，添加对象的属性和方法
2. 每个属性和方法之间用分号结束
3. 使用的方法和第一个一样

2.4利用 构造函数 创建对象

我们可以利用函数的方法，重复执行相同的代码，我们就把这个函数称为构造函数。

构造函数就是把我们对象里面一些相同的属性和方法抽象出来，封装到函数里面。

1. 构造函数首字母要大写（规范）
2. 构造函数不需要return 就可以返回结果
3. 调用构造函数必须使用new
4. 我们通过构造函数创建对象的过程 我们也称为对象的实例化

           function Start(uname, age, sex) {

            this.name = uname;

            this.age = age;

            this.sex = sex;

        }

        var se = new Start('刘德华', 18, '男'); //调用函数返回的是一个对象

        console.log(se.name);

1. new关键字

1. new关键字 的执行过程
   1. 当程序执行到new时，先在内存中创建一个空的对象；
   2. 构造函数中的 this 就会指向刚才创建的空对象；
   3. 执行构造函数里面的代码，给这个对象添加属性和方法；
   4. 返回这个对象（因此构造函数不需要return）

1. 遍历对象属性

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

1. 语法格式

for(变量 in 对象){

//直接输出变量   得到的是  属性名

//对象[变量名]  得到的是  属性值

}

 在使用for...in语句时，里面的变量  我们喜欢写 k 或者 key

1. 小结

对象可以让代码结构更清晰；

对象是复杂数据类型object；

本质：对象就是一组无序的相关属性和方法的集合；

构造函数泛指一大类，比如苹果，不管是红苹果还是绿色苹果，都统称为苹果；

对象实例是特指一个事务；

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

JavaScript 内置对象

1. 内置对象

JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象。

内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本的而必要的功能（属性和方法）

内置对象最大的优点就是帮助我们快速开发

JavaScript提供了多个内置对象：Math、Data、Array、String等

1. 内置对象学习文档

https://developer.mozilla.org/zh-CN/