web3fans / interview-questions-master Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 0 B

前端面试知识点总结

interview-questions-master's People

Stargazers

Watchers

interview-questions-master's Issues

17.浏览器

极客时间上的一个课程，做成的思维导图（需翻墙）https://coggle.it/diagram/Xoq2oI9RpmDW90VQ/t/%E6%B5%8F%E8%A7%88%E5%99%A8

18 前端安全

https://mp.weixin.qq.com/s/j4_psloqbVWDbkiLBTwfIg

14.generator

2.call、apply和bind区别

13.inherit

3.跨域

8.ES6 Proxy

Proxy 是 ES6 中新增的功能，可以用来自定义对象中的操作。
Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

//target表示用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。handle表示一个对象，其属性是当执行一个操作时定义代理的行为的函数。
let p = new Proxy(target, handler); 
//创建一个可撤销的Proxy对象
let q = Proxy.revocable();
//示例代码来自网络，有修改
//使用 Proxy 实现一个数据绑定和监听
     let onWatch = (obj, setBind, getLogger) => {
       let handler = {
         get(target, property, receiver) {
           getLogger(target, property)
           return Reflect.get(target, property, receiver);
         },
         set(target, property, value, receiver) {
           setBind(value);
           return Reflect.set(target, property, value);
         }
      };
       return new Proxy(obj, handler);
     };

     let obj = { a: 1 }
     let value；
     let p = onWatch(obj, (v) => {
       value = v
     }, (target, property) => {
       console.log(`Get '${property}' = ${target[property]}`);
     })
     p.a = 2 // bind `value` to `2`
     p.a // -> Get 'a' = 2

16.memory

9.requestAnimationFrame

requestAnimationFrame告诉浏览器在下次渲染时调用指定的函数callback。

1.promise A+规范实现

6.throttle

/**
 * @description:
 * @param {function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return: {function}
 */
//underscore中源码

_.debounce = function (func, wait, immediate) {
  var timeout, timestamp, result, context, args;

  var later = function () {
    var last = _.now() - timestamp;//_.now()获取当前时间

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;

      if (!immediate) {
        result = func.apply(context, args);
        context = args = null;
      }
    }
  }

  return function () {
    context = this;
    args = arguments;
    timestamp = _.now();

    var callNow = immediate && !timeout;

    if (!timeout) {
      timeout = setTimeout(later, wait);
    }

    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
};

7.debounce

应用场景为：滚动轴事件及提交按钮.网上也有很多实现，但最好的实现我觉得应该是underscore源码重的debounce函数。

/**
 * @description:
 * @param {function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return: {function}
 */
//underscore中源码

_.debounce = function (func, wait, immediate) {
  var timeout, timestamp, result, context, args;

  var later = function () {
    var last = _.now() - timestamp;//_.now()获取当前时间

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;

      if (!immediate) {
        result = func.apply(context, args);
        context = args = null;
      }
    }
  }

  return function () {
    context = this;
    args = arguments;
    timestamp = _.now();

    var callNow = immediate && !timeout;

    if (!timeout) {
      timeout = setTimeout(later, wait);
    }

    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
};

11.DeepClone or ShallowClone

5.instanceof实现

instanceof 是判断原型链上是否存在当前对象的构造函数，具体实现为：

function instanceof (left, right){
    var prototype = right.prototype;
    left = left._proto_;
    while(true){
        if(left === null){
            return false;
        }
        if(left === portotype){
            return true;
        }
        left = left.prototype;
    }
}

10.new

12.module

4.循环中使用闭包解决 var 定义函数的问题

题目：

for ( var i=1; i<=5; i++) {
       setTimeout( function timer() {
               console.log( i );
       }, i*1000 );
}

解决办法：
1.var改成let，创建块作用域
2.使用立即执行函数

for (var i = 1; i <= 5; i++) {
       (function(j) {
         setTimeout(function timer() {
           console.log(j);
         }, j * 1000);
       })(i);
}

3.使用 setTimeout 的第三个参数

for ( var i=1; i<=5; i++) {
       setTimeout( function timer(j) {
               console.log( j );
       }, i*1000, i);
}

web3fans / interview-questions-master Goto Github PK

interview-questions-master's People

Stargazers

Watchers

interview-questions-master's Issues

Recommend Projects

Recommend Topics

Recommend Org