JS高级 05

作者: _MARPTS | 来源:发表于2018-05-25 11:29 被阅读0次
    面向对象实例(图书管理操作)
    • 报错异常: throw手动抛出异常信息

      for(){}
      throw ''; 
      
    • return , break 可以终止循环

    • 面向对象的书写规范

    // 1.提供一个构造函数
    function Obj(data){
        this.init(data);
    }
    //2.设置原型书对象
    Obj.prototype = {
        // 修正构造器属性
        constructor : Obj,
      // 初始化的方法(区分不同对象的数据)
        init: function(data){
            // 传参的兼容性处理
            this.data = data || [];
        },
        fun1 : function (){},
        fun2 : function (){}
    }
    var obj = new Obj()
    obj.init();
    
    严格模式
    • 开发中, 有严格模式和非严格模式,默认是非严格模式
    • 严格模式: 在严格模式下会做更加严格的检查,以前在非严格模式下可以使用或者不会报错的一些代码,在严格模式下会直接报错
    • 开启严格模式: 'use strict';
      'use strict';
      
      • 这种语法做了向后兼容,如果是支持严格模式就会开启严格模式,如果不支持就当做一段字符串处理
    • 建议使用
    严格模式的注意点(不要求,实际应用查找)
    • 1.必须使用var关键字声明变量
    • 2.使用delete关键字删除全局变量会直接报错
      'use strict'
      var b = 20;
      console.log(delete b);//报错
      
    • 3.对象不能存在同名的属性
    • 4.函数的形参名必须唯一(不能出现同名的形参)
    • 5.禁止使用with语句
    • 6.不能使用eval和arguments作为标识符
    • 7.修正函数内部this的指向
      • this 始终指向你指定的值(非严格模式是window)
    • 8.禁止使用八进制
      非严格模式前面写0可能是八进制
      var a = 012;
      
    • 9.在if语句中不能声明函数
    • 10.不能使用callee和caller,一个指向函数自身,一个指向调用函数的函数
     console.log((function (n) {
                if (n == 1) {
                    return 1;
                }
                return arguments.callee(n - 1) + n;
            })(10));
    
    
    • 11.在严格模式下,arguments的使用有区别
      • 在非严格模式下,arguments是存储的信息是与形参共享的
      • 在严格模式下,arguments做了修正,arguments与形参是独立
      function func(num) {
          console.log(num);
          console.log(arguments[0]);
      // 在非严格模式下,arguments是存储的信息是与形参共享的
          num = 30;
          console.log(num);//30
          console.log(arguments[0]);//30
      //在严格模式下,arguments做了修正,arguments与形参是独立
          num = 30;
          console.log(num);//30
          console.log(arguments[0]);//30
          
      }
      
      fun(12)
      
    严格模式的书写格式
    • 1.区分大小写,必须都是小写
    • 2.不区分单引号或者双引号
    • 3.分号可以省略
    • 4.必须是10个字符
    严格模式的作用域
    • 'use strict'要写在当前作用域的顶端
      • 1.函数的顶端: 只对当前的函数有作用
      • 2.script的顶端: 只对当前的script标签有作用
    'use strict';
    a = 10;
    console.log(a);
    
    //'use strict';
    b = 20;
    console.log(b);
    
    function f1(){
        'use strict';
        b = 30;
        console.log(b);
    }
    function f2(){
        c = 20;
        console.log(c);
    }
    
    f1();
    

    作用域

    • 1.作用域: 一个变量有作用的范围
    • 2.块级作用域 : JS中没有块级作用域
    • 3.JS中的作用域
      • 1.script标签组成全局作用域
      • 2.函数是唯一可以创建作用域的对象
    • 4.词法作用域和动态作用域
      • 词法作用域: 变量声明完成后,它的作用域就已经确定好了
        • 词法作用域的访问原则: 就近原则,在访问一个变量的时候,首先在但当前作用域查找,没有就去上一级作用域查找,知道全局作用域
      • 动态作用域: 变量的作用域由程序执行环境所决定
      • JS属于词法作用域

    变量和函数的提升

    • JS代码的执行过程:
      • 1.JS在预解析阶段,会对var声明的变量和function声明的代码块进行声明提升,提升到当前作用域的顶端
      • 2.解析执行
    console.log(a);//undefined
    var a = 10;
    
    demo();
    function demo() {
        console.log('demo');
    }
    
    • 变量和变量同名: 后面的覆盖前面的
    • 函数和函数同名: 后面的覆盖前面的
    • 变量和函数同名: 可以理解为只提升函数的声明,不提升变量(和函数名同名)的声明
      console.log(demo);// 函数
      function demo(){
          console.log('函数');
      }
      console.log(demo);// 函数
      var demo = '字符串';
      console.log(demo)// 字符串
      
    变量的提升是分作用域点的
    • 变量和函数的声明提升: 提升到当前作用域的顶端
    var a = 10 ;
    function f1(){
        console.log(a);// undefined
        var a = 20;
    }
    
    function f2(){
        f1();
        var a = 30;
        console.log(a);// 30
    }
    
    f2();
    
    函数表达式的提升
    • 函数表达式的提升: 只提升var声明的变量,并不会把整个函数表达式进行提升
    console.log(demo);//undefined
    var demo = function (){
        console.log('1');
    };
    console.log(demo);//函数
    
    
    面试题 01
    // 变量作用域问题
    function foo() {
        var num = 123;
        console.log(num);//123
    }
    foo();
    console.log(num);// 报错
    
    面试题 02
    // 变量作用域与变量提升,函数提升
    var scope = 'global';
    
    foo();
    
    function foo(){
        console.log(scope);//undefined
        var scope = 'local';
        console.log(scope);//local
    }
    console.log(scope);//global
    
    面试题 03
    // js 没有块级作用域
    // 全局变量会自动成为window的属性
    if('a' in window){
        var a = 10;
    }
    console.log(a);//10
    
    面试题 04
    // 变量提升
    function f1(){
        if('a' in window){
            var a = 10;
        }
        console.log(a); //undefined
    }
    f1();
    
    面试题 05
    if(!'a' in window){
        var a = 10;
    }
    console.log(a);// undefined
    
    分析:
    先!('a'),后判断 in window
    !优先级很高
    
    面试题 06
    var foo = 1;
    function bar(){
        if(!foo){
            var foo =10;
        }
        console.log(foo); // 10;
    }
    bar();
    
    面试题 07
    function Foo(){
        getName = function(){
            console.log('1');
        }
        return this;
    }
    Foo.getName = function(){
        console.log('2');
    }
    Foo.prototype.getName = function(){
        console.log('3');
    }
    var getName = function(){
        console.log('4');
    }
    function getName() {
        console.log('5')
    }
    Foo.getName(); //2
    getName()  // 4
    Foo().getName(); //1 
    
    getName(); // 1
    new Foo.getName(); //2
    
    new Foo().getName();//3
    new new Foo().getName();//3
    
    

    作用域链

    • 1.函数可以创建作用域
    • 2.函数中可以声明一个函数
    • 3.函数的函数中也可以声明一个函数
    • 以上就形成一个作用域链
    作用域绘图

    相关文章

      网友评论

        本文标题:JS高级 05

        本文链接:https://www.haomeiwen.com/subject/tfmyjftx.html