前端笔试题(2020-09-24)

以下两题都只考虑浏览器环境
第一题：读代码，并写出打印结果

var length = 10
function fn() {
    console.log(this.length)
}
var obj = {
    length: 5,
    method: function (fn) {
        fn()
        arguments[0]()
    }
}
obj.method(fn, 1, 2, 3, 4, 5)

答案解析：
代码开始执行，调用了对象obj的method方法，并传入了六个参数：fn, 1, 2, 3, 4, 5，其中fn就是已经定义了的fn函数，method方法本质也是一个函数，在执行的时候接收到了六个形参（fn, 1, 2, 3, 4, 5），但是其自身只定义了一个实参，也就是只接收了fn并在其内部代码的第一行执行了fn，函数内部的this是谁调用，this就指向谁，此时fn的调用者是默认的window，所以this.length的打印值为10。
接下来开始解析代码arguments[0]()，arguments为method方法接收到的形参类数组，其第一项是fn，此时fn的调用者是arguments对象，所以fn内部的this指向了argument对象，arguments作为一个类数组，其内部有length属性标识了形参的个数，所以输出的打印值为6。

拓展：
函数执行时形参和实参的个数不一致时，如果实参多于形参，则按照从前往后的顺序，后面多出的实参为undefined

function arg(f1,f2,f3){
    console.log(f1)  //1
    console.log(f2)  //undefined
    console.log(f3)  //undefined
}
arg(1)

如果形参多于实参，则多出来的形参可以通过arguments对象获取到

function arg(f1){
    console.log(f1)  //1
    console.log(arguments)  //Arguments(3)
}
arg(1,2,3)

第二题：读代码，并写出打印结果

function a(xx) {
    this.x = xx
    return this
}
var x = a(5)
var y = a(6)
console.log(x.x)
console.log(y.x)

答案解析：
函数a的返回值是this，所以当代码运行完var x = a(5)时，此时x为window，var y = a(6)执行之后，此时y为window，x被重新赋值成了6，接下来第一个console语句，打印的是6.x，6是一个数字，所以第一个console输出为undefined。
第二console语句，输出的是window下面的x，所以输出值为6。

拓展：
如果代码是下面这样，此时打印值是什么

function a(xx) {
    this.x = xx
    return this
}
var x = a(5)
console.log(x.x)

答案解析：
此时的打印出的是浏览器的顶级对象window，当var x = a(5)运行的时候，首先函数a中的代码this.x = xx将x赋值为5，但是随即被var x =a(5)给重新赋值成了window。
无论是打印x.x还是x.x.x.x.x（点出任意多个x），输出结果都是window对象。