js字节面试题 读代码题 精讲

这是在牛客上看到的今天一个中国地质大学面试的上海字节的前端题  读代码题

下面这段便是从那里搬过来的

********

看代码说答案，关于this指向的，我说错了，甚至我还不知道为什么 看来还需要补补

const length = 10
const fn = function () {
    return this.length + 1
}
const obj = {
    length: 5,
    test: function () {
        return fn()
    }

}
//下面输出是什么？
console.log(obj.test())

*******

首先答案是1，

因为fn调用的时候是普通函数，

this指向顶级对象window,

而es6中let和const作为全局变量的时候都不在顶级对象window里，

此时的this.length便是window.length也就是是frames的数量,而不是变量，是方法了，所以不是undefine,而是0，可以去mdn查到https://developer.mozilla.org/zh-CN/docs/Web/API/Window/length ，

所以this.length结果是0，之后+1后返回的就是1了

这里的主要考到的知识点就是：

1. 对象中方法调用的函数，this指向的是顶级对象window,而不是对象中方法的this.
2. let,const 作为es6的语法，es6之前，全局变量是在顶级对象window下面，es6之后的let和const则是全局变量和顶级对象window分开，所以winows获取不到

3.  window.length也就是是frames的数量，可以去mdn查到https://developer.mozilla.org/zh-CN/docs/Web/API/Window/length ，

注意：

 1.node.js   顶级对象：global
2.浏览器                     window
3.jquery                    $

其中在浏览器中  答案是0+1=1，但是在node中答案undefine+1=NaN

这是因为顶级对象不一样