首页手记记我朋友的一次前端面试

记我朋友的一次前端面试

标签：

JavaScript 面试

今天一位兄弟去面试嘛，大概就问到两道题目。然后他平时也不怎么喜欢深究基础的，我在这里呢？就重点来讲一下这两道题目该怎么作答。

一、 Array.prototype.slice.call(arguments)

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组。如下所示：

{
  let a={length:2,0:'a',1:'b'};
  Array.prototype.slice.call(a);//  ["a", "b"]

  let a={length:3};
  Array.prototype.slice.call(a);//  [undefined, undefined,undefined]
}

其实熟悉小红书（java高级程序设计）的人，应该都知道这个原理，我在这里呢？推荐大家好像去深究一下小红书。
关于里面的方法首先call呢？我前面一篇文章谈一谈我如何使用call、apply、bind里面有详细的讲到call的使用方法。

然后就是slice:slice有两个用法：一个是String.slice,一个是Array.slice，第一个返回的是字符串，第二个返回的是数组。我在这里呢？主要探究的是后者，关于slice的源码


function slice(start, end) { 
var len = ToUint32(this.length), result = []; 
for(var i = start; i < end; i++) { 
    result.push(this[i]); 
} 
    return result; 
}

所以按照源码来探究的话 Array.prototype.slice.call(arguments) 应该就是：

Array.prototype.slice = function(start,end){
     var result = new Array();
     start = start || 0;
     end = end || this.length; //call改变了this的指向
     for(var i = start; i < end; i++){
          result.push(this[i]);
     }
     return result;
}

我相信经过我的这种深层次的探究，差不多也就明白了，这个的含义。

二、 vue双向绑定

关于数据的双向绑定，这个我发现我这里写不了比较复杂的代码，原本以为，我可以来写一个订阅-发布者模式，但是考虑到面试，就写几个比较简单就可以了。

<!DOCTYPE html>
 <head></head>
 <body>
  <div id="app">
    <input type="text" id="a">
    <span id="b"></span>
  </div>

  <script type="text/javascript">
   var obj = {};
   Object.defineProperty(obj, 'hello', {
       get: function() {
           console.log('get val:'+ val);
           return val;
       },
       set: function(newVal) {
            val = newVal;
            console.log('set val:'+ val);
            document.getElementById('a').value = val;
            document.getElementById('b').innerHTML = val;
       }
    });
    document.addEventListener('keyup', function(e) {
      obj.hello = e.target.value;
    });
   </script>
  </body>
</html>

上面是一个比较简单的例子，这是在我们知道dom的id的情况下来做的一个数据的双向绑定。代码比较简单，亲测可用