JavaScript--【JS】预解析&&创建对象

JavaScript预解析

概念

HTML、CSS、JavaScript代码全部交由浏览器两个引擎，渲染引擎和JavaScript引擎两个负责执行的。

JavaScript引擎负责对JavaScript代码进行执行处理，通过两个步骤完成JavaScript代码的执行任务，分别是预解析和代码执行

什么是预解析

在当前变量或者函数等作用域下，JavaScript代码在执行之前，浏览器默认会将JavaScript代码中有关var或者function声明的变量或者函数在内存中进行提前声明以及提前定义

代码执行：将预解析的结果进行从上往下逐步执行

            console.log(num);
            var num=10;
            // 代码实际运行过程（预解析的结果）
            // var num;
            // console.log(num);
            // num=10;
			// 输出结果 undefined

而对于函数

            // fun();
            // function fun(){
            //     console.log(1);
            // }
            // 预解析的结果
            // 函数的使用过程：1. 定义函数，2.调用函数。
            // 函数的调用必须写在函数的定义之后
            var fun;
            fun();
            fun=function(){
                console.log(1);
            };

1. 变量提前：就是将所有的变量声明提前到当前的作用域最前面，不会将赋值操作提前到最前面
2. 函数提前：将所有的函数声明提前到当前作用域最前面，不会将调用操作进行提前，函数在调用之前必须保证了函数的完善

对象

对象的相关概念

在JavaScript中，对象本质是对一组无序的相关变量(属性)以及函数(方法)进行组合的结果，将这些变量及方法进行统一再封装对封装结果命名为对象

对象：属性+方法

万事万物皆对象，在程序中可以将生活中的所有事物映射成一个对象，已达到程序实现现实生活中的事务。

属性

主要是对对象的特征描述，在对象中主要通过属性来表示(名词)

方法

主要是对对象的行为描述，在对象中主要通过方法来表示(动词)

为什么要用对象

在记录一个数据值时，基本上都是使用变量，保存多个数据值时，可以使用数组。

对于记录数据而言，可以使用数组记录大量数据，但是数组中的数据只能通过索引值进行访问，并不明确每个数据的实际价值，而在开发中基本上每一步都需要明确每个数据的实际价值是什么，而且数据量变得非常庞大时索引也很混乱。

为了解决这种问题，使用对象的方式去解决，在对象中使用属性进行记录数据，可以通过属性名称明确数据的价值

面向对象：是一种开发的思想

创建对象

通过字面量创建

就是使用创建变量的方式，等号后面给一对花括号，花括号里面包含了表达这个具体事务(对象)的属性和方法，花括号里面的内容以“键值对”形式表示

键：关键词，在一个对象内是唯一的(包含：属性名、方法名)

值：数据值，可以重复完全取决于实际要求，而且数据类型不限

对象的使用

1. 对象的属性

   对象中存储的具体数据，属性名是键值对中的键，而存储的具体数据是键所对应的值

2. 对象的方法

   对象中存储的具体函数，方法名是键值对中的键，而具体的函数是键所对应的匿名函数

3. 访问对象成员

   1. 访问对象里面的属性，通过“对象名称.属性名”方式进行访问
   2. 访问对象里面的属性还有一种方式，通过“对象名称[“属性名”]”方式进行访问，和数组索引访问元素方式类似，区别在于访问属性方括号中使用的是键名称，必须是字符串
   3. 访问对象里面的方法，通过“对象名称.方法名()”方式进行访问

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

1. 属性是对象的一个组成部分，而变量不是对象的组成成员，而且变量只是一个存储数据的容器，基本上没有任何的实际含义。
2. 方法是对象的一个组成部分，而函数不是对象的组成成员，函数只是单独的封装了一些操作算法的简单容器。

通过new Object创建

 var man=new Object();

Object：是复杂数据类型object的原始对象(原名称)

new：创建一个新的这个类型成员

通过new Object();会创建出来一个新的object类型的数据，而且这个数据装在man变量里面，object类型就是JavaScript代码中的所有数据类型的一个基类型。只要是我们接触的类型都是由object类型所演变而来

属性方法的添加

通过之前学习的调用的方式进行添加

            var man=new Object();
            man.name="张三";
            man.age=20;
            man.say=function(){
                return "hello";
            }
            console.log(man.name);
            console.log(man.say());

通过构造函数创建

构造方法：是一种特殊的函数，主要是用来初始化对象，也是对象的一个成员，这个成员方法特殊到调用方式为隐式调用，这个函数的执行在创建对象的时候默认执行。

其实通过new Object();这种方式创建对象时其实也使用的是调用构造函数的方式进行创建的对象

构造函数执行的价值

1. 构造函数的执行必须使用new关键字搭配使用
2. 构造函数执行完创建了一个构造函数所属的原始对象
3. 可以通过构造函数对原始对象中的属性等进行初始化赋值

构造函数的使用

            // 创建构造函数和创建函数基本上一样
            function Man(参数1,参数2,...){  
                this.name=参数1;
                this.age=参数2;
                ......
            }

            function Man(){
                this.name="张三";
                this.age=20;
                this.say=function(){
                    console.log("你好");
                }
            }

            var man1=new Man();
            console.log(man1.name);
            man1.say();

1. 构造函数和普通函数没有什么区别
2. 构造函数的函数名使用帕斯卡命名法
3. 构造函数内的属性和方法创建必须使用"this.名称"方式进行创建添加
4. 构造函数中不需要return返回结果
5. 当创建对象的时候(构造函数的调用)，必须使用new 来调用构造函数
6. 使用构造函数的方式创建对象，可以称之为创建了一个类，而构造函数对这一类对象的公共部分进行了抽象处理。类和对象的概念：类是对象的抽象化概念，而对象是类的一种具体表现。
7. 创建对象使用的new 对象名();特质某一类，通过new关键字创建属于这一类的一个新成员对象，这个过程类的实例化对象成员

new关键字

1. 在构造函数代码开始执行之前，创建一个新对象
2. 修改this的指向，把this指向实例化后的新对象
3. 执行函数的代码
4. 在函数完成之后，返回this。(可以通过对象中的某个函数创建这个对象自己)

遍历语法

通过遍历获取对象成员

            function Man(){
                this.name="张三";
                this.age=20;
                this.say=function(){
                    console.log("你好");
                };
                this.self=function(){
                    return this;
                }
            }
            var man1=new Man();
            for (var item in man1) {
                console.log(item);
            }

使用遍历语法对对象进行遍历，遍历到的每一个元素是对象“键值对”中的键的值，如果使用这种遍历方式进行遍历数组，那么得到的结果是每个元素的索引