Xu_cipu的博客

本来只是遇见了一个面试题准备手写一下，但最后发现通过手写bind最主要的是深刻理解了箭头函数this指向问题。为什么这么说？上代码直接看// 正确手写Bind结果Function.prototype.mybind = function (...args) { return () => { this.apply(args[0], args.slice(1)) }}乍一眼看上去，感觉没啥，但其实我一开始写的是这样的：Function.prototype.mybind = (...arg

总结继承主要做了三件事：调用父类构造函数产生父类实例，创建this，并在后续添加上子类相关属性利用Object.create()方法基于父类原型对象创建一个新对象，且设置该对象的constructor属性指向子类构造函数。并将该对象赋值为子类的原型对象将子类构造函数的__proto__属性赋值为父类的构造函数// babel编译后重点函数_inheritsfunction _inherits(sub,parent){ // 类型检查报错 if(typeOf parent!=="fu

webpack-de-server issue链接：https://github.com/webpack/webpack-dev-server/issues/2759原因：webpack-dev-server更新版本，命令行由原来的webpack dev serve改为了webpack serve故，package.json中需改为："scripts": { "dev": "webpack serve --mode development" }详见github Readme：h

以全局作用域为例在console中定义：const a= 1;window.a //undefined但是，反过来：window.a=1;a //1也就是说，通过向上下文对象this中添加属性，该属性就会被加入到全局作用域中；而在全局作用域中定义的变量，不会被自动添加进上下文对象中。反观，this和作用域是两个不同的概念...

Localstorage的生命周期是永久性的，也就是说不手动删除的话，同源的网站可以一直共享这些数据。Sessionstorage的生命周期为当前会话，用户关闭页面或浏览器后，Sessionstorage就失效了，且不支持同源网站数据共享。会话：指用户从访问开始到关闭网页的这段时间同源：协议、域名、端口一致的网站...

两个函数均用于并行调用多个异步操作使用All：两个异步操作同时resolve之后调用then()var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setT...

var log = function(res) { console.log(res); }var p1=new Promise(function (resolve,reject){ var p1 = 1; if(p1==1) resolve("p1 resolve"); else reject("p1 failed");});var p2=new Promise(function...

例子：function callback() { console.log("callback");}console.log("before");setTimeout(callback,0); //调用回调函数实现异步操作console.log("after");结果：beforeaftercallback方法：把想异步运行的操作封装成回调函数，再通过异步调用的方式调用这个封...

两者均用于会话跟踪Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份会话跟踪用于长时间跟踪记录用户的身份和行为，解决http协议无状态的问题，帮助服务器“记住”用户的身份或行为。Cookie分为会话Cookie和持久Cookie，大小限制最大为4k每个用户在服务器上都有一个唯一的Session与之对应，SessionId在服务器端创建，并通过Co...

记一个坑···当用css控制显示，运用到min-width等控制时，若js也想在相同的宽度值时进行一些相应的操作，那么，必须要使用window.innerWidth这一属性值！！！其他值的大小都和min-width的值不一样，会导致样式不匹配...

Event:contextmenu: The right button of the mouse is clicked (before the context menu is displayed).Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event<!DOCTYPE ...

<div> <p>Sub Section</p></div>CSS:div {position: relative; /*请为父级设定position为relative*/height: 100px; /*请为父级设定高度*/width: 100px; /*请为父级设定宽度*/}//水平垂直居中p {position: abs...

CSS文件里添加@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /*兼容代码*/}

在vue component中的methods域里定义一个方法，这个方法中会调用某一个ajax call，在ajax中的this会指向ajax本身，而不再是vue实例本身。methods: {typeAhead: function (searchType) { **var self = this;** //获取vue实例本身，捕获指针指向 var searchURL = ""; ...

事件冒泡：冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件阻止事件冒泡方法：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation事件冒泡小例子(完整html)：三个<div>层层嵌套关系，由外向里层级关系为A包含B，B包含C效果：只点击C部分，console会打印出C B A，说...

CSStransition是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性transition-property：要修改的属性值，如height，width等transition-duration：以秒或毫秒为单位指定过渡动画所需的时间，默认为0，即...

共有三种控制运行时间的函数：window.onload (js原生)$(document).ready() （jquery提供的时间节点一）$(window).load()（jquery提供的时间节点二）三者关系：window.onload 和 $(window).load()指的是同一个时间节点，及页面中图片或其他外部文件都加载完毕之后，进行操作。而$(document).ready...

工作中遇到需要基于某一defer文件的class动态插入值判断进行下一步操作，发现使用$(window).load()定义的函数可以实现需求，即判断发生在defer文件运行之后，而用$(document).ready()则过早执行判断，即判断发生在defer文件运行之前，导致结果永远为false。故，三者运行事件为：$(document).ready()最早 然后是defer文件 最后是$(w...

Math.random()方法随机返回大于等于0到1之间的一个数获取某一范围内某一整数的式子：值 = Math.floor(Math.random() * 可能的数的个数 + 第一个可能的数);基于以上两点，逻辑上，随机得到0到数组长度之间的任意一个数，就算是随机获取数组中的某一个数了。代码如下：var values = [1,2,3,4,5];var num=pickUp(valu...

首先，看一下border的延申效果：定义一个正常显示的div.triangle {height: 200px;width: 300px;border-top: 50px solid red;border-right: 50px solid green;border-bottom: 50px solid black;border-left: 50px solid yellow;}...

“事件” 与 “事件属性”，很容易混淆的两个概念常见并行一起出现的场景：百度一下“js绑定click事件”，随便点进去，都会有几种绑定方法，几乎每一篇，都会涉及到‘click’和‘onclick’这两个关键词之前一直理解不清，只能死记硬背下绑定的方法，今天意外通过解决 ‘Vue中限制input标签输入内容’ 这一问题，深入理解了一下“事件”和“事件属性”概念，瞬间清晰很多。回到click与...