JS预解析和对象学习

文章目录 预解析1.代码运行步骤预解析代码执行 2.预解析具体 对象1.概念1.1什么是对象？1.2为什么需要对象 2.创建对象的(三种)方式2.1.利用字面量创建对象2.2利用new Object创建对象2.3利用构造函数的方法创建对象1.为什么？ 2.4构造函数和对象2.5.new关键字的执行步骤2.6遍历对象 小结：

预解析 1.代码运行步骤

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

预解析

js引擎会把js里面所有的var还有function提升到当前作用域的最前

代码执行

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

2.预解析具体

预解析分为变量预解析(变量提升) 和函数预解析(函数提升)

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

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

 <script>
        //问
        // console.log(num);
        //2问



        console.log(num); //undefined 坑1
        var num = 10;
        //相当于执行了以下代码
        //step 1 var num;将变量提升，全局变量而且提升变量不赋值 *** 作
        // step 2console.log(num); 打印结果，undfined
        // step3  num=10;  //再次进行赋值 *** 作


        //3问
        fn(); //由此得知，调用函数写在上面或者是下面都可以（因为预解析先提升函数）
        function fn() {
            console.log(11);
        }


        //  fn(); //调用此函数
        //4问
        fun(); //报错，坑2
        var fun = function() {
                console.log(22);
            }
            //相当于执行了以下代码：
            //step1: var fun;
            // step2: fun();
            /* step3: fun = function() {
                console.log(22);
            }
            */



        // fun();//可以运行
        //1.我们js引擎运行js分为两步：预解析和代码执行
        //（1）.预解析js引擎会把js里面所有的var还有function提升到当前作用域的最前面
        //（2）.代码执行 按照代码书写的的顺序从上往下执行
        //2.预解析分为变量预解析(变量提升) 和函数预解析(函数提升)
        //(1).变量提升：就是把所有的变量声明提升到当前的作用域最前面  不提升赋值 *** 作
        //(2).函数提升：就是把所有的函数声明提升到当前作用域的最前面  不调用函数
    script>

案例1：

 <script>
        //请问输出结果为多少？
        var num = 10;
        fun();

        function fun() {
            var num;
            console.log(num); //输出结果为undefined
            var num = 20
        }

        //相当于执行了以下 *** 作
        //先执行变量预解析和函数预解析（提升变量，提升函数）
        var num;

        function fun() {
            console.log(num);
            var num = 20
        }
        num = 10;
        fun();
    </script>

案例2：

 <script>
        var num = 10;

        function fn() {
            console.log(num);
            var num = 20;
            console.log(num);
        }
        fn(); //preidct ：undefied和20  right!!!

        //相当于以下代码:
        var num;

        function fn() {
            console.log(num);
            num = 20;
            console.log(num);
        }
        num = 10;
        fn();
    </script>

案例三：

  <script>
        //案例3
        var a = 18;
        f1(); //预测结果为 undified和9

        function f1() {
            var b = 9;
            console.log(a);
            console.log(b);
            var a = '23';
        }
        //相当于执行以下顺序代码：
        var a;

        function f1() {
            var b;
            var a;
            b = 9
            console.log(a); //undefined
            console.log(b); //9
            a = '23';
        }
        a = 18;
        f1();
    </script>

案例4：

<script>
        f1();
        console.log(c);
        console.log(b);
        console.log(a); //undefined

        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 = b = c = 9;相当于var a=9; b=9;c=9; b和c直接赋值，没有var声明 当全局变量看！！！
            //集体声明 var a=9,b=9,c=9;
            console.log(a);//9
            console.log(b);//9
            console.log(c);//9
        }

        f1();//输出三个9
        console.log(c);//9
        console.log(b);//9
        console.log(a);//undifined,至于为什么？那是因为a为局部变量，其他都为全局变量
    </script>

为解惑我特意做了这个实验：

  <script>
        b(); //输出10
        console.log(b); //输出20
        console.log(a);//结果是undifined


        function b() {
            var a = 10;
            b = 20; //没有 var 的为全局变量
            console.log(a);
        }
    </script>

对象 1.概念 1.1什么是对象？

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

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

对象的组成：

属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示 (常用动词) 1.2为什么需要对象

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

例如，将“张三疯”这个人的信息保存在数组中的方式为：

var arr = ['张三疯','男',128,154]

JS中的对象表达结构更清晰，更强大。张三疯的个人信息在对象中的表达方式如下

张三疯.姓名 = '张三疯' --> person.name='张三疯'
张三疯.性别 = '男'         person.sex = '男'
张三疯.年龄 = '128'        person.age = 128
张三疯.身高 = '154'        person.height=154;

2.创建对象的(三种)方式

在javascript中，现阶段我们可以采用三种方式创建对象（object）

利用字面量创建对象利用 new Object 创建对象利用构造函数创建对象 2.1.利用字面量创建对象

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

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

键 : 相当于属性名值 : 相当于属性值，可以是任意类型的值(数字类型、字符串类型、布尔类型、函数类型等)

对象的调用

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

 <script>
        //1.利用对象字面量创建对象{}; 
        //var obj = {} //创建了一个空的对象 
        var obj = {
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');
                }
            }
            //(1)里面的属性或者方法我们采取键值对的形式 键 属性名 : 值  属性值
            //(2)多个属性或者方法中间用逗号隔开的。
            //(3)方法冒号后面跟的是一个匿名函数

        //2.使用对象
        //(2).调用对象的属性 我们采取 对象名.属性名 .我们理解为 的
        console.log(obj.uname);
        //(2).调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        //(3)调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号
        obj.sayHi();
    </script>

