js
sdKdqweas
这个作者很懒,什么都没留下…
展开
-
ES6 对象属性名表达式
前言今天在学习react 处理多个输入中引入了属性表达式的概念属性表达式是属于ES6对象拓展简洁表示在es6 如果键名和值名是一致的话那么可以省略一个。换句话说,ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。对象属性名表达式通常我们定义属性是通过{a:'xx',b:'xxx',c:'xx'}这样的形式,a,b,c都是字符串,也就是静态的值ES中可以使用一个动态的可以通过计算得到的属性名(也就是表达式)let lastWord = 'las原创 2022-04-30 21:51:44 · 652 阅读 · 0 评论 -
JS将数值转换成字符串
1.toString和StringtoString是实例上可以访问的方法, 如果你不确定变量的类型,那么访问时就可能出错,对于undefined和null来说,他们是没有这个方法的所以引入了第二种方法,String()函数。String()函数调用规则也很简单,只不过是对null和undefined类型的数据进行了处理常规的类型还是调用的toString处理2.加法运算符字符串的加法是字符串的拼接,当使用时会隐式的对操作数进行转换最后Object.prototype.toString(原创 2022-04-30 20:32:32 · 2090 阅读 · 0 评论 -
DOM元素节点属性outerHTML和innerHTML
前言innerHTML是我们常用的一个修改某个元素内容的属性outerHTML可能不太常用两者有什么区别假设一个多层级的节点入下面代码所示<h2 id="注意事项"><a href="#注意事项" title="Permalink to 注意事项">注意事项</a></h2>输入代码document.querySelector('#注意事项').innerHTML'<a href="#注意事项" title="Permalink t原创 2022-04-24 09:55:46 · 419 阅读 · 0 评论 -
Polyfill是什么?
前言在学习Babel中,通过 Polyfill 方式在目标环境中添加缺失的特性。这里的polyfill方式添加我不是太明白什么是Polyfill先从这个名词意思开始,他的意思是特殊的粘合剂保证附着力和填充不会收缩或开裂。在简化一点就是用于缝补的功能那么在js环境中,什么情况下需要缝补?当我们在使用一些高版本的API时,低版本不支持,这时候该怎么办?所以Polyfill就是存在这两者之间的一个中间件。它会自动帮我们修正位于高版本和低版本浏览器之间的不使用特性有时也可以称它为垫片。垫片的描原创 2022-04-21 21:41:59 · 663 阅读 · 0 评论 -
JS 为什么要使用this指针
前言var age=18;function a(){ console.log(age); console.log(this.age)}var obj={ a:a, age:19,}obj.a();//18,19先看代码。这里输出两个age,第一个是作用域下的age,第二个是this这个上下文下的age学习this指针先要区分作用域和执行栈的区别。JS是词法作用域,不懂的可以自行去了解一下。这里只说this指针每当我们执行到函数时,执行引擎会自动帮我们创建原创 2022-04-19 09:54:53 · 420 阅读 · 0 评论 -
JSinstanceof操作符手写
先给instanceof操作符一个简述a instanceof b 检查a的原型链中是否包含b的原型实现流程:检查输入的a和b是否是符合的值,a要是Object类型,b要是function类型a要是某个对象的实例,b要是构造函数if(typeof a!='object'||a==null||typeof b!='function'){ return false}2.原型的递归探寻这里有两种实现方式,第一中是循环调用,第二种是采用递归实现,我采用递归实现if(a.__proto_原创 2022-03-23 10:07:06 · 267 阅读 · 0 评论 -
ES proxy和Reflect
什么是Proxyproxy翻译过来是代理,它也确实起了代理的作用,代理了我们访问对象的行为。代理就像是一样中间人,我们的行为都是通过中间人来传递话。至于中间人会不会对我们的行为进行处理以及怎么处理,那是在代理中设定的。new Proxy('被设置代理的对象',option)一个代理由两部分组成,第一部分就是被设定代理的对象,另外一部分就是代理对于访问者的行为进行如何处理行为分类1.get()拦截对某个属性的访问操作new Proxy({},{get(){}})...原创 2022-03-21 09:50:33 · 123 阅读 · 0 评论 -
es6 伪数组和可遍历(iterable)的对象转换为数组
前言以前我经常会遇到两种方法[].slice.call(xx)Array.prototype.slice.call(xx)这两个方法都是将伪数组转换为数组形式。伪数组长的什么样?{ '0':1, '1':1, '2':1, '3':1, length:4}伪数组要携带length属性除了关心什么是伪数组,我们还得知道伪数组在哪里能出现1.产生nodelist,一般会在和dom节点相关的函数产生,例如document.getElementByTagNames()原创 2022-03-15 10:10:16 · 1929 阅读 · 0 评论 -
防抖和节流
像鼠标移动,滚轮移动,键盘输入内容这里事件的触发频率非常快如果我们在其回调函数的内部预留了复杂的计算功能,那么页面也许会崩溃防抖减少事件的触发频率,比如我们滚动滚轮一周可能触发50次,但我通过方法实现只要触发5次1.先做一个简单的尝试使用计数周期来实现,比如说10次触发记作一次触发。var i=0;window.onmousemove=function(){ if(i%100==0) console.log('鼠标移动了')}但是如果让控制的是用户输入的内容,就需要确切的知道用户原创 2022-03-13 13:14:33 · 291 阅读 · 0 评论 -
浏览器对文档的解析过程
我们输入一个url之后,浏览器从发起请求到页面显示做了什么?比如我在url输入www.baidu.com首先浏览器要调用资源加载器,他既需要要和网络模块对接又需要和解析器对接,所以我们可以把它看成一个仓库最先返回来的资源是百度的文档类型,所以会被html解析器要去html解析器得到之后他把它变成dom树(多层次的节点对象),我把他想象成一个车架子。在解析过程会遇到link这类标签,他们需要引入外部资源,如果是css这需要使用css解析器,这和文档解析过程是同步的在解析中会遇到script,im原创 2022-03-10 14:02:12 · 318 阅读 · 0 评论 -
eventBus手写实现
class EventBus{ constructor(){ this.callback={}; } emit(type){ let arg=arguments; if(!this.callback[type]){ console.log('事件没有设置'); return; } this.callback[type].forEach( callbackFunciton=> { callbackFunciton(.原创 2022-03-08 21:53:35 · 61 阅读 · 0 评论 -
js 垃圾回收机制
js有自动垃圾回收机制,垃圾是什么?垃圾的本质是使用的内存,它们被定义为垃圾是因为本应该被清除的内容,现在还在占用着内存。自动垃圾回收机制就是js能够自己去管理内存的回收。现在关注的重点是如何实现这种机制的?怎么判断一个变量是否应该被回收第一个方法标记清除(给变量打标记)变量进入到执行环境就给他打上一个进入标签(标签的设置方式可以有很多种),当他离开之后就给他打上一个离开标志,那些被打上离开标志的变量占用的内存就会被回收。第二个方法是引用计数进入到一个执行环境中,只要一块内容被变量占用一次就给原创 2022-03-07 18:05:43 · 73 阅读 · 0 评论 -
js function函数中this指针指向问题
js高程中说,this指针指向的运行时函数的执行环境决定的。所以以前我认为在一个函数内部定义一个函数他的this是外部的那个函数function create(){ function a(){ console.log(this);}a();}create();结果还是window对象感觉和我们预期不符,后来在js高程中说到每个函数再被调用时,其活动对象会获取两个内部属性this和arguments,内部函数在搜索这两个变量时,他们只会搜索到当前函数为止,也就是说外部函数的this原创 2022-03-06 22:02:27 · 593 阅读 · 0 评论 -
for in能够访问到原型上的方法
先知道一个前提,所有开发人员定义的属性都是可枚举的for in能够读取到对象的可访问,可枚举的属性,显然原型上的属性是能够读取的let a=new Object({ name:'wx', age:18})Object.prototype.class=1console.log(a)for(let i in a) { console.log(i)}有的时候我们指向访问实例上的方法怎么办?1.通过hasOwnProperty()判断这个值是否为ture2.通过Obj原创 2022-03-03 20:25:03 · 239 阅读 · 0 评论 -
js事件阻止事件在dom层次的传播
stopPropagation()可以阻止事件在dom层次的传播,只要从事件捕获阶段到事件冒泡阶段遇到事件处理函数实践测试1.设置一个容器里面包含一个按钮<div id="father"> <button id="son">按下我</button> </div> <style> #father{ width: 200px; height: 200px; background: red原创 2022-02-11 16:33:30 · 539 阅读 · 0 评论