严格模式和普通模式的区别
程序员文章站
2022-06-28 19:16:07
简介严格模式的优点规避代码不严谨不规范的地方,提高了安全性提高了编译器的执行效率为后续版本做铺垫在当前环境顶部,使用了 “use strict”,此时的环境变成了严格模式环境在script标签的顶部写“use strict”在函数的顶部写“use strict”严格模式和普通模式有以下几种区别变量声明禁止使用with禁止eval作用域函数中的this指向问题删除变量函数参数不能重名八进制字面量表示法arguments不追踪参数变化变量声明注意,第一段代码是严格...
简介
严格模式的优点
- 规避代码不严谨不规范的地方,提高了安全性
- 提高了编译器的执行效率
- 为后续版本做铺垫
在当前环境顶部,使用了 “use strict”,此时的环境变成了严格模式环境
- 在script标签的顶部写“use strict”
- 在函数的顶部写“use strict”
严格模式和普通模式有以下几种区别
- 变量声明
- 禁止使用with
- 设立eval作用域
- 函数中的this指向问题
- 删除变量
- 函数参数不能重名
- 八进制字面量表示法
- arguments不追踪参数变化
变量声明
注意,第一段代码是严格模式下,第二段代码是普通模式下,后续的内容的也是如此。
var a = 10;
a = 20;
b = 20; //报错,b is not defined
var a = 10;
b = 20; //不会报错,默认b已经被var变量声明
禁止使用with
var obj = {
a: 1,
b: 2
}
with(obj) { //报错 禁止使用with
console.log(a);
console.log(b);
}
var obj = {
a: 1,
b: 2
}
with(obj) {
console.log(a); //1
console.log(b); //2
}
禁止eval作用域
eval("var a = 10; console.log(a)"); //把参数当成js来解析
console.log(a);//报错 访问不到
eval("var a = 10; console.log(a)"); //把参数当成js来解析
console.log(a);
函数中的this指向问题
//谁调用这个函数或者方法,函数(方法)中的this就指向谁
function foo() {
console.log(this); //undefined
}
foo(); //严格来讲foo的前面没有放任何具体的对象
window.foo(); //这样写,有具体的调用者,指向调用者,这时函数中的this指向window
//谁调用这个函数或者方法,函数(方法)中的this就指向谁
function foo() { //全局函数可以看成是window对象的方法
console.log(this);
}
foo(); //相当于window.foo();
//扩展一下
btn.onclick = function () {
console.log(this); //btn
};
btn.onclick(); //一样可以调用该方法,所以对于事件驱动函数,这个结论也是成立的(谁调用这个函数或者方法,函数或者方法中的this就指向谁)
删除变量
delete是用来删除对象属性的,这里的区别在于删除变量
var a = 10;
delete a; //严格模式下使用delete运算符删除一个变量,会报错
console.log(a);
var a = 10;
delete a; //使用delete运算符删除一个不通过var来声明的变量,可以删除,删除以后,就无法再访问这个变量
//如果删除通过var来声明的变量,不会报错,但删不掉
console.log(a);
函数参数不能重名
function foo(x, x) {
console.log(x);//报错
}
foo(1, 2);
function foo(x, x) {
console.log(x); //不报错,但有歧义,这里的结果是2
}
foo(1, 2);
八进制字面量表示法
var num = 012;
console.log(num); //报错,Octal literals are not allowed in strict mode.
var num = 012;
console.log(num); //10
arguments不追踪参数变化
function foo(x) {
x = 2;
console.log(arguments[0]); //1,保存的实参的集合
}
foo(1, 1);
function foo(x) {
x = 2;
console.log(arguments[0]); //2,这里的x不是1,实参被修改了。
}
foo(1, 1);
本文地址:https://blog.csdn.net/qq_38053677/article/details/107497710
上一篇: vue常用项目结构封装分析及心得