JavaScript严格模式(use strict)是什么 如何开启严格模式

目录
文章目录隐藏
  1. 一、什么是严格模式?
  2. 二、开启严格模式
  3. 三、 严格模式中的变化
  4. 拓展

一、什么是严格模式?

JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略

格模式对正常的 JavaScript 语义做了一些更改:

  • 消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。
  • 消除代码运行的一些不安全之处,保证代码运行的安全。
  • 提高编译器效率,增加运行速度。
  • 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的 Javascript 做好铺垫。比如一些保留字如:class, enum, export, extends, import, super 不能做变量名。

二、开启严格模式

1、为脚本开启严格模式

为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句“use strict”;(或‘use strict’;)。

如下:

"use strict";
console.log("这是严格模式。");

当我们给整个script标签添加了下述语句后,就意味着在该标签内,即整个脚本文件中开启了严格模式。但是,要注意的是:因为"use strict"加了引号,所以老版本的浏览器(IE10 以前)会把它当作一行普通字符串而忽略。

而且为了防止变量污染,就可以在script标签内部加一个立即执行函数,然后将所有的脚本放入该函数中,就相当于为整个脚本开启一个独立的作用域空间,然后为其开启严格模式,代码如下:

(function(){
    'use strict';
})()

2、为函数开启严格模式

要给某个函数开启严格模式,需要把“use strict”; (或 'use strict';) 声明放在函数体所有语句之前。

例如现在有两个函数,但是我们只想给第一个函数加严格模式,可以进行如下操作:

function f1(){
    'use strict';
}
function f2(){
            
}

只需要将严格模式的执行语句添加给第一个函数就可以实现了。

三、 严格模式中的变化

严格模式对 Javascript 的语法和行为,都做了一些改变。

1. 变量规定

(1) 在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,变量都必须先用var 命令声明,然后再使用。

例如现在有一个函数,我们没有给其变量赋值,在没有给定严格模式前:

function f1(){
    num = 10;
    console.log('num 的值是:'+num);
}
f1();

打印结果为:

严格模式中的变化

当我们给该函数添加严格模式后:

function f1(){
    'use strict';
    num = 10;
    console.log('num 的值是:'+num);
}
f1()

打印结果为:

函数添加严格模式后

打印出错。

(2) 严禁删除已经声明变量。例如,delete x 语法是错误的。

将上述的例子给num变量定义后,在删除该变量看看会怎样。

function f1(){
    'use strict';
    var num = 10;
    console.log('num 的值是:'+num);
    delete num;
}
f1()

打印结果为:

严禁删除已经声明变量

可知无法删除。

2、严格模式下 this 指向问题

(1) 以前在全局作用域函数中的 this 指向 window 对象。 严格模式下全局作用域中函数中的 this 是 undefined

function f1(){
    'use strict';
    console.log('严格模式下普通函数的 this:'+this);
}
f1()

输出结果为:

严格模式下 this 指向问题

(2) 以前构造函数时不加 new也可以 调用,当普通函数,this 指向全局对象。严格模式下,如果构造函数不加new调用, this指向的是undefined,如果给他赋值则会报错。

创建一个构造函数,将其当做普通函数直接调用,因为普通函数正常情况下this的指向是window,

function Star(){
    this.name = 'xl';
}
Star()

打印window.name看看结果:

console.log(window.name);

打印结果为:

打印结果

可以得到属性值。

而当给该构造函数加入严格模式后打印的结果为:

构造函数加入严格模式后

可知打印有误,这是因为在严格模式下,普通函数的this指向undefine

(3) new 实例化的构造函数指向创建的对象实例。

那如果给构造函数通过new实例化后呢?我们试一下。

function Star(){
    'use strict'
    this.name = 'xl';
}
var s = new Star();
console.log(s.name);

打印的结果为:

打印结果

即严格模式下new 实例化的构造函数指向创建的对象实例。

(4) 定时器 this 还是指向 window

那在定时器的严格模式下this又是如何指向的呢?

如下:

'use strict'
setTimeout(function(){
    console.log(this);
})

打印结果为:

定时器 this 还是指向 window

可知,在该模式下,定时器 this 还是指向 window

(5) 事件、对象还是指向调用者。

在严格模式下事件、对象中的this还是指向调用者,方法同上,就不在赘述。

3、函数变化

(1) 函数不能有重名的参数。

举例说明,比如现在有一个函数,我们将它的两个形参命名相同,在进行相应的操作,如下:

function fn(a,a){
    console.log(a+a);
}
fn(1,2)

打印的结果为:

函数不能有重名的参数

可以发现能够正常运行。但是运行的结果却是错误的。为什么呢?这是因为当我们给两个相同的参数时,第二个的值或覆盖掉第一个参数的值。

那么在严格模式下呢?

'use strict'
function fn(a,a){
    console.log(a+a);
}
fn(1,2);

严格模式下

可知运行出错。所以函数不能有重名的参数。

(2) 函数必须声明在顶层,新版本的 JavaScript 会引入“块级作用域”( ES6 中已引入)。为了与新版本接轨,不允许在非函数的代码块内声明函数。

例如下面的代码就是错误的:

if(n === 3){
    function fn(){
        conssole.log('您输入的值是 2');
    }
    fn();
}
for(var i =0;i<=5;i++){
    function fn(){
        console.log('你好')
    }
    fn();
}

拓展

想了解更多关于严格模式要求,请点击链接

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » JavaScript严格模式(use strict)是什么 如何开启严格模式

发表回复