那些很熟却又不是很熟的知识

本文为知识整理，可能工作中用到这些东西不多，可是总有人想让你会前言：小时候很渴望长大，羡慕大人们的财富自由；长大后又很羡慕小时候，怀念小时候的无忧无虑，守候着那份天真。哦，还有，不是长大就能财富自由。。。一：js继承①：对象冒充实现继承：(可实现多继承)——原理：让父类构造函数成为子类的方法，然后调用子类的方法，通过this关键字给所有属性和方法赋值function Parent(name){ this.name=name; this.sayName=function () { console.log(this.name); }}function Child (cname) { this.parent=Parent; this.parent(cname); delete this.parent; // 删除无用的parent函数 == f Parent(name)}var mychild=new Child(“名字”);mychild.sayName();②：原型链继承 (不能实现多继承)prototype function Parent (name, age) { this.name = name; this.age = age; this.ParFunc = function () { console.log(this.height) } }; Parent.prototype.sayName = function () { console.log(this) }; function Child (cname, cage, height) { this.height = height }Child.prototype = new Parent(); // Child原型指向Parent的一个实例Child.prototype.constructor = Child; // 把Child指向自己，不与Parent共享var child = new Child(‘测试名字’, ‘测试年龄’, ‘测试身高’)console.log(child) // 发现打印出来的属性都继承了，就是没值child.ParFunc()：当访问ParFunc属性时，会先在child的实例属性中寻找，找不到就去child的原型对象上去找。一层一层的寻找构成了原型链因为无法向父类构造函数传参;可以 new Parent(‘名字’, ‘年龄’)这时传参注：如果想用原型给Child拓展方法：Child.prototype.childHeight = function () { console.log(this.height) }一定要写到Child.prototype = new Parent()的下面，要么就被覆盖掉了。③：call、apply继承(不能继承原型链，prototype上的) function Parent (name, age) { this.name = name; this.age = age; this.ParFunc = function () { console.log(this.name) } } function Child (cname, cage, height) { Parent.call(this,cname,cage); // 继承的参数为当前函数的形参 // apply: Parent.call(this,arguments); this.height = height; } var child = new Child(‘测试名字’, ‘测试年龄’, ‘测试身高’) console.log(child) // ParFunc: ƒ () age: “测试年龄"name: “测试名字"④：组合继承：call+原型链继承function Parent (name, age) { this.name = name; this.age = age; this.ParFunc = function () { console.log(this.height) }}Parent.prototype.sayName = function () { console.log(this)}function Child (cname, cage, height) { Parent.call(this, cname, cage); // 解决传参问题 this.height = height;};Child.prototype = new Parent()Child.prototype.constructor = Child; // 把Child指向自己，否则一直指向Parentvar child = new Child(‘测试名字’, ‘测试年龄’, ‘测试身高’)比较常用的继承方式，缺点是 两次调用 Parent构造函数⑤：寄生组合继承：cal+prototypefunction Parent (name, age) { // 父函数 this.name = name; this.age = age; this.ParFunc = function () { console.log(this.height) }}Parent.prototype.sayName = function () { console.log(this)}function Child (cname, cage, height) { // 子函数 Parent.call(this, cname, cage) this.height = height;};var createObj = function () { // 中间函数继承 Parent function Trans() {}; Trans.prototype = Parent.prototype; return new Trans();};Child.prototype = createObj()Child.prototype.constructor = Child; // 改回指针var child = new Child(‘名字’, ‘年龄’, ‘身高’)console.log(child)二：如何获取自定义属性，特例data-*如何获取官方定义： data-是 html5 新属性 主要用于存储页面的自定义数据 不应该包含大写字母（会默认转为小写） 注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。脑海里第一印象就是 getAttribute(),setAttribute()俩属性了，一个获取，一个设置而平时又很少用到，但是平时用的框架什么的多数都用 data- 这个自定义属性，那其实获取 data- 这类自定义属性的时候，还有个更方便的方法dataset<div data-a=“aa” id=“div1” data-b=“bb”></div>eg:var div1 = document.getElementById(‘div1’)console.log(div1.dataset) // DOMStringMap {a: “测试”, b: “222”}a: “测试"b: “222"用data-*作为自定义属性：可以一句话就获取到所有属性，获取方式也简便三：事件的几个阶段：捕获、目标(event.target，即触发过程)、冒泡先盗个图——冒泡(IE事件流)：从最深的节点向外传播，div -> window,就好比往水里丢一个石子，一层层波浪抵达河边缘——捕获(网景)：从最外层向目标传递，window -> div,就好比你去一个大企业集团找人，需要提供公司 > 大部门 > 小部门 > 小组 > 目标——目标：即触发过程event.target——target、currentTarget的区别：target这个属性指向的是目标过程中的DOM对象，也就是 触发事件监听的对象, currentTarget这个指向的是当前的对象，具体内容跟this一样，当this指向的是目标的时候(事件的目标阶段)，target与currentTarget相同——现在几乎所有的主流浏览器都支持冒泡；IE早起版本会跳过html直接跳到document，且不支持捕获。——平时多数用到冒泡多一些，事件代理(委托)也是通过事件冒泡的原理，让DOM节点可追溯，也可以利用冒泡的原理做埋点，避免新增DOM节点，改代码上线——事件句柄addEventListener(‘事件名’, ‘function’, false)，默认冒泡四：判断数据类型，返回数据的具体类型emm… 那不就直接 return typeof n 不就完了，哦不对，再识别一下数组，因为数组的typeof也是对象，Array.isArray(n)… /^12/ 这返回啥？ wc,也是object吧，那咋区分，对，正则有test方法，再判断一下if (n.test) { return ‘RegExp’}null好像也返回obj吧，时间 Date嘞，都返回obj也没毛病，万物皆对象啊。据说instanceof也可以：左侧是否是右侧的实例，也就是说每个类型我们都得判断，于是[] instanceof Array // true[] instanceof Object // true不光麻烦，返回的也不精确啊据说constructor也可以：js引擎会为函数添加prototype,并让其指向’该函数’的引用/^12/.constructor // f RexExp(){[native code]}new Date().constructor // ƒ Date() { [native code] }null.constructor // 报错：Cannot read.. undefined.constructor // 报错：Cannot read.. 发现确实能校验一些typeof 不能校验的，但是 null和undefined没有’指针’啊,而且写继承的时候，指针是可以被改的，稍不注意就凉凉了…把这些都整合到一起基本也都够用了，可是并不优雅有请toString登场….华丽分割线toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。完美~~Object.prototype.toString.call(null) ; // [object Null]Object.prototype.toString.call(new Function()) ; // [object Function]Object.prototype.toString.call(new Date()) ; // [object Date]但是我觉得除了obj比较特殊之外，其他类型,typeof都可以判断，不需要再多调用一次toString方法，所以最终封装 =>function typeDetection (n) { if (typeof n === ‘object’) { return Object.prototype.toString.call(n) } else { return typeof n }}直接调用typeDetection(’’) // string五：千分位的实现Q:字符：1234567890.12 转换为：1,234,567,890.12R:个人用了while循环的方式function strFilter (str) { let newStr = String(str).split(’.’) // 切分原始字符,兼容传入Number类型 let transStr = newStr[0],resStr = [] while (transStr/1000 > 1) { // 判断是否大于1000 let whildStr = String((transStr/1000).toFixed(3)).split(’.’) // 这里一定要保留三位小数,否则正数部分末位的0就会丢失,又转为String，因为Number没有split方法 transStr = whildStr[0] // 每次都取小数点以前的(正数部分) resStr.unshift(whildStr[1]) // 向前插入小数点后的数字() } // 除以1000剩下的数 + 每次除以1000后的数 + 原来小数 let res2 = newStr[1]?(’.’ + newStr[1]):’’ let resComma = resStr.length?(’,’ + resStr.join(’,’)): ’’ return transStr + resComma + res2}虽然实现代码很多，但个人觉得还算易懂网上看到用正则的，确实简短：function strFilter2 (n) { let s = String(n) let re = /\d{1,3}(?=(\d{3})+$)/g let n1 = s.replace(/^(\d+)((.\d+)?)$/, function (s, s1, s2) { return s1.replace(re, ‘$&,’) + s2 }) return n1}其实正则在好多场景都体现出优势，只是不能被轻易想到Q:以下this指向(function () { “use strict”; console.log(this) // undefined})()(function () { “use strict”; console.log(this) // window})()R:严格模式下，除构造函数、对象内置函数外，this均指向 undefinedQ:script标签的 async、defer啥区别？R:别说那没用的，上图啥也不加：script读取和解析脚本阶段都会阻断页面执行，加async : script解析脚本阶段会阻断页面执行加defer : scriptj脚本将在页面完成解析时执行Q:[1,2,3].map(parseInt)的结果？R:之前用到parseInt，只知道是向下取整，翻了下w3c的parseInt定义: Crazy再看map，parseInt就是回调函数,map会传给parseInt三个参数，parseInt只识别前两个，那也就是得到了function parseInt1 (item, index) { return parseInt(item,index)}得到 parseInt(1,0) parseInt(2,1) parseInt(3,2)parseInt(1,0)，parseInt定义radix不传或者0,按10进制，也就得到了1parseInt(2,1)，parseInt又定义第二个参数 radix 位于 2-36(除了0)，否则返回NaN,所以得到NaNparseInt(3,2),这个据说(网上)是 3不是 2的合法进制数 (只有0和1)，但是个人试了试parseInt(10,2) => 3，parseInt(20, 2) => 6,parseInt(30, 2) => NaN,发现只要是字符首字符小于 radix都是可以的，但是一旦首字符 >= radix，就会返回NaN参考文章：判断js数据类型的四种方法