- 博客(55)
- 收藏
- 关注
RSS订阅原创 js原型链
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object时，就没有_proto_指向了。prototype和contructorprototype指向函数的原型对象，这是一个显式原型属性，只有函数才拥有这个属性。contructor指向原型对象的构造函数。function Foo() {} console.log(Foo.prototype) console.log(Foo.prototype.cont
2020-12-23 15:49:10
117
原创 原型链继承
js中万物皆对象，每个对象都有一个隐式原型 proto ，指向创建它的构造函数的原型对象。函数（构造函数）除了有一个隐式原型对象，还有一个属性prototype，它指向一个对象，这个对象就是原型对象，也叫显式原型。原型对象有一个属性constructor，它指向这个构造函数本身。原型链，就是为了实现js的继承，把实例对象的__proto__属性一层一层的指向它的构造函数的原型对象，直到它（Object.prototype）的原型对象为null。定义一个构造函数Person作为父类，传入一个name属
2020-12-22 20:29:15
167
原创 js闭包
什么是闭包？在一个函数作用域中 保留 它上级作用域的局部变量，这些局部变量不会随着上级函数的执行完毕而被销毁简单的理解闭包：子函数可以使用父函数的局部变量（包括参数，因为参数也是局部变量）；function test() { var i=0; function b() { alert(++i); } return b; }var c= test();c();闭包是和JS的垃圾回收机制相关的，正常来说
2020-12-15 20:55:32
154
原创 js事件流
事件流一共由三个阶段分别是：1.捕获阶段2.目标阶段3.冒泡阶段事件绑定大家都知道，有DOM0级（on+事件类型）和DOM2级（addEventListener）DOM0级<div id="box1"></div>box1.onclick = function(){ console.log('box1');}输出了box1。再来看下面代码<div id="box1"></div>box1.onclick = function(){
2020-12-15 20:52:35
154
原创 立即执行函数
立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行，比如：(function () { alert('watch out!');}());这种模式有一些几部分组成：使用函数表达式定义一个函数(函数声明不能起作用)在结尾加上一对括号，让函数立即被执行将整个函数包裹在一对括号中(只有在你不将函数赋值给一个变量的时候才需要)立即执行函数的参数// prints:// I met Joe Black on Fri Aug 13 2010 23:26:59 GMT-0800
2020-12-08 20:31:24
627
原创 set和map
setES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。var s = new Set();set 使用object。is来判断两个值是否相等 但是专门针对0和-+0做了处理 在set里面默认他们是相等的var a = new Set() a.add(-0); a.add(+0); console.log(a)//Set(1){0}增加 s.add（数据）添加一个 添加一个数据到集合的末尾 如果这个数字原本就存在 那么 就不进行任何操作var
2020-12-08 19:04:07
52
原创 promise执行顺序总结
1、 const promise = new Promise((resolve, reject)=>{ console.log(1); resolve(); console.log(2); }) promise.then(()=>{ console.log(4); }) console.log(5); 运行结果是： 1,2,5,4 解释：promise的构造函数是同步执行，promise.then中的函数是异步执行。2、 const
2020-12-01 21:03:16
653
原创 ES6 解构赋值
从数组或对象或者说是可以遍历的物件中的提取值, 而后对变量进行赋值,称为解构赋值. 如果不是一个可以遍历的对象的话就会报错// 先前给变量赋值let a = 10let b = 20// 解构赋值let [a,b,c] = [1,2,3]// 非可遍历对象let [d] = 1// 报错// 在解构赋值的时候面对那些不能被遍历的对象,则会优先先转为对象,再做进一步处理.let {toString:b} = 1b解构赋值需要的是等号两边的结构相等.即可将等号右边的结果依据相同的结构
2020-12-01 20:57:17
73
原创 js变量提升
有些人可能会觉得js的代码是从上到下，一行一行的解释执行的。如果按照这样的思路，在有些情况下代码会得到错误的结果.a = 2;var a;console.log(a);有些人觉得会输出undefined，因为var a在a = 2之后，变量a被重复定义了，但是没有被赋值，所以是undefined。但是结果输出是2再看一下另一段代码console.log(a);var a = 2;这段代码的结果是undefined。js代码运行规则在js代码运行之前其实是有一个编译阶段的。编译
2020-11-24 20:40:17
106
原创 this指向
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象function f1(){ var user = '二狗子'; alert(this.user); //undefined alert(this); //object window } f1(); //实际上就是 window.f1();这里调用方法f1的是window对象，也就是说this指向window对象，所以会出现this
2020-11-24 20:36:14
44
原创 var、let.const的区别
在javascript中有三种声明变量的方式：var、let、const。varvar 声明全局变量，换句话理解就是，声明在for循环中的变量，跳出for循环同样可以使用。var定义的变量可以修改，如果不初始化会输出undefined，不会报错。var a = 1;// var a;//不会报错console.log('函数外var定义a：' + a);//可以输出a=1function change(){a = 4;console.log('函数内var定义a：' + a);//可以输出
2020-11-18 00:16:16
1672
原创 js中的几种错误类型
js中的控制台的报错信息主要分为两大类，第一类是语法错误，这一类错误在预解析的过程中如果遇到，就会导致整个js文件都无法执行。另一类错误统称为异常，这一类的错误会导致在错误出现的那一行之后的代码无法执行，但在那一行之前的代码不会受到影响。SyntaxError// SyntaxError: 语法错误// 1) 变量名不符合规范var 1 // Uncaught SyntaxError: Unexpected numbervar 1a // Uncaught SyntaxEr
2020-11-17 20:49:58
366
原创 prototype和__proto__
首先，先看一段简单的js代码：function Fun() { this.num = 10;};var fun = new Fun;var func = new Fun;console.log("Fun:", Fun);console.log("fun:", fun);console.log("func:", func);我定义了一个Fun()，（js中，一个function，有三个身份：函数，类，对象）。我把Fun()当做一个类，定义了fun和func对象。来看看执行结果吧：
2020-11-10 20:45:54
73
原创 深克隆与浅克隆
浅克隆var o={ a:1, }var cloneObj=o;cloneObj.a=2;console.log(o.a);//2浅克隆其实就是将o的地址复制一份给cloneObj，也就是克隆后的对象与原对象指向同一个地址，所以克隆后的对象与原对象操作的是同一块堆内存的内容深克隆var o={ a:1 }var cloneObj=JSON.parse(JSON.stringify(o));cloneObj.a=2;console.log(o.a);//1深克隆
2020-11-10 20:38:39
97
原创 JS入口函数和JQuery入口函数
区别：（1）JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。（2）JQuery入口函数是在所有标签加载完之后，就会去执行。接着，通过JS的一个覆盖问题引出对JQuery入口函数实现的解释。JS的入口函数window.onload函数有一个覆盖的问题，当文档中出现2个window.onload函数的时候，后者会覆盖前者，导致功能实现不了。但是JQuery却没有这样的问题，重要是因为JQuery入口函数只是对封装好了的方法的一个调用，只不过传的参数不
2020-11-04 00:41:23
253
原创 css3实现拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
2020-11-04 00:25:44
1483
原创 mouseover和mouseenter的异同区别
mouseover和mouseenter的不同点：不同点有两方面：事件的触发时机是否支持冒泡一、事件的触发时机？下面是我自己做的测试：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
2020-11-04 00:22:35
442
原创 jQuery淡入淡出
jQuery 提供了下面几种方法可以实现显示的淡入淡出效果：fadeIn()fadeOut()fadeToggle()fadeTo()fadeIn()方法fadeIn() 实现淡入效果，其基本语法如下：$(selector).fadeIn(speed,callback);可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）第二个可选参数为回调函数，在fadeIn()方法结束后调用。$("button").click(function(){
2020-11-02 18:43:48
938
原创 mouseover与mouseenter事件
mouseover与moseenter很多情况下可以混用，但是他们是有区别的。mouseover在当鼠标移入元素或其子元素的时候都会触发，是一个重复触发，冒泡的过程。见下面例子，一个父元素包含一个子元素，在其父元素内滑动鼠标，超出子元素的范围时，也会触发事件。而mouseenter在鼠标移入元素本身以后，无论在元素内部如何移动，都不会再次触发。mouseout与mouseleave同理。<!DOCTYPE html><html lang="en"><head>
2020-10-28 00:17:36
134
原创 jq淡入淡出
Jquery淡入淡出有四种方法fadeIn()fadeOut()fadeToggle()fadeTo()1.由隐藏淡出用fadeIn()方法语法:$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称实例:$("button").click(function(){ $("#div1").fadeIn()
2020-10-28 00:16:36
164
原创 弹性盒子
设置弹性盒子：displayflex：块级的弹性盒子inline-flex：行级的弹性盒子-webkit-flex：苹果和谷歌的兼容性搞清楚子元素和父元素设置在父元素上的值flex-direction：子元素在父容器中的位置（默认row）row：横向从左到右排列(左对齐)，默认排列row-reverse：横向右对齐元素反转column：纵向排列column-reverse：反转纵向排列主轴和交叉轴（侧轴）主轴为flex-direction属性对其的方式的方向交叉轴为主轴的垂直方
2020-10-28 00:11:49
135
原创 百度地图API
1、注册百度账号，在http://lbsyun.baidu.com/apiconsole/key?application=key 页面申请密钥(AK)2、页面引入<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>3、地图需要一个HTML元素作为容器，这样才能展现到页面上，创建了一个div元素。<body> <div id
2020-10-28 00:00:43
186
原创 弹性盒子
一、CSS3弹性盒子弹性盒子是CSS3的一种新布局模式。CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。注意： 弹性
2020-10-21 12:30:16
406
原创 css32d变换
1.缩放:(scale)transform:scale(2);--------水平/垂直方向扩大2倍transform:scaleX(2);--------水平方向扩大2倍transform:scaleY(2);--------垂直方向扩大2倍2.扭曲(skew)transform:skew(45deg);--------扭曲45度transform:skewX(45deg);--------水平扭曲45度transform:skewY(45deg);--------垂直扭曲45度3.旋转(
2020-10-19 23:56:50
859
原创 JS浅克隆和深克隆
为什么会有克隆这么个玩意呢？上代码：var a = [1,2,3];var b = a;a[1] = 4;console.log(b[1]); // 4这就是我们为什么提到克隆的原因。我只不过改了a数组的内容，怎么b数组的内容也跟着一起变了嘞？这里需要知道a和b在栈和堆中的存储情况大概说下，数组的内容是存储在堆中的，而a和b不过是作为一个引用（也可以参考C语言的指针）指向了数组内容的存储地址，上面var b = a;只不过是将a引用赋值给了b，并不是将数组内容拷贝一份出来，然后让b指向新
2020-10-08 23:40:32
145
原创 canvas渐变
线性渐变//获取画布。 var cas = document.getElementById('cvs'); var pencil = cas.getContext('2d');//开始绘画pencil.beginPath();//创建一个渐变的样式//参数描述： 渐变开始的x坐标，渐变开始的y坐标； 渐变结束的x坐标，渐变结束的y坐标var lineG = pencil.createLinearGradient(80,80, 200,200);//设置渐变行为 参数描述： 颜色
2020-10-08 21:47:24
84
原创 将图片画到canvas 上的几种方法
canvas 画图片第一种，就是在画布的坐标上，直接将图片画到上面去，此时假如图片大小超出了画布，图片也不缩放 <canvas id='mycanvas' width="500" height="500"></canvas><script> window.onload = function(){ var mycanvas = document.getElementById('mycanvas') var ctx = mycanvas.getC
2020-10-07 20:08:10
2921
原创 canvas绘图方法
是HTML5中新增的标签，用于绘制图形，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在>元素上绘图主要有三步：获取元素对应的DOM对象，这是一个Canvas对象；调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象
2020-09-27 00:51:24
447
原创 H5新增属性和标签
常用的新标签header：定义文档的页眉，头部nav： 定义导航链接部分footer：定义文档或节的页脚，底部article：定义文章section：定义文档中的节（section,区段）aside：定义其所处内容之外的内容 侧边<header> 语义 :定义页面的头部 页眉</header><nav> 语义 :定义导航栏 </nav><footer> 语义: 定义 页面底部 页脚</footer><art
2020-09-27 00:24:21
108
原创 js防抖和节流
针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。因此针对这类事件要进行防抖动或者节流处理防抖它的做法是限制下次函数调用之前必须等待的时间间隔。正确实现 debouncing 的方法是将若干个函数调用合成 一次，并在给定时间过去之后仅被调用一次。// 将会包装事件的 debounce 函数function debounce(fn, delay) { // 维护一个 timer let timer = nu
2020-09-21 00:33:53
125
原创 JS定时器和案例
1. 设置定时器语法：setInterval(函数，时间)注意：函数书写时不能带括号setInterval(fn,1000)//正确setInterval(fn(),1000)//错误//时间的最小设置不小于14ms2. 清除定时器语法：clearInterval(所清除的定时器名称)3. 点击更换颜色案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-09-13 23:41:14
199
原创 js匿名函数
匿名函数function() {}以上就是一个匿名函数，它没有名字。用途1.函数表达式2.回调函数3.模拟块级作用域函数表达式// 01var fn = function() {}// 02var fn = function fn() {}例function t(count) { for (var i = 0; i < count; i++) {} console.log("i:", i);}var count = 5;t(count);运行结
2020-09-06 21:56:17
101
原创 JS中获取DOM的方法
获取DOM的方法document.getElementById(‘id名’)在document上下文下获取元素(通过Id获取的元素是一个元素对象，获取不到就是null)document.getElementsByTagName(‘标签名’)通过指定的上下文获取指定的标签，获取的是一个元素集合，如果没有获取到元素，那就是空元素集合document.getElementsByClassName(’’)通过指定的上下文或按照class名取指定的标签，获取的是一个元素集合，如果没有获取到元素,那就是空元
2020-08-30 23:37:09
238
原创 innerHTML与innerText区别
document 对象中有innerHTML和innerText 两个属性， 这两个属性都是获取document对象的文本内容的，这两个属性间还是有很多区别的<html> <head><title>innerHTML</title></head> <body> <p id="p1">hello world </p> <script> var content = document.g
2020-08-30 20:53:44
242
原创 正则表达式
正则表达式：正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式的作用:1.灵活性、逻辑性和功能性非常的强2.可以迅速地用极简单的方式达到字符串的复杂控制一些常用的字符集正则手机号`var` `myreg = /^(13[0-9]{1}|14[5|7|9]{1}|15[0-3|5-9]{1}|166|17[0-3|5-8]{1}|18[0-9]{1}|19[8-9]{
2020-08-10 00:15:19
63
原创 预编译
js在运行时首先会通篇检查，排除一些语法上的低级错误，没有问题后就会进行预编译，最后程序才开始执行，解释一行，执行一行。所以预编译是在函数执行前发生的。结果：变量的声明在输出的下面，却没有报错，值是undefinedconsole.log(a)，输出a。这是输出的值为function a(){}；var a = ‘demo’ 其实就是a = ‘demo’。因为var a已经在预编译中ok了。AO中的a的值变为’demo’；console.log(a) ，这时候输出的就是 demo；fun
2020-08-09 15:01:57
460
原创 js数组去重的几个方法
第一种 遍历数组这个方法就感觉最直观吧var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2] var newarr = []; for (var i = 0; i < arr.length; i++) { if (newarr.indexOf(arr[i]) ==-1) { newarr.push(arr[i]) } } console.log(newarr)这个利用了indexOf()方法（indexOf()方法如果查询到则返
2020-08-02 23:32:01
137
原创 js的冒泡排序
冒泡排序主要是两个挨着的数比较,如果他们顺序相反就交换位置.直到没有顺序相反的为止.比如说 声明一个数组 var arr=[5,4,3,2,1]; 把他用冒泡排序成升序排列 ，让他变成[1,2,3,4,5]; var arr = [5, 4, 3, 2, 1]; for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - 1 - i; j++) {
2020-08-02 14:50:02
96
原创 js数组
1.join()数组转字符串，方法只接收一个参数：即默认为逗号分隔符（）。<script> var arr=[1,2,3,4]; console.log(arr.join()); //1,2,3,4 console.log(arr.join(":")); //1:2:3:4 console.log(arr); //[1,2,3,4],原数组不变</script>join()实现重复字符串<script> function repeatStr(s
2020-07-27 00:26:10
51
原创 数组遍历
for最简单常见的一种循环遍历方法var arr = [1, 2, 3, 4, 5, 6]for(var i = 0; i < arr.length; i++) { console.log(arr[i])}// 1 2 3 4 5 6for…in…(拓展)这个循环用的人也很多，但是效率最低var arr = ['我', '是', '谁', '我', '在', '哪']for(var key in arr) { console.log(key)}// 0 1 2 3
2020-07-26 23:04:17
99
空空如也
Sql server有个视图写不出来，需要help，有偿
2023-12-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人