JS高级 05

面向对象实例(图书管理操作)

• 报错异常: 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.函数的函数中也可以声明一个函数
• 以上就形成一个作用域链

作用域绘图