技术文章 | Technical articles

web前端开发源码笔记_ES5 第二天


一、严格模式

ES5拓展了严格模式,使我们的代码更加的安全可靠

在之前书写的代码都是出于正常模式下

正常模式下,定义一个变量可以不使用var, 严格模式下不允许的

正常模式下,可以使用八进制,严格模式下是不允许

正常摸下,可以使用arguments.callee, 严格模式下是不允许

 

1.1 开启严格模式

使用方式:use strict

加入use strict之后,如果认识它的浏览器就会自动开启严格模式,如果不认识它的浏览器也只是当做一个字符串定义, 不会影响后续代码

开启严格模式之后,就必须按照严格模式的代码规范书写代码

js代码第一行加入use strict, 此时代码将处于“全局严格模式”

在某个函数的第一行加入use strict, 当函数执行的时候,此时函数将处于“局部严格模式”

举例:

在正常模式下:

// 使用var 定义变量

var a = 10;

// 不使用val 在严格模式下是不允许

b = 20;

图片1.png 

在严格模式下:

// 开启严格模式  在开启严格模式代码之前, 仍处于正常模式

"use strict"

// 使用var 定义变量

var a = 10;

// 不使用val 在严格模式下是不允许

b = 20;

报错:

图片2.png

 

举例:

// 局部严格模式

// 定义函数

function localStrict() {

// 开启严格模式

"use strict"

// 定义变量

var a = 10;

// b = 11;

}

10 

11 localStrict();

12 

13 

14 // 不使用var 定义变量

15 c = 20;

 

1.2 在严格模式下定义变量

在严格莫下定义变量必须使用val声明

允许:

var a = 10

不允许:

b = 20

 

举例:

// 开启严格模式

"use strict"

// 使用var 定义变量

var a = 10;

// 不使用var 定义变量

// 在严格模式下不允许 不使用var定义变量

b = 20;

 

1.3 八进制

js中有三种进制, 分别是8进制,10进制, 16进制

默认是10进制

0开头是8进制

0x, ox开头是16进制

 

允许:

var num = 16

var num1 = 0xff

 

不允许:

var num = 011;

 

举例:

在正常模式下:

// 定义变量

var num = 16;

var num1 = 0xff;

var num2 = 011;

输出:

图片3.png

 

在严格模式下:

// 开启严格模式

"use strict"

var num2 = 011;

会报错:

图片4.png

 

1.4 arguments.callee

代码写的越“具体”, 越能提升性能

arguments.callee在编译阶段是无法解析出来,只有当执行到的时候才能确定下来,所以就无从提升性能

 

在正常模式下:

// 安全类

function People(name, age, sex) {

// 判断this指向

if (this instanceof arguments.callee) {

 this.name = name;

 this.age = age;

 this.sex = sex;

} else {

 // 没有使用new 调用

10   return new arguments.callee(name, age, sex);

11  }

12 }

13 

14 // 实例化对象

15 var p = new People("小明", 12, "");

16 var p1 = People("小龙", 12, "");

输出:

图片5.png

 

在严格模式下:

// 开启严格模式

"use strict"

// 安全类

