2/29

3. 编程题3

实现一：

console.log = function(__console__log__){
  return function(str){
    __console__log__("我被重新实现啦~",str);
  }
}(console.log)

console.log("Hello World!");

划重点：console.log可以传入多个参数

实现二：

console.log = function(__console__log__){
  return function(){
    __console__log__("我被重新是实现啦",...arguments);
  }
}(console.log)

console.log("Hello World!","你好","萨瓦迪卡");

划重点： 如何把新的 console.log绑定到原来的 console环境上呢

实现三：

console.log = function(__console__){
  const __console__log__ = __console__.log;
  return function(){
    __console__log__.apply(__console__,["我被重新是实现啦",...arguments]);
  }
}(console)

console.log("Hello World!","你好","萨瓦迪卡");

拓展：修改原生的 Function.prototype.bind 方法

1. 使用 apply 方法实现

Function.prototype.bind = function(obj) {
  var bindArg = Array.prototype.slice.call(arguments, 1);
  //1. arguments不能直接使用slice方法；它的类型是[object Arguments]
  //2. 原生 bind 方法的参数第一个绑定的对象，之后的是传入的参数！！！

  var context = this;
  return function() {
    return context.apply(obj, [...bindArg,...arguments]);
  };
};

2. 问题：原型链？

原生的 bind 方法返回的函数 prototype 为 undefined

let obj = { name: "xiaoming" };
function func() {
  console.log("name:", this.name);
}
func.prototype.value = "protoValue";
let newfunc = func.bind(obj); //newfunc.prototype === undefined

说明我们的方法返回的函数 和 原生方法返回的函数不同

1. 编程题1

• 重点：flex-grow 属性：可以实现成比例的宽度，还能自动撑满整个空间

 <div class="container">
      <div class="left-container">
        <div class="div1 box"></div>
        <div class="div2 box"></div>
        <div class="div3 box"></div>
      </div>
      <div class="div4 box"></div>
    </div>

* {
  margin: 0;
  padding: 0;
}
.container {
    width: 100%;
    display: flex;
}
.left-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}
.div1{
    width: 200px;
    height: 500px;
}
.div2{
    flex-grow: 1.5;
    height: 500px;
}
.div3{
    flex-grow: 1;
    height: 250px;
}
.div4{
    width: 200px;
    height: 250px;
}
.box {
  margin: 10px;
  border: 1px solid #000000;
}

2. 编程题2

• 注意点

1. name=value 非单字符情况
2. URLSearchParams：竟然有原生方法！

• 实现一（URLSearchParams）

function fn(url, name) {
  var searchParams = new URLSearchParams(url);
  return searchParams.has(name) ? searchParams.get(name) : null;
}

• 实现二（先匹配a=）

function fn(url, name) {
  let str = name + "=";
  let index = url.indexOf(str);
  if (index < 0) {
    return null;
  } else {
    let sub = url.substring(index + name.length + 1);
    let i = sub.indexOf("&");
    return i > 0 ? sub.substring(0, i) : sub;
  }
}

• 实现三（先匹配a=*&，不如方法2实现简单）

function fn(url,name){
  let reg = new RegExp(name + "=.+?\&");
  let match = url.match(reg);
  if(match){
    let preIndex = name.length;
    return match[0].substring(preIndex+1,match[0].length-1)
  }
  else{
    let index = url.indexOf(name+"=")
    return index>0 ? url.substring(index+name.length+1,url.length) : null;
  }
}