案例：创建一条狗对象，

 <script>
        //创建一条狗
        var obj = {
            name: '可可',
            type: '阿拉斯加犬',
            age: 5,
            color: '棕红色',
            bark: function() {
                console.log('汪汪汪');
            },
            showFilm: function() {
                console.log('演电影');
            }
        }
        obj.bark();
        obj.showFilm();
    </script>

变量、属性、函数的总结：

区别：

变量和属性是相同的 他们都是用来存储数据的 变量:单独声明并赋值 使用的时候直接写变量名 单独存在属性:在对象里面的不需要声明的 使用的时候必须是 对象.属性 函数和方法的相同点: 都是实现某种功能 做某件事 函数：是单独声明 并且调用的 函数名() 单独存在的方法 ：在对象里面 调用的时候对象.方法() 2.2利用new Object创建对象

与我们之前学的new Array()原理一致

 <script>
        //利用 new Object 创建对象
        var obj = new Object(); //创建了一个空对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('hi~');
            }
            //(1)我们是利用等号赋值的方法 添加对象的属性和方法
            //(2)每个属性和方法之间用;号结束
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

案例：

  <script>
        var min = new Object();
        min.name = '鸣人';
        min.sex = '男';
        min.age = 19;
        min.skill = function() {
            console.log('影分身术');
        }
        console.log(min.name);
        console.log(min['sex']);
        min.skill();
    </script>

2.3利用构造函数的方法创建对象 1.为什么？

 <script>
        //我们为什么需要使用构造函数
        //就是因为我们前面两种创建对象的方式一次只能创建一个对象
        var ldh = {
            uname: '刘德华',
            age: 55,
            sing: function() {
                console.log('冰雨');
            }
        }
        var zxy = {
                uname: '张学友',
                age: 58,
                sing: function() {
                    console.log('吻别');
                }
            }
            //因为我们一次创建一个对象，里面有很多属性和方法都是相同的，我们只能复制
            //因此我们可以利用函数的方法，重复这些相同的代码 我们就把这个函数称为构造函数
            //又因为这个函数不一样，里面封装的不是普通代码，而是 对象
            //构造函数 就是把我们对象里面的一些相同的属性和方法抽象出来封装到函数里
    </script>

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

语法规范

 //构造函数的语法格式
        function 构造函数名() {
            this.属性 = 值；
            this.方法 = function() {}
        }
        new 构造函数名();

详细语法规范

 <script>
        //利用构造函数创建
        //我们需要创建四大天王的对象 相同的属性：名字，年龄，性别，相同的方法：唱歌
        //构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值；
        //     this.方法 = function() {}
        // }
        // 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, '男'); //调用函数返回对象
        console.log(typeof ldh); //object
        console.log(ldh.name);
        console.log(ldh['age']);
        ldh.sing('冰雨');
        //创建第二个对象
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('吻别')


        //1.构造函数名字首字母要大写
        //2.构造函数不需要return就可以返回结果
        //3.我们调用函数必须使用 new
        //4.我们只要new Star()调用函数就创建了一个对象
        //5.我们的属性和方法前面必须添加this
    </script>

王者荣耀英雄对象案例，有名字，类型，血量，攻击方式

 <script>
        function Wang(name, type, blood) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(way) {
                console.log(way);
            }
        }
        var lp = new Wang('廉颇', '力量型', 500);
        console.log(lp.name);
        console.log(lp.type);
        console.log(lp.blood);
        lp.attack('近战');
        var hy = new Wang('后裔', '射手型', 100)
        console.log(hy.name);
        console.log(hy.type);
        console.log(hy.blood);
        hy.attack('远程');
    </script>

2.4构造函数和对象

构造对象，如Stars()抽象了对象的公共部分，封装到了函数里面，他泛指某一大类。

创建对象，如new Stars( ) ,特指某一个,通过new关键字创建对象的过程我们也称对象实例化

2.5.new关键字的执行步骤 new构造函数可以在内存中创建了一个空的对象this就会指向刚才创建的空对象执行构造函数里面的代码 给空对象添加属性和方法返回对象（所以构造函数里面不需要return）

 <script>
        //new关键字执行过程
        //1.new构造函数可以在内存中创建了一个空的对象
        //2.this就会指向刚才创建的空对象
        //3.执行构造函数里面的代码 给空对象添加属性和方法
        //4.返回对象（所以构造函数里面不需要return）
        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, '男');
    </script>

2.6遍历对象

1.遍历对象的属性

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

  <script>
        //遍历对象
        var obj = {
                name: 'pink老师',
                age: 18,
                sex: '男',
                fn: function() {}
            }
            //以前：
            // console.log(obj.name);
            // console.log(obj.age);
            // console.log(obj.sex);
            //for...in 遍历我们的对象
            //for (变量 in 对象){

        //  }
        for (var k in obj) {
            console.log(k); //key是变量,
            console.log(obj[k]); //obj[k]得到的是属性值
        }
        //我们使用for in 变量我们喜欢k或者key
    </script>

小结： 对象可以让代码结构更清晰对象是复杂数据类型object本质：对象就是一组无序的相关属性和方法的集合构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果对象实例特指一个事物，比如这个苹果，正在说话的我for…in…语句对于对对象的属性进行循环 *** 作