function People(name, age, sex) {

// 判断this指向

if (this instanceof arguments.callee) {

 this.name = name;

 this.age = age;

 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, "");

 

会报错:

图片6.png

 

1.5 delete

使用delete可以删除对象中属性

如果要删除一个变量

在正常模式下,可以执行成功, 不会删除成功,但是不会报错,而严格模式下会报错

 

正常模式下:

// 定义全局变量

var a = 10;

window.b = 20;

// 删除变量

console.log(delete a);

console.log(delete b);

输出:

图片7.png

 

严格模式下:

// 开启严格模式

"use strict"

// 定义全局变量

var a = 10;

window.b = 20;

// 删除变量

console.log(delete a);

console.log(delete b);

 

会报错:

图片8.png

 

1.6 使用保留字定义变量

正常模式下可以使用保留字定义变量

严格模式是不允许使用

 

在正常模式下:

// 使用保留字

var public = "hehe";

 

输出:

图片9.png

 

在严格模式下:

// 开启严格模式

"use strict"

// 使用保留字

var public = "hehe";

会报错:

图片10.png

 

1.7 eval

eval是一个函数,可以将字符串当做代码执行,但是会污染全局作用域

在严格模式下是不允许使用的, 所以可以避免污染全局作用域

举例:

在正常模式下:

// 定义变量

var strcode = "var a = 10";

// eval接受一个参数就是字符串, 执行结果就是字符串代码

// eval执行的时候, a真的被定义出来了

eval(strcode);

 

输出:

图片11.png

 

在严格模式下:

// 开启严格模式

"use strict"

// 定义变量

var strcode = "var a = 10";

// eval接受一个参数就是字符串, 执行结果就是字符串代码

// eval执行的时候, a真的被定义出来了

eval(strcode);

结果:

图片12.png

 

1.8 with

with是一个语法。 在代码执行的时候,会改变作用域

with (target) {

  console.log(a) // 如果target中存在a 属性, 那么会优先输出a, 如果没有回沿着词法作用域一直往上查  

}

举例:

正常模式下:

// 定义对象

var obj = {

a: 1,

b: 2

}

var a = 10;

var b = 20;

10 // 使用with

11 with (obj) {

12  // 此时obj 中 存在a b 那么会优先输出 obj中的ab

13  console.log(a);

14  console.log(b);

15  // 此时obj中存在a属性, 所以优先改变的是Obj中的a

16  a = 111;

17  // obj中没有c 所以会将c添加在全局中

18  c = 123;

19 }

结果:

图片13.png

 

严格模式下:

// 开启严格模式

"use strict"

// 定义对象

var obj = {

a: 1,

b: 2

}

var a = 10;

10 var b = 20;

11 

12 // 使用with

13 with (obj) {

14  // 此时obj 中 存在a b 那么会优先输出 obj中的ab

15  console.log(a);

16  console.log(b);

17  // 此时obj中存在a属性, 所以优先改变的是Obj中的a

18  a = 111;

19  // obj中没有c 所以会将c添加在全局中

20  c = 123;

21 }

结果:

图片14.png

 

1.9 变量名称

在正常模式下,在一个对象中定义属性可是用名的

严格模式下,不会报错, 只是浏览器检测不出来

正常模式下:

// 定义对象

var obj = {

a: 1,

a: 2

}

console.log(obj.a);

 

输出:

图片15.png

 

严格模式下:

// 开启严格模式

"use strict"

// 定义对象

var obj = {

a: 1,

a: 2

}

console.log(obj.a);

输出:

图片16.png

注:没有区别, 不是严格模式没有开启, 只是浏览器没有实现

 

1.10 全局函数作用域

在全局函数作用域的this指向window,  会污染全局作用域

在严格模式下全局函数作用域中的this 变为undefined, 就可以避免对全局作用域的污染

 

在正常模式下:

// 定义函数

function fun() {

var b = 10;

console.log(b);

// 全局函数作用域

console.log(this);

// 添加属性

this.color = "red";

}

10 

11 fun();

图片17.png 

严格模式下:

// 开启严格模式

"use strict"

// 定义函数

function fun() {

var b = 10;

console.log(b);

// 全局函数作用域

10  console.log(this);

11  // 添加属性

12  this.color = "red";

13 }

14 

15 fun();

结果:

图片18.png

 

1.11 函数参数

正常模式下,定义函数的参数可以是同名的, 但是后面会覆盖前面的

严格模式下不允许定义同名参数

 

正常模式下:

// 定义函数

function fun(color, color) {

console.log(color);

}

fun("red", "blue");

 

输出:

图片19.png

 

严格模式下:

// 开启严格模式

"use strict"

// 定义函数

function fun(color, color) {

console.log(color);

}

10 fun("red", "blue");

结果:

图片20.png






扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:

 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐

上一篇文章: web前端开发源码笔记_ES5 第一天
下一篇文章: 学完html+css就可以做的前端项目实战
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>