2021-10-21（作用域 对象 ）

作用域:代码名字(变量)在某个范围内起作用和效果

    <script>
        //1 作用域:代码名字(变量)在某个范围内起作用和效果
        //提高程序的可靠性  减少命名冲突
        //2 js的作用域(es6)之前  :全局作用域  局部作用域
        //3 全局作用域：整个script标签 或者是 单独的js文件
        var num = 10;
        console.log(num);
        //4 局部区域  在函数内部就是局部区域作用域 这个代码的名字只在函数内部起作用
        function fn () {
            //局部作用域||函数作用域
            var num = 20;
            console.log(num);
        }
        fn();
    </script> 

    <script>
        //变量的作用域:全局变量  局部变量
        // 1  全局变量：在全局作用域下的变量  在全局下都可以使用
        //*****如果在函数内部 没有声明 直接赋值的变量 为全局变量
        var num = 10;//num就是全局变量
        console.log(num);


        function fn () {
            console.log(num);//在全局都可以使用
        }
        fn();
        //2 局部变量    在局部作用域下的变量   后者在函数内部的变量就是 局部变量
        //****函数的形参 也可以看作局部变量
        function fn1() {
            var num1 = 10;//num1局部变量 只能在函数内部使用 
            num2 = 2; 
        }
        fn1();
        // console.log(num1);
        console.log(num2);//num2没声明直接赋值 是全局变量  所以可以输出

        //3 从执行效率来看全局变量 和局部变量
        //全局变量只有浏览器关闭时才会销毁 比较占内存资源
        //局部变量 当我们程序执行完毕就会销毁 比较节约资源
    </script>

JavaScript无块级作用域

    <script>
        ///js中没有块级作用域  js的作用域：全局  局部  
        //js在es6的时候新增的块级作用域
        //块级作用域{}  if{}  for {}
        // if (xx) {
        //     var num = 10;
        // }
        // if外可以调用num 但是在java中不能因为他们有块级作用域
        if (3 < 5 ) {
            var num = 10
        }
        console.log(num);
    </script>

作用域链

内部函数访问外部函数的变量 采取链式(依次往上查找)就近原则；称之为作用域链

    <script>
        //作用域链  内部函数访问外部函数的变量 采取链式(依次往上查找)就近原则；称之为作用域链
        var num = 10;

        function fn() {//外部函数
            var num = 20;
            function fn1 () {//内部函数
                console.log(num);
            }
            fn1(); 
        }
        fn();//20
    </script>

作用域链案例

<script>
        var a = 1;
        function fn1() {
            var a = 2;
            var b = '22';
            fn2();
            function fn2 () {
                var a =3 ;
                fn3();
                function fn3() {
                    var a = 4;
                    console.log(a);
                    console.log(b);
                }
            }
        }
        fn1();// 4 字符串的22
</script>

预解析：

        //1问
        // console.log(num); 未声明变量报错
        
        //2 问
        console.log(num);//undefined 坑1
        var num = 10;
        ///变量提升
        //遇到var进行预解析 提到最前边 但不进行赋值操作var num;
        //剩下代码依次进行
        //var num;
        //console.log(num);umdefined
        //num = 10;


        //3问
        fn();//可以调用 
        function fn () {
            console.log(11);
        }
        //函数提升
        //        function fn () {
        //console.log(11);
        //}
        //fn();


        //4 问
        fun();//bu不能调用 报错 坑2
         var fun = function(){
             console.log(22);
         }
         //var fun;变量提升
         //fun();
         //fun = function(){
         //   console.log(22);
         // }


         //****1 js引擎运行js分为两步:预解析 代码执行
         //(1) 预解析：js引擎会把js里边的var 还有function 提示到作用域的最前边
         //(2) 预解析后 才是代码执行  顺序从上往下
         //****2 预解析分为变量预解析(变量提升)  和 函数预解析(函数提升)
         //(1) 变量提升  就是把所有的变量声明提升到当前作用域最前边  不提供赋值操作
         //(2) 函数提升  就是把所有的函数声明提升到当前作用域最前边  不调用函数
    </script> 

创建对象：(三种方法)

1.字面量

创建和使用

   <script> 
      //var obj = {}; 创建了一个空对象

      //[1] 里边的属性或者方法采用键值对的形式     键 属性名:  属性值,
      //[2] 多个属性或者方法用逗号隔开
      //[3] 方法冒号后跟的是一个匿名函数
      var obj = {
         uname : '林文静',
         age : '20',
         sex : '男',
         sayHi : function () {
            console.log('hi~');
         }
      }
      //使用对象
      //[1] 调用对象的属性       对象名.属性名;  .可以理解为 的
      console.log(obj.uname);
      //[2] 调用对象的属性还有一种方法    对象名['属性名'];
      console.log(obj['age']);
      //[3] 调用对象的方法 sayHi  对象名.方法名();  不要忘记加小括号
      obj.sayHi();
   </script>

2.new Object创建对象

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

3.构造函数:

为什么要用构造函数：一次创建一个对象，里边很多代码是相同的  我们只能复制。因此 利用函数的方法，重复这些相同的代码 ，就把这个函数称为构造函数。这个函数有点不一样， 里边封装的不是普通代码而是对象。构造函数 就是把对象里相同的属性和代码，抽象出来封装在函数里。

构造函数的结构：

        function 构造函数名(){

             this.属性 = 值;

             this.方法 = function () {}

         }

调用方法：

new 构造函数名();

注意：

        //1 构造函数名字的首字母大写

        //2构造函数不需要return

        //3调用构造函数必须使用new

        //4只有new Star() 调用函数就创建一个对象 ldh{}

        //属性和方法 前必须添加this

案例

   <script>
      function Hero(name,type,blood) {
         this.uname = name;
         this.type = type;
         this.blood = blood;
         this.attack = function (attact) {
            console.log(attact);
         }
      }
      var lp = new Hero('廉颇','力量型','500血');
      console.log(lp.uname);
      console.log(lp.type);
      console.log(lp.blood);
      lp.attack('攻击:近战');

      console.log('***************************');

      var hy = new Hero('后裔','射手型','100血');
      console.log(hy.uname);
      console.log(hy.type);
      console.log(hy.blood);
      hy.attack('攻击:远程'); 
   </script>

 

遍历对象

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

        // }
        for (var k in obj) {
            console.log(k);//k是变量 输出得到的是属性名
            console.log(obj[k]);//obj[k] 得到的是属性值
        }
        //for in 里边的变量 喜欢用k 或者key
    </script>

obj[k]:             k: