我不知道的前端（三）

源心锁

发布于 2022-08-12 11:31:15

2910

发布于 2022-08-12 11:31:15

文章被收录于专栏：前端魔法指南

记录我的学习笔记，本篇之前都是JavaScript相关的内容

prototype和proto的灵活应用

想必时间戳的各种转换需求大家见到的不算少，有时候封装一个方法非常有必要。下边是一个format方法，可以让我们用期望的格式将Date对象转换为String

Date.prototype.format = function (format) {
  var o = {
    "M+": this.getMonth() + 1,
    "d+": this.getDate(),
    "h+": this.getHours(),
    "m+": this.getMinutes(),
    "s+": this.getSeconds(),
    "q+": Math.floor((this.getMonth() + 3) / 3),
    "S": this.getMilliseconds()
  }
  if (/(y+)/.test(format)) {
    format = format.replace(RegExp.$1, (this.getFullYear() + "")
      .substr(4 - RegExp.$1.length));
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(format)) {
      format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] :
        ("00" + o[k]).substr(("" + o[k]).length));
    }
  }
  return format;
}

调用

new Date().format("yyyy-MM-dd hh:mm:ss")

同理的，除了Date，我们也可以尝试为各种内置类添加各种实用的方法，有一个专门的prototype.js扩展库就为内置类添加了很多的实用方法。

使用上边的方法你会发现，你可以调用一个实例化Date对象的format方法，但是Date.format()是行不通的 这是自然的，想做到Date.format这种看着很像静态方法的操作（实际应用场景中其实没有所谓Date.format，常规需求里应该是希望有个类似于Array.range()的函数）而想这么做的话，我们就需要使用下边这种方式:

Array.__proto__.range=function(a,b){
  let arr=[]
  if (a>b) {
    for (let index = a; index >= b; index--) {
      arr.push(index)
    }
  }else{
    for (let index = a; index < b; index++) {
      arr.push(index)
    }
  }
  return arr;
}

其实回过头来看，所谓的类就是一个构造函数，对应Date.__proto__其实就是Function.prototype；

javascript中children和childNodes的区别

1，childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

有些人错误的使用()去取该集合元素，下表列出各浏览器对childNodes(i)的支持情况：

IE6/7/8/Safari/Chrome/Opera IE9/Firefox childNodes(i) 支持不支持有时候需要获取指定元素的第一个HTML子节点（非属性/文本节点），最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行，空格，那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

function getFirst(elem){
    for(var i=0,e;e=elem.childNodes[i++];){
        if(e.nodeType==1)
            return e;
    }
}

2，children：非标准属性，它返回指定元素的子元素集合。但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

和childNodes 一样，在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代上面的getFirst函数。

这里需要注意的是children在IE中包含注释节点

this指向

this究竟绑了谁

this的作用域并不取决于代码在哪书写，而是在运行时才进行绑定。当然我们可以用bind函数硬修改this的作用域，这是我觉得非常实用的函数。

绑定规则

我们说js里所有东西都是对象

默认绑定我们写一个独立的函数进行调用 function foo(){ console.log(this.a) } var a=2; foo();//2 复制代码（类似这样的代码阅读体验非常差劲，但是我们可以从中学习一些js底层）这里的a声明在全局作用域中，所以被挂载到了全局对象上去。当我们调用this.a时，this指向全局对象故而输出2；整理一下这种情况的调用情况：
- foo()在全局作用域中调用
- foo()是直接调用
隐式绑定如果我们把函数放到某一个对象里 function foo(){ console.log(this.a); } var obj={ a:2, foo } obj.foo();//2 foo();//undefined 复制代码这种情况下：
- foo()被包含在对象内
- foo()的调用前方有对obj的引用
显式绑定这是非常直观的绑定方式、 function foo(){ ... } let obj={ a:2 } foo.call(obj); // 2 复制代码通过call。我们把它的this强行绑定到了obj上，于是输出obj.a；当然我们知道对应的还有apply函数
- bind bind函数是另一种强制绑定的解决方案，bind函数的工作原理非常简单，我们甚至可以手搓一个 在这之前我们要知道bind函数接收一个对象，返回一个绑定了this的函数 那么： Function.prototype.bind=function(obj){ return ()=>{ return this.apply(obj,arguments); } } 复制代码这应该是我能想到的实现 bind 最少代码的形式；
new绑定在js中，并没有所谓的类，JavaScript的new操作符和传统面向对象的new并不一样；我们用new调用函数就是所谓的构造使用new来调用函数，会有如下操作：
1. 创建一个全新的对象
2. 新对象要执行[[Prototype]]连接
3. 新对象绑定函数调用的this
4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象
function foo(a){ this.a=a; } let bar=new foo(2); console.log(bar.a); // 2 复制代码