• JavaScript-作用域、预解析、对象


    一、 作用域
    1、概念:代码名字(变量)在某个范围内起作用和效果
    2、作用:提高程序的可靠性,减少命名冲突
    3、作用域分类:全局作用域、局部作用域
    3.1 全局作用域:整个script标签
    例如:var num=10;
    3.2 局部作用域(函数作用域):在函数内部起作用的、这个代码只在函数内部起效果和作用;
    例如:function fn(){
     var a=1000;//局部作用域
    }
    1.         var a = 100;
    2.         function f() {
    3.             var a = 1000;
    4.             console.log(a);
    5.         }
    6.         console.log(a);
    7.         f();
    4、变量作用域分类:全局变量、局部变量
    4.1 全局变量:在全局作用域下的变量;
    4.2 局部变量:在函数内部的变量;
    注意:在函数内 没有声明直接赋值的变量也属于全局变量
    小栗子
    1.         var a = 100;
    2.         function f() {
    3.             var a = 1000;
    4.             b = 45235;
    5.             console.log(a);
    6.         }
    7.         console.log(a);
    8.         f();
    9.         console.log(b);
    //b在函数中直接赋值没有声明,属于全局变量
    局部变量比全局变量更节约内存
    5、作用域链
    就近原则
    外部函数可以访问内部函数的变量
    内部函数访问外部函数中的变量采用链式查找的方式决定取哪个值
    二、 预解析
    JavaScript解释器在运行js代码的时候分为两步:预解析和执行代码
    (1)预解析js引擎会吧js里面的var、function 提升到当前作用域的最前面;
    (2)按照代码书写的顺序从上往下执行;
    三、对象
    1、概念:在js中,对象是一组 无序的相关属性和方法的集合,例如:字符串、数组、数值
    2、为何需要对象
    保存一个值时,可以使用 变量,保存多个值可以使用 数组
    保存多个不同类型的值的集合可以使用 对象
    3、 创建对象的三种方式
    3.1对象字面量:用{}创建对象
    1.         //对象
    2.         var obj = {};//创建了一个空对象
    3.         var obj = {
    4.             name: '杨攀帅',
    5.             age: 20,
    6.             sex: '男',
    7.             way: function () {    // 方法
    8.                 console.log('匿名函数');
    9.             }
    10.         }
    11.         //  注意:方法冒号后面跟的是一个匿名函数
    12.         //使用对象
    13.         // 1、调用对象的属性我们采取   对象名.属性名的方式
    14.         console.log(obj.name);
    15.         // 2、另外一种调用属性方式
    16.         console.log(obj['sex']);
    17.         // 3、调用对象的方法
    18.         obj.way();
    小栗子:
          
    1.   // 狗对象
    2.         var dog = {
    3.             name: '可可',
    4.             type: '阿拉斯基犬',
    5.             age: 5,
    6.             colour: '棕红色',
    7.             jn: '汪汪汪,演电影',
    8.             fun: function () {
    9.                 console.log('这是方法/匿名函数')
    10.             }
    11.         }
    12.         console.log('狗狗的名字:' + dog.name);
    13.         console.log('狗狗的品种:' + dog.type);
    14.         console.log('狗狗的年龄:' + dog.age);
    15.         console.log('狗狗的颜色:' + dog.colour);
    16.         console.log('狗狗的技能:' + dog.jn);
    3.2利用new object创建对象
    1.         // 利用new object创建对象
    2.         var obj = new Object();//创建了一个空对象 注意:O要大写
    3.         obj.name = '杨攀帅';
    4.         obj.age = 21;
    5.         obj.way = function () {
    6.             console.log('hello world');
    7.         }
    8.         // 调用
    9.         console.log(obj.name);
    3.3利用构造函数创建对象
    特点:可以利用函数的方法,重复一些代码
    构造函数就是把对象里面相同的代码和方式抽象出来封装到函数里面去
    注意:
    • 构造函数首字母要大写
    • 我们构造函数不需要return 就可以返回结果
    • 我们构造函数 必须使用 new
    • 我们只要调用new 函数名 就相当于创建的了一个对象
    语法:
           function  构造函数名() {
                this.属性=值;
                this.方法=function(){}
            }
            new 构造函数名();
    栗子:
     
    1.        function Star(name, age, sex) {
    2.             this.name = name;
    3.             this.age = age;
    4.             this.sex = sex;
    5.             this.sing = function () {
    6.                 console.log();
    7.             }
    8.         }
    9.         var a = new Star('刘德华', 18, '男'); //调用函数返回的是一个对象
    10.         console.log(a);
    11.         a.sing = ('歌曲');
    12.         var b = new Star('张学友', 19, '男');
    13.         console.log(b);
    new关键字
    (1)new构造函数可以在内存中创建一个空的对象
    (2)this就会指向刚才创建的空对象
    (3)执行构造函数里面的代码,给这个新对象添加属性和方法
    (4)返回这个新对象(所以构造函数里面不需要return)
    4、变量、属性、函数、方法的异同
    变量、函数:单独存在
    属性、方法:存在在对象中
    5、遍历对象
    1.         // 遍历对象
    2.         var onj = {
    3.             name: '杨攀帅',
    4.             age: 19,
    5.             sex: '男',
    6.             hobby: 'study',
    7.             fun: function () {
    8.             }
    9.         }
    10.         //for  in 遍历对象
    11.         // 语法:for(var 变量   in 对象 )
    12.         for (var k in onj) {
    13.             console.log(k);//k  变量  输出    得到的是 属性名
    14.             console.log(onj[k]);// obj【k】得到的是 属性值
    15.         }
  • 相关阅读:
    函数栈帧的形成与释放
    华为云Stack的学习(十)
    Go 锁演进
    【Unity】3D跑酷游戏
    UI自动化定位利器-xpath实战
    字符编码个人理解
    2流高手速成记(之三):SpringBoot整合mybatis/mybatis-plus实现数据持久化
    自定义动态数据源
    21、池化技术和线程池的使用(三大方法,7大参数,4种拒绝策略)
    Ansible的命令及常用模块详解
  • 原文地址:https://blog.csdn.net/qq_68163788/article/details/126212387