js面试题（1）

1. 有一个类如下：

function Person(name) {
    this.name = name
}
let p = new Person('Tom');

p.__proto__等于什么？
答案：

Person.prototype

Person.__proto__等于什么？
答案：

Function.prototype

2. 有一个类如下：

var foo = {},
    F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';

console.log(foo.a)   //value a
console.log(foo.b)   //undefined
console.log(F.a)     //value a
console.log(F.b)     //value b

3. 若将题干改为

function Person(name) {
    this.name = name
    return name;
}
let p = new Person('Tom');

复制代码实例化Person过程中，Person返回什么（或者p等于什么）？
答案：

{name: ‘Tom’}

4. typeof和instanceof的区别:

答案：

在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof
运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。 语法：object
instanceof constructor 参数：object（要检测的对象.）constructor（某个构造函数）
描述：instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

5. 如果Student inherit from Person（Student类继承Person，需是基于原型的继承），let s = new Student(‘Lily’)，那么s instanceof Person返回什么？

function Person (name) {
    this.name = name;
}

function Student () {
    
}

Student.prototype = Person.prototype;
Student.prototype.constructor = Student;

let s = new Student('Tom');
console.log(s instanceof Person); // 返回 true

6.原型链 x instanceof y => x会一直沿着隐式原型链__proto__向上查找直到x.proto.proto…===y.prototype为止，如果找到则返回true，也就是x为y的一个实例。否则返回false，x不是y的实例。

function F() {}
function O() {}
O.prototype = new F();
var obj = new O();

console.log(obj instanceof O); // true
console.log(obj instanceof F); // true
console.log(obj.__proto__ === O.prototype); // true
console.log(obj.__proto__.__proto__ === F.prototype); // true

function F() {}
function O() {}
var obj = new O();
O.prototype = new F();

console.log(obj instanceof O); // false
console.log(obj instanceof F); // false
console.log(obj.__proto__ === O.prototype); // false
console.log(obj.__proto__.__proto__ === F.prototype); // false

function F() {}
function O() {}
var obj = new O();
O.__proto__ = new F();

console.log(obj instanceof O); // true
console.log(obj instanceof F); // false
console.log(obj.__proto__ === O.prototype); // true
console.log(obj.__proto__.__proto__ === F.prototype); // false

7.原型链图:

8.下面代码输出什么？

for(var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i)
    }, 0)
}

答案:

10个10

若要输出从0到9，怎么办？
答案:
将var改为let，或者使用闭包。

// 使用闭包
for(var i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(() => {
        console.log(i)
    }, 0);
  })(i);
}

9. 箭头函数This指向问题？
默认指向在定义它时,它所处的对象,而不是执行时的对象,定义它的时候,可能环境是window（即继承父级的this）。

let obj = {
  name:'雄安',
  age:18,
  fn:function(){
    (()=>{
      console.log(this)
    })()
  }
}
obj.fn(); //obj {name: "雄安", age: 18, fn: ƒ}

let obj = {
  name:'雄安',
  age:18,
  fn:()=>{
    console.log(this)
  }
}
obj.fn(); //Window {parent: Window, postMessage: ƒ,…}

10. forEach、for in 、 for of三者的区别:

forEach方法 用来遍历数组
for-in循环用来遍历对象 实际是为循环”enumerable“对象而设计的
for-of 用来循环数组

11.说一下你对generator的了解？
Generator 函数是 ES6 提供的一种异步编程解决方案Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

12.使用过flex布局吗？flex-grow和flex-shrink属性有什么用？
flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

13. 说一下macrotask 和 microtask？并说出下面代码的运行结果。

console.log('a');
setTimeout(() => {
    console.log('b');
}, 0);
console.log('c');
Promise.resolve().then(() => {
    console.log('d');
})
.then(() => {
    console.log('e');
});

console.log('f');

答案：

acfdeb

14. Http请求中的keep-alive有了解吗。

答案：
在http早期，每个http请求都要求打开一个tpc socket连接，并且使用一次之后就断开这个tcp连接。
使用keep-alive可以改善这种状态，即在一次TCP连接中可以持续发送多份数据而不会断开连接。通过使用keep-alive机制，可以减少tcp连接建立次数，也意味着可以减少TIME_WAIT状态连接，以此提高性能和提高httpd服务器的吞吐率(更少的tcp连接意味着更少的系统内核调用,socket的accept()和close()调用)。
但是，keep-alive并不是免费的午餐,长时间的tcp连接容易导致系统资源无效占用。配置不当的keep-alive，有时比重复利用连接带来的损失还更大。所以，正确地设置keep-alive
timeout时间非常重要。

17.数组扁平化处理：实现一个flatten方法，使得输入一个数组，该数组里面的元素也可以是数组，该方法会输出一个扁平化的数组。

// Example
let givenArr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
let outputArr = [1,2,2,3,4,5,5,6,7,8,9,11,12,12,13,14,10]

// 实现flatten方法使得
flatten(givenArr)——>outputArr

答案：

//方法一  递归
function flatten(arr){
    var res = [];
    for(var i=0;i<arr.length;i++){
        if(Array.isArray(arr[i])){
            res = res.concat(flatten(arr[i]));
        }else{
            res.push(arr[i]);
        }
    }
    return res;
}

//方法二
function flatten(arr){
    return arr.reduce(function(prev,item){
        return prev.concat(Array.isArray(item)?flatten(item):item);
    },[]);
}
//方法三 使用ES6拓展运算符
function fnn(arr){
  while(arr.some(item=>Array.isArray(item))){
    arr = [].concat(...arr);
  }
  return arr;
}
//数组方法：
//every()每个都满足返回true否则返回false
//some()只要有一个满足就返回true否则返回false
//sort(排序)和unique(去重)等方法。

原文连接