每周测试04

1、js中call、 apply、 bind有什么区别?

[success] call、 apply、 bind

call和apply是返回值，bind是返回函数

call和bind是选项式参数、apply是数组参数

2、解释浅克隆与深克隆的区别，并列举出实现方法

[success] 浅与深

浅克隆,只克隆对象的第一层属性

深克隆,克隆对象的所有层级的属性

//浅拷贝：
Object.assign({}, {name: '小明'})
//深拷贝：
function deepClone(obj) {
      var x = {}
      for (key in obj) {
        if (typeof obj[key] === 'object') {
          x[key] = deepClone(obj[key])
        }else {
          // x[key] = obj[key]
          x = Object.assign(x, obj)
        }
      }
      return x
    }

3、请写出http请求报文的请求行、请求头、请求体分别有什么作用

[success] 请求

请求行：请求地址、请求类型、状态代码

请求头：请求文本类型、token密钥

请求体：发送的参数

4、使用axios实现以下接口的并发请求

http://vt.ossjk.com/goods/getIndexInfo（get、无参数）

http://vt.ossjk.com/goods/getCategoryList（get、无参数）

function getIndexInfo (){
      return axios.get('http://vt.ossjk.com/goods/getIndexInfo')
    }
    function getCategoryList (){
      return axios.get('http://vt.ossjk.com/goods/getCategoryList')
    }
    axios.all(([getIndexInfo(), getCategoryList()]))
      .then(axios.spread(function(res1, res2){
        console.log(res1.data);
        console.log(res2.data);
      }))

5、js中的堆和栈是什么？有什么区别？

[success] 堆和栈

栈是直接赋值数据：速度快

堆是赋值引用地址：速度慢

6、面向对象的特点有什么？

[success] 特点

1、封装

2、继承

3、多态

7、请写出ajax的流程以及相应的代码

var xhr
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest()
    } else {
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    xhr.open('GET','http://192.168.1.217:8080/getList')
    xhr.send()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.response);
      }
    }

var xhr
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest()
    } else {
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    xhr.open('POST','http://192.168.1.217:8080/getCountry')
    xhr.setRequestHeader('content-type', 'application/json')
    var data = {
      "id": '001'
    }
    xhr.send(JSON.stringify(data))
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.response));
      }
    }

8、请说出防抖函数与节流函数的区别，并分别用代码表示

[success] 防抖与节流

节流：在某段时间内，不管触发了多少次回调，只认第一次触发，无视后面次数产生的触发，并在计时结束时给予响应。

防抖： 在某段时间内，每次触发都会重新计时，直到最后一次触发超过了限定的时间

节流：

var div = document.querySelector("div");

function throttle(fn, time) {
  //节流函数
  var last = 0;
  return function () {
    var now = new Date().getTime();

    if (now - last >= time) {
      last = now;
      fn.apply(this, arguments);
    }
  };
}
var clickHandler = throttle(function () {
  //具体逻辑
  console.log("触发了");
}, 3000);

div.onclick = clickHandler;

防抖：

<button class="btn">按钮</button>
<script>
    var btn = document.querySelector(".btn")
    function deBounce(fn, delayTime) {
        var timer
        var endTime = 0
        return function () {
            var nowTime = +new Date()
            if (nowTime - endTime < delayTime) {
                clearTimeout(timer)
                endTime = nowTime //清除计时器
                timer = setTimeout(function () {
                    fn()
                }, delayTime)
            } else {
                clearTimeout(timer)
                endTime = nowTime //清除计时器
                fn()
            }
        }
    }
    var handler = deBounce(function () {
        console.log(123);
    }, 3000)
    btn.addEventListener("click", handler)
</script>

9、实现一个自定义filter方法

var arr = [1, 2, 3, 4, 5]
Array.prototype.myFilter = function (fn) {
    var arr = this
    var newArr = []
}
var newArr = arr.myFilter(function (itme) {
    return itme > 2
})
console.log(newArr);

10、请写出以下代码的答案，并描述为什么

var name = "小明"
var obj = {
  name:"小红",
  obj2:{
    name:"小绿",
    fn:function(){
      var a = function(){
        console.log(this.name)
      }
      a.call(this)
    }
  }
}
obj.obj2.fn()

小绿，输出语句所在的函数本来是window上的函数，直接执行a()会输出小明，

使用a.call(this)后，改变了函数this指向，现在this指向obj2，即输出obj2.name，小绿

[success] 答案

小绿