随笔，记录JavaScript中的面试题

Posted 2020-08-13

我不知道我的js水平怎么样，但是今天有点受打击，看到很多题有坑。看了一些面试题，我记录下今天遇到的坑吧。

问题1：作用域

考虑以下代码，输出结果是什么？

(function() {
 
var a = b = 5;
 
})();
 
console.log(b);

答案是5。

这道题我知道，陷阱在于var a = b =5，如果是声明，应该是var a,b =5;这样a,b的值都为5，由于a,b的都在函数作用域里面，所以外部是输出不出来的，则会显示b = undefined。而这里，由于js的特性，所以这里相当于

var a,
b = 5

这里的b = 5是个隐式变量！！！所以相当于window.b = 5，所以外部是可以访问到的。

问题2：创建“内置”方法

给String对象定义一个repeatify方法。该方法接收一个整数参数，作为字符串重复的次数，最后返回重复指定次数的字符串。例如：

console.log(‘hello‘.repeatify(3));

输出应该是：

hellohellohello.

看到这道题，我就在想，这道题的目的在于解决hello这个字符串，然后要复制3个这个字符串，那么这个特别向我刚看到的一个函数，一会再贴。

   String.prototype.repeatify = String.prototype.repeatify || function ( times ) {
                var str = ‘‘;
                for ( var i = 0 ; i < times ; i++ ) {
                    str += this;
                }
                return str;
            };
            console.log ( ‘hello‘.repeatify(3) );

这里应该考察的是对proptotype，也就是原型的理解。解释下，加深影响！！String.prototype.repeatify相当于给String的原型添加一个自定义的repeatify方法，function（time）这个函数则是方法，

首先定义个str，也就是一个空字符串，用来接受传参。repeatify(3)就是要复制3份输出，那么就遍历下吧，有几次，就加几份，这里传入参数3次，那么for循环3次，让str加上this，这里的this就是指代的自身，就是str。等于str=str+str+str，最后return，将str作为值输出，记得今天看到一句话，函数就是找值！！！！！这句话很重要，就是要用值做别的事情！！

还有个关键点，就是||判断！！！如果有该方法，那就跳过，使用原方法。

问题3 ：声明提前

下面这段代码的结果是什么？为什么？

function test () {
       console.log( a );  //undefined
       console.log( foo() );  // 2
       var a = 1;
       function foo() {
           return 2;
       }
   }
   test();

答案我已经敲出来啦！原来我也不差，这里我需要解释一下，为什么第一个a是undefined呢？很简单啦，这里是声明提升，相当于var a提前到console.log( a );上面去啦，这里a其实并没有赋值，所以就是undefined了；那么为啥函数就可以返回2呢？！因为console.log( foo() );是函数调用，所以在函数体呢，写哪里都是可以的。

问题4：JavaScript中的this

下面代码的运行结果是什么并做解释。

var fullname = ‘John Doe‘;

    var obj = {

        fullname: ‘Colin Ihrig‘,

        prop: {

            fullname: ‘Aurelio De Rosa‘,

            getFullname: function() {

                return this.fullname;

            }}};

    console.log( obj.prop.getFullname() );  // Aurelio De Rosa

    var test = obj.prop.getFullname;

    console.log( test() );  // John Doe

答案我也写出来，也比较简单，主要是对this的考察，听说面试的时候是必考this的！所以，我还要看更多的例子呀。

记住一个关键点就是：javascript中关键字this所指代的函数上下文，取决于函数是怎样被调用的，而不是怎样被定义的。

所以就简单啦，第一个this调用的是prop里的fullname，而第二个test是定义在全局（window）中的，所以就是在全局的调用啦，那么就调用在全局定义的fullname咯。还是不难的哈，希望我以后有个徒弟，能看到这些笔记，也是我的一个成长记录，我要成为伟大的工程师，而不是一个半吊子或者只知道写代码的码农！我要理解其中的原理，这才是我活着的意义，扯远了。。下一个！

问题5：call()和apply()

修复前一个问题，让最后一个console.log() 打印输出Aurelio De Rosa.

考察call和apply。。。我有点无力，因为这个我还真的搞不明白啊，我需要好好看看啦。

这个问题可以通过运用call（）或者apply()方法强制转换上下文环境。

 

console.log(test.call(obj.prop));

 

这里。。我就捂脸看书去吧。。

 

还有个问题！！今天碰到了！！哎呀妈呀，我做错啦，思考了好久，终于在网上求助找到了答案

var a = {n:1};  
var b = a; 
a.x = a = {n:2};  
alert(a.x);// --> undefined  
alert(b.x);// --> Object {n:2}

为啥这里的a.x是undefined呢？我是想了很久没想明白。。。现在明白了，a.x = a = {n:2};由于.运算符优先于=，所以其实这行代码解析为：

1、a.x（在a中创建一个x对象，值为null），同时由于 b = a，所以b中也有一个x为null

2、a = {n:2};这啥意思呢？就是说由于a对象中有n，所以直接修改它的值（哎呀，这让我想到了，创建的字符串、数组是不可修改的！！而对象。。想改就改，没人权啊！）

3、由于b中有x了，那么就把{n:2}添加到b中。

赋值结果就是：

a => {n: 2，x: undefined }
b => {n: 1, x: {n: 2 } }  

 

还有有点绕的啊！不过呢，我还是搞清楚了！啦啦啦~

查完回来——.（点）、()（小括号）、[]（中括号）这三个在js中是运算级最高的！