前端理论面试- 谈谈this和js严格模式

1. 谈谈JavaScript中的this。

this的指向
this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写，例如：this.alert() <=> window.alert()<=> alert();
调用的上下文环境包括全局和局部
1）全局环境就是在<script></script>里面，这里的this始终指向的是window对象;
2）局部环境里的this，在全局作用域下直接调用函数，this指向window；
3）对象函数调用，哪个对象调用this就指向哪个对象
4）使用 new 实例化对象，在构造函数中的this指向实例化对象。
5）使用call或apply改变this的指向

<script>
  console.log(this) // 指向window对象
  var a = 'this'
    function fn (){
        console.log(this.a)
    }
    fn();  // this指向window对象
    var obj = {
        a: 'that',
        fn: fn
    }
    obj.fn()  // this指向obj对象
    function func(){
        console.log(this)
    }
    var bar = new func()  // this指向func()对象
    func.call(obj)  // this指向obj对象
</script>

在严格模式下（'use strict'）

function f1() {
  'use strict'
  console.log(this)
}
function f2() {
  console.log(this)
}
f1() // this 是undefined
f2() // this 是window 对象

严格模式下this不允许指向全局对象是指在函数内部

'use strict'
function fn() {
  this.a = 1
}
fn()  // 报错 Uncaught TypeError: Cannot set property 'a' of undefined

JavaScript的函数调用时会隐性的接收到两个附加的参数：this和 arguments。
arguments它是JS的一个内置对象，每一个函数都有一个arguments对象，它包括了函数所要调的参数，通常我们把它当作数组使用，用它的length得到参数数量，但它却不是数组。

二. js严格模式

上面提到严格模式和一般模式，this指向的差异，下面来谈谈就是严格模式。
面试的时候，发现很多时候如果问到this之后，都没接着问一下js的严格模式和一般模式的区别？
js严格模式：
对于 JavaScript 严格模式与非严格模式的区别，强烈建议大家去查看权威文档 MDN: 严格模式。
ECMAScript 5的严格模式是采用具有限制性JavaScript变体的一种方式，从而使代码显示地脱离“马虎模式/稀松模式/懒散模式“（sloppy）模式。
严格模式不仅仅是一个子集：它的产生是为了形成与正常代码不同的语义。
严格模式对正常的 JavaScript语义做了一些更改。

严格模式通过抛出错误来消除了一些原有静默错误。
严格模式修复了一些导致 JavaScript引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快。
严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法。

严格模式与非严格模式的不同

严格模式下，不允许使用with。
严格模式下，不允许给未声明的变量赋值。
严格模式下，arguments变为参数的静态副本。非严格模式下，arguments对象里的元素和对应的参数是指向同一个值的引用

!function(a) {
 arguments[0] = 100;
 console.log(a); //100 
}(1); 
!function(a) {
 'use strict';
 arguments[0] = 100; 
console.log(a); //1 
}(1);

但是：传的参数是对象除外。arguments和形参共享传递。

!function(a) {
    'use strict';
    console.log(a.x);  //1
    arguments[0].x = 100;
    console.log(a.x);  //100
}({x: 1});

严格模式下，eval，arguments成为关键字，不能用作变量，函数名。
严格模式下，eval变成了独立作用域。
严格模式下，删除参数名，函数名报错。非严格模式返回false，静默失败。(静默失败：不报错也没有任何效果)
严格模式下，函数参数名重复报错。非严格模式最后一个重名参数会覆盖之前的重名参数。
严格模式下，对象字面量重复属性名报错。

!function() { 
var obj = { x: 1, x: 2 }; 
  console.log(obj.x); //2 
}(); 
!function() { 
  'use strict';
  var obj = { x: 1, x: 2 }; 
  console.log(obj.x); //IE10+报错。IE7~9、Chrome、FF不报错，结果为：2
}();

亲测：IE10+报错：strict 模式下不允许一个属性有多个定义。IE7~9，Chrome，FF不报错。其他浏览器未测。

严格模式下，禁止八进制字面量。
严格模式下，给只读属性赋值报错。
严格模式下，给不可扩展对象的新属性赋值报错。
ES6中，严格模式下，禁止设置五种基本类型值的属性。
严格模式下，一般函数调用(不是对象的方法调用，也不使用apply/call/bind等修改this)，this指向undefined，而不是全局对象。
严格模式下，一些保留字。
在严格模式中一部分字符变成了保留的关键字。这些字符包括implements, interface, let, package, private, protected, public, static 和 yield。在严格模式下，你不能再用这些名字作为变量名或者形参名。

关于严格模式跟多或者更详细的了解可以查看严格模式文档
MDN: 严格模式。
相关来源博客：JavaScript严格模式。

"严格模式"的优点：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
注：经过测试 IE6,7,8,9 均不支持严格模式。

缺点：

现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

使调试更加容易。那些被忽略或默默失败了的代码错误，会产生错误或抛出异常，因此尽早提醒你代码中的问题，你才能更快地指引到它们的源代码。
变量在赋值之前必须声明,防止意外的全局变量。如果没有严格模式，将值分配给一个未声明的变量会自动创建该名称的全局变量。这是JavaScript中最常见的错误之一。在严格模式下，这样做的话会抛出错误。
取消this值的强制转换。如果没有严格模式，引用null或未定义的值到 this 值会自动强制到全局变量。在严格模式下，引用 null或未定义的 this 值会抛出错误。严格模式下，this不会指向window
不允许重复的属性名称或参数值。当检测到对象中重复命名的属性，

加油吧，切图仔。前端深似海。

前端理论面试- 谈谈this和js严格模式

1. 谈谈JavaScript中的this。

二. js严格模式

"严格模式"的优点：

缺点：

推荐阅读更多精彩内容