每日思考（2020/01/02）

题目概览

• 对GBK和UTF-8的理解
• 对z-index的理解
• bind、call、apply的区别？

题目解答

对GBK和UTF-8的理解

• 含义
  • GBK编码：是指中国的中文字符，其它它包含了简体中文与繁体中文字符，另外还有一种字符“gb2312”，这种字符仅能存储简体中文字符
  • UTF-8编码：它是一种全国家通过的一种编码，如果你的网站涉及到多个国家的语言，那么建议你选择UTF-8编码
• 区别
  • UTF8编码格式很强大，支持所有国家的语言，正是因为它的强大，才会导致它占用的空间大小要比GBK大，对于网站打开速度而言，也是有一定影响的
  • GBK编码格式，它的功能少，仅限于中文字符，当然它所占用的空间大小会随着它的功能而减少，打开网页的速度比较快
• 网页乱码
  • 如果网页源代码是gbk编写的，而内容中的文字是utf-8的，那么，此时打开浏览器就会出现HTML乱码。反之也会出现乱码。解决办法是使用专业的编辑软件进行HTML网页的编写。例如，尽量不要直接使用记事本进行编写
  • HTML网页编码是gbk，但是程序从程序库中调出呈现的是utf-8编码的内容也会造成编码乱码。此时，程序查询数据库数据显示数据进行转码即可

    mysql_query("SET NAMES 'UTF-8'") //将查询数据转码为UTF-8

  • 浏览器不能自动检测网页编码，造成网页乱码，解决办法是网页加入meta charset编码标签

    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />

对z-index的理解

• 取值

  /* 字符值 */
  z-index: auto;
  
  /* 整数值 */
  z-index: 0;
  z-index: 3;
  z-index: 289;
  z-index: -1;/* 使用负值降低优先级 */
  
  /* 全局值 */
  z-index: inherit;
  z-index: initial;
  z-index: unset;

• 特性
  • 支持负值
  • 支持css3 animation动画

    @keyframes zIndex{
        0% {z-index:-1;}
        100% {z-index:51;}
    }

  • 两个div，无设置定位（z-index设置与否都是失效的）或者两个都已定位元素且z-index相同，层级关系按照文档流的顺序显示，后面的覆盖前面的

    <div style="width:100px;height:100px;background-color:red;position:relative;top:10px;"></div>
    <div style="width:50px;height:50px;background-color:blue;"></div>
    
    <div style="width:100px;height:100px;background-color:red;position:relative;z-index:1;"></div>
    <div style="width:50px;height:50px;background-color:blue;position:relative;top:-50px;z-index:1;"></div>

  • 如果两个元素都没有设置z-index，使用默认值auto，一个定位一个没有定位，那么定位元素覆盖未定位元素

    <div style="width:100px;height:100px;background-color:red;"></div>
    <div style="width:50px;height:50px;background-color:blue;position:relative;top:-50px;"></div>
    
    <div style="width:100px;height:100px;background-color:red;"></div>
    <div style="width:50px;height:50px;background-color:blue;position:relative;top:-25px;z-index:-5;"></div>

  • 如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方

    <div style="width:100px;height:100px;background-color:red;position:relative;z-index:10;">
        <div style="width:50px;height:50px;background-color:blue;position:relative;z-index:-5;"></div>
    </div>

  • 如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效

    <div style="width:100px;height:100px;background-color:red;position:relative;">
        <div style="width:50px;height:50px;background-color:blue;position:relative;z-index:-5;"></div><!--z-index为-5所以在父元素的后面>
    </div>

  • 如果兄弟元素的z-index生效，那么其子元素覆盖关系由父元素决定

    <div style="width:100px;height:100px;background-color:red;position:relative;z-index:5;">
        <div style="width:50px;height:250px;background-color:blue;position:relative;z-index:50;"></div>
    </div>
    <div style="width:100px;height:100px;background-color:yellow;margin-top:-40px;position:relative;z-index:10;">
        <div style="width:30px;height:150px;background-color:black;position:relative;z-index:-10;"></div>
    </div>

bind、call、apply的区别？

• 相同：call和apply都是为了解决改变this的指向。作用都是相同的，
• 不同：只是传参的方式不同。
  • 除了第一个参数外，call可以接收一个参数列表

    //fun.call(obj, arg1, arg2, arg3,...) 指定作用域 同时执行函数
    Function.prototype.myCall = function (context = window) {
      context.fn = this;
      var args = [...arguments].slice(1);
      var result = context.fn(...args);
      // 执行完后干掉
      delete context.fn;
      return result;
    }

  • apply只接受一个参数数组。

    //fun.apply(obj, [arg1, arg2, arg3, ...]) 指定作用域 同时执行函数，后面的参数是数组
    Function.prototype.myApply = function (context = window) {
      context.fn = this;
      var result
      // 判断 arguments[1] 是不是 undefined
      if (arguments[1]) {
        result = context.fn(...arguments[1])
      } else {
        result = context.fn()
      }
      delete context.fn
      return result;

  • bind绑定完之后返回一个新的函数，不执行

    //const fb = fun.bind(obj) fb(arg1, arg2, ...) 返回一个函数,在使用 bind 之后，只会返回一个修改了作用域的函数，等再次调用时才会执行
    Function.prototype.myBind = function (context) {
      if (typeof this !== 'function') {
        throw new TypeError('Error')
      }
      var _this = this
      var args = [...arguments].slice(1)
      // 返回一个函数
      return function F() {
        // 因为返回了一个函数，我们可以 new F()，所以需要判断
        if (this instanceof F) {
          return new _this(...args, ...arguments)
        }
        return _this.apply(context, args.concat(...arguments))
      }
    }

原文地址：https://www.cnblogs.com/EricZLin/p/12142867.html