一、严格模式
ES5拓展了严格模式,使我们的代码更加的安全可靠
在之前书写的代码都是出于正常模式下
正常模式下,定义一个变量可以不使用var, 严格模式下不允许的
正常模式下,可以使用八进制,严格模式下是不允许
正常摸下,可以使用arguments.callee, 严格模式下是不允许
1.1 开启严格模式
使用方式: “use strict”
加入”use strict”之后,如果认识它的浏览器就会自动开启严格模式,如果不认识它的浏览器也只是当做一个字符串定义, 不会影响后续代码
开启严格模式之后,就必须按照严格模式的代码规范书写代码
在js代码第一行加入”use strict”, 此时代码将处于“全局严格模式”
在某个函数的第一行加入“use strict”, 当函数执行的时候,此时函数将处于“局部严格模式”
举例:
在正常模式下:
1 // 使用var 定义变量 2 var a = 10; 3 4 // 不使用val 在严格模式下是不允许 5 b = 20; |
在严格模式下:
1 // 开启严格模式 在开启严格模式代码之前, 仍处于正常模式 2 "use strict" 3 // 使用var 定义变量 4 var a = 10; 5 6 // 不使用val 在严格模式下是不允许 7 b = 20; |
报错:
1 |
举例:
1 // 局部严格模式 2 // 定义函数 3 function localStrict() { 4 // 开启严格模式 5 "use strict" 6 // 定义变量 7 var a = 10; 8 // b = 11; 9 } 10 11 localStrict(); 12 13 14 // 不使用var 定义变量 15 c = 20; |
1.2 在严格模式下定义变量
在严格莫下定义变量必须使用val声明
允许:
1 var a = 10 |
不允许:
1 b = 20 |
举例:
1 // 开启严格模式 2 "use strict" 3 // 使用var 定义变量 4 var a = 10; 5 6 // 不使用var 定义变量 7 // 在严格模式下不允许 不使用var定义变量 8 b = 20; |
1.3 八进制
在js中有三种进制, 分别是8进制,10进制, 16进制
默认是10进制
以0开头是8进制
以0x, ox开头是16进制
允许:
1 var num = 16; 2 var num1 = 0xff |
不允许:
1 var num = 011; |
举例:
在正常模式下:
1 // 定义变量 2 var num = 16; 3 var num1 = 0xff; 4 5 var num2 = 011; |
输出:
1 |
在严格模式下:
1 // 开启严格模式 2 "use strict" 3 var num2 = 011; |
会报错:
1 |
1.4 arguments.callee
代码写的越“具体”, 越能提升性能
arguments.callee在编译阶段是无法解析出来,只有当执行到的时候才能确定下来,所以就无从提升性能
在正常模式下:
1 // 安全类 2 function People(name, age, sex) { 3 // 判断this指向 4 if (this instanceof arguments.callee) { 5 this.name = name; 6 this.age = age; 7 this.sex = sex; 8 } else { 9 // 没有使用new 调用 10 return new arguments.callee(name, age, sex); 11 } 12 } 13 14 // 实例化对象 15 var p = new People("小明", 12, "男"); 16 var p1 = People("小龙", 12, "男"); |
输出:
1 |
在严格模式下:
1 // 开启严格模式 2 "use strict" 3 // 安全类 4 function People(name, age, sex) { 5 // 判断this指向 6 if (this instanceof arguments.callee) { 7 this.name = name; 8 this.age = age; 9 this.sex = sex; 10 } else { 11 // 没有使用new 调用 12 return new arguments.callee(name, age, sex); 13 } 14 } 15 16 // 实例化对象 17 var p = new People("小明", 12, "男"); 18 var p1 = People("小龙", 12, "男"); |
会报错:
1 |
1.5 delete
使用delete可以删除对象中属性
如果要删除一个变量
在正常模式下,可以执行成功, 不会删除成功,但是不会报错,而严格模式下会报错
正常模式下:
1 // 定义全局变量 2 var a = 10; 3 window.b = 20; 4 5 // 删除变量 6 console.log(delete a); 7 console.log(delete b); |
输出:
1 |
严格模式下:
1 // 开启严格模式 2 "use strict" 3 // 定义全局变量 4 var a = 10; 5 window.b = 20; 6 7 // 删除变量 8 console.log(delete a); 9 console.log(delete b); |
会报错:
1 |
1.6 使用保留字定义变量
正常模式下可以使用保留字定义变量
严格模式是不允许使用
在正常模式下:
1 // 使用保留字 2 var public = "hehe"; |
输出:
1 |
在严格模式下:
1 // 开启严格模式 2 "use strict" 3 // 使用保留字 4 var public = "hehe"; |
会报错:
1 |
1.7 eval
eval是一个函数,可以将字符串当做代码执行,但是会污染全局作用域
在严格模式下是不允许使用的, 所以可以避免污染全局作用域
举例:
在正常模式下:
1 // 定义变量 2 var strcode = "var a = 10"; 3 4 // eval接受一个参数就是字符串, 执行结果就是字符串代码 5 // 当eval执行的时候, a真的被定义出来了 6 eval(strcode); |
输出:
1 |
在严格模式下:
1 // 开启严格模式 2 "use strict" 3 // 定义变量 4 var strcode = "var a = 10"; 5 6 // eval接受一个参数就是字符串, 执行结果就是字符串代码 7 // 当eval执行的时候, a真的被定义出来了 8 eval(strcode); |
结果:
1 |
1.8 with
with是一个语法。 在代码执行的时候,会改变作用域
with (target) {
console.log(a) // 如果target中存在a 属性, 那么会优先输出a, 如果没有回沿着词法作用域一直往上查 找
}
举例:
正常模式下:
1 // 定义对象 2 var obj = { 3 a: 1, 4 b: 2 5 } 6 7 var a = 10; 8 var b = 20; 9 10 // 使用with 11 with (obj) { 12 // 此时obj 中 存在a 和 b 那么会优先输出 obj中的a和b 13 console.log(a); 14 console.log(b); 15 // 此时obj中存在a属性, 所以优先改变的是Obj中的a 16 a = 111; 17 // obj中没有c 所以会将c添加在全局中 18 c = 123; 19 } |
结果:
1 |
严格模式下:
1 // 开启严格模式 2 "use strict" 3 // 定义对象 4 var obj = { 5 a: 1, 6 b: 2 7 } 8 9 var a = 10; 10 var b = 20; 11 12 // 使用with 13 with (obj) { 14 // 此时obj 中 存在a 和 b 那么会优先输出 obj中的a和b 15 console.log(a); 16 console.log(b); 17 // 此时obj中存在a属性, 所以优先改变的是Obj中的a 18 a = 111; 19 // obj中没有c 所以会将c添加在全局中 20 c = 123; 21 } |
结果:
1 |
1.9 变量名称
在正常模式下,在一个对象中定义属性可是用名的
严格模式下,不会报错, 只是浏览器检测不出来
正常模式下:
1 // 定义对象 2 var obj = { 3 a: 1, 4 a: 2 5 } 6 7 console.log(obj.a); |
输出:
1 |
严格模式下:
1 // 开启严格模式 2 "use strict" 3 // 定义对象 4 var obj = { 5 a: 1, 6 a: 2 7 } 8 9 console.log(obj.a); |
输出:
1 |
注:没有区别, 不是严格模式没有开启, 只是浏览器没有实现
1.10 全局函数作用域
在全局函数作用域的this指向window, 会污染全局作用域
在严格模式下全局函数作用域中的this 变为undefined, 就可以避免对全局作用域的污染
在正常模式下:
1 // 定义函数 2 function fun() { 3 var b = 10; 4 console.log(b); 5 // 全局函数作用域 6 console.log(this); 7 // 添加属性 8 this.color = "red"; 9 } 10 11 fun(); |
严格模式下:
1 // 开启严格模式 2 "use strict" 3 4 5 // 定义函数 6 function fun() { 7 var b = 10; 8 console.log(b); 9 // 全局函数作用域 10 console.log(this); 11 // 添加属性 12 this.color = "red"; 13 } 14 15 fun(); |
结果:
1 |
1.11 函数参数
正常模式下,定义函数的参数可以是同名的, 但是后面会覆盖前面的
严格模式下不允许定义同名参数
正常模式下:
1 // 定义函数 2 function fun(color, color) { 3 console.log(color); 4 } 5 6 fun("red", "blue"); |
输出:
1 |
严格模式下:
1 // 开启严格模式 2 "use strict" 3 4 5 // 定义函数 6 function fun(color, color) { 7 console.log(color); 8 } 9 10 fun("red", "blue"); |
结果:
1 |
扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !
爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!
我们前端课程的五大优势:
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习)
3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K
4. 免费学习一周,不满意不收取任何费用
5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