Javascript高级
关注
分享
扫一扫
js作用域、原型以及原型链、闭包、异步机制、ES6 ES7新特性
模块化规范 构建工具
草莓味的狮子座leo
这个作者很懒，什么都没留下…
展开
-
图片懒加载和预加载
一、懒加载掘金1.什么是懒加载延迟加载，指长网页中延迟加载图像，用户滚动到它们之前，可视区域外的图像不会加载2.为什么要懒加载1）提升用户体验2）减少无效资源的加载3）防止并发加载的资源过多造成js阻塞3.懒加载的原理首先将页面上的图片的 src属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-原创 2020-12-08 21:15:51 · 168 阅读 · 0 评论 -
IE和DOM事件流
事件流事件流描述的是从页面中接收事件的顺序1）事件冒泡流（IE事件流）：由内到外 事件开始时由最具体的元素（node）接收，然后逐渐向上传播（至文档document）2）事件捕捉流（Netscape事件流)：由外至内 不太具体的节点最先接收到事件，事件到达预定目标之前捕捉3）DOM事件流：事件捕获——目标——事件冒泡（对事件作出响应）区别事件流的执行顺序不一样<body> <div> <button id = 'btn'>点击&..原创 2020-12-08 20:35:03 · 172 阅读 · 0 评论 -
js的Event Loop机制
浏览器中的Event Loopjavascript有一个main thread主线程和call-stack调用栈，所有的任务都会被放到调用栈中等待主线程执行JS调用栈栈是仅在表尾插入或删除的线性表，按照先进后出的原则存储数据，先进入的数据存于栈底，最后的数据在栈顶，从栈顶开始读取数据当函数执行的时候，被添加至栈顶，当调用栈执行完毕后，就会从栈顶移除，直至栈内被清空同步任务和异步任务同步任务会在调用栈中等待主线程执行，异步任务有了结果之后，将回调函数放入任务队列中等主线程空闲的时候调用，被读取原创 2020-11-25 19:08:51 · 152 阅读 · 1 评论 -
forEach、map、filter、reduce的区别
1.相同点map、filter、reduce执行匿名函数支持三个参数，分别是：当前元素、当前元素索引、当前元素所属的数组匿名函数this指向window只能遍历数组2.不同点map速度比forEach快map和filter返回新数组，不会影响原数组；forEach不会产生新数组，返回undefined，reduce把数组缩减为一个值（求和，求积）reduce有4个参数，第一个为初始值3.forEach语法var arr1 = ['w', 'a', 'b', 'c']arr1.fo原创 2020-11-25 18:04:21 · 1280 阅读 · 0 评论 -
js数据结构与算法
数组链接栈csdn队列；链接链表链表双向链表字典字典递归树二叉堆图排序和搜索算法排序算法算法复杂度剑指offerJavascript版本原创 2020-11-17 10:59:16 · 76 阅读 · 0 评论 -
Babel
Babel转码器：ES6代码转化为ES5代码// 转码前input.map(item => item+1)// 转码后input.map(function(item){ return item+1})原创 2020-11-16 15:36:16 · 73 阅读 · 0 评论 -
js异步函数-Promise、async、await
一、PromisePromise就是一个容器，里面保存未来才会结束的事件（异步操作）语法：Promise对象是一个构造函数，new一个Promise实例const promise=new Promise（function（resolve，reject）{ .... if(/* 异步操作成功 */){ resolve(value); }else{ reject(error); }}).then(function(value){ //succe原创 2020-11-09 20:14:51 · 1137 阅读 · 0 评论 -
JS异步编程
一、回调函数f1（）f2（）f2写成f1的回调函数 function f1(callback){ setTimeout(function () { // f1的任务代码 callback(); }, 1000); } f1(f2);二、事件监听任务的执行不取决于代码的顺序，而取决于某个事件是否发生f1.on('done', f2);三、发布/订阅存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个原创 2020-11-09 16:58:19 · 110 阅读 · 0 评论 -
JS_OOP_构造函数
面向对象的特性封装继承多态CSDN工厂函数我们可以写一个函数，解决代码重复问题： function createPerson (name, age) { return { name: name, age: age, sayName: function () { console.log(this.name) } } }然后生成实例对象： var p1 = createPerson('Jack', 18) var p原创 2020-11-04 17:01:48 · 96 阅读 · 0 评论 -
JavaScript 运行机制详解
异步任务（1）所有同步任务都在主线程上执行，形成执行栈（2）主线程之外，还存在一个”任务队列“，异步任务有了运行结果，就在“任务队列’之中放置一个事件（3）执行栈中的所有同步任务执行完毕，系统读取”任务队列“里面的事件。那些对应的异步任务结束等待状态，进入执行栈，开始执行（4）主线程不断重复第三步…事件和回调函数”任务队列“是一个事件的队列，IO设备完成一项任务，就在”任务队列“中添加一个事件，表示相关的异步任务进入”执行栈“中”任务队列“中的事件，只要指定过回调函数，这些事件发生时就会进入”原创 2020-11-02 21:13:28 · 130 阅读 · 0 评论 -
var和let
let是ES6新增的，用来声明局部变量，作用于块级，有暂时性死区的约束；var是函数作用域var变量提升var a = 111f()console.log(a) 111function f() { console.log(a) 111}var a = 111 //全局变量f() //函数定义在调用的后面，但是函数声明会提升至作用域的顶部console.log(a) 111function f() { console.log(a) //当前变量a是下原创 2020-10-16 10:30:35 · 155 阅读 · 0 评论 -
js基础总结
数据类型分类基本类型（值）：String 、Number 、boolean、 undefined、 null引用类型（对象）：object、 function 、array判断typeof 、 instanceof 、=== / ==注意 NaN 的数据类型是 number数组(Array)的数据类型是 object日期(Date)的数据类型为 objectnull 的数据类型是 object未定义变量的数据类型为 undefined函数基础定义方法1、静态方法原创 2020-10-16 09:58:59 · 95 阅读 · 0 评论 -
this
1、全局函数中 this -> window2、严格模式下 this = undefined3、函数调用时，new可以改变this指向function demo() { //this = Object this.str = 'aaaa' console.log(this)}let a = new demo() //创建一个实例对象console.log(a.str) */ //this指向这个实例对象4、call和apply方式调用函数function de原创 2020-10-29 19:24:11 · 128 阅读 · 0 评论 -
JS_OOP_类的继承
原型链继承 // 创建父类 function People(name) { this.name = name this.sum = function() { console.log(this.name) } } People.prototype.age = 12 // 创建子类 function Person() .原创 2020-10-29 09:37:16 · 109 阅读 · 0 评论 -
JS_OOP_类和对象
对象的创建对象字面量形式 var p = { name: "jack", age: 12, addr: '北京市', work: function() { console.log('working.......') } } }成员访问两种访问方式 p.name p['name']没有值返回undefinedObject调原创 2020-10-28 21:29:53 · 94 阅读 · 0 评论 -
JS_OOP_作用域
JS的解析与执行过程参考链接预处理：创建一个词法环境LE，扫描JS中使用声明方式声明的函数，用var定义的变量，并将他们加到预处理阶段的LE词法环境中一、全局环境中预处理处理函数声明有冲突时，会覆盖；处理变量声明有冲突时，会忽略。二、函数中的解析和执行过程arguments:调用函数时实际调用的参数个数注意：没有用var声明的变量，会变成全局变量三、作用域块作用域：{ },JS没有块作用域函数作用域:动态作用域 var z = 100 function f.原创 2020-10-28 19:41:00 · 99 阅读 · 0 评论 -
JS运行机制
参考链接线程和进程的区别进程是cpu资源分配的最小单位（拥有资源、独立运行）线程是cpu调度的最小单位（线程是建立在进程的基础上一次程序运行单位）一个进程由一个或多个线程组成单线程与多线程，都是指在一个进程内的单和多浏览器是 多进程的浏览器内核（渲染进程）浏览器的渲染进程是多线程的1、GUI渲染线程负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时原创 2020-10-28 15:38:24 · 86 阅读 · 0 评论 -
JS事件
事件模型内联模型在html中把事件处理函数作为属性执行js代码脚本模型在javascript中处理事件DOM2模型DOM2级事件”定义了两个方法，用于添加事件和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数；事件名、函数、冒泡或捕获的布尔值(true表示捕获，false表示冒泡)。IE事件处理程序，IE中实现了DOM中类似的两个方法：attachEvent()和detac原创 2020-10-27 22:11:23 · 127 阅读 · 0 评论 -
前端构建工具-webpack
webpack功能模块化支持、代码压缩混淆、处理js兼容问题、性能优化什么是webpack？本质上，webpack是javascript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundlewebpack像一条生产线，经过一系列处理流程后将源文件转换为输出结果；每个处理流程都是单一作用，多个流程之间存在依赖关系，只有完成当前的流程才能继续处理下一个流程。webpack构建流程初始化原创 2020-09-30 21:47:39 · 216 阅读 · 0 评论 -
前端构建工具—Gulp
概述：基于node平台开发的前端构建工具Gulp能做什么？1）项目上线，Html、CSS、JS文件压缩合并2）语法转换（es6，less）3）公共文件抽取Gulp使用1、npm install gulp下载gulp库文件2、项目的根目录下建立gulpfile.js文件3、重构项目的文件夹结构：src目录放置源代码文件dist目录放置构建后文件4、在gulpfile.js文件中编写任务5、在命令行工具执行gulp任务gulp中的方法gulp.src()：获取任务要处理的文件原创 2020-09-29 11:31:26 · 140 阅读 · 0 评论 -
prototype、__proto__、constructor
参考博客__proto__属性（1）__proto__和constructor属性是对象所独有的；（2）prototype属性是函数所独有的注：在javascript中，函数也是一个对象，因此函数同时拥有__proto__和prototype作用：当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的对象（父对象）去找…直到原型链顶端nullprototype属性函数独有的，是函数的原型对象，也就是这个函数创建的实例的原型对象functi.原创 2020-09-28 16:25:08 · 102 阅读 · 0 评论 -
闭包
匿名函数1.1定义：没有实际的函数名1.2语法规则：(function (){ //由于没有执行该匿名函数，所以不会执行匿名函数体内的语句。 console.log("张培跃");})1.3执行：在匿名函数后面加上一个括号即可立即执行！(function (){ //此时会输出 console.log("张培跃");})()1.4 作用1）通过匿名函数可以实现闭包2）模拟块级作用域，减少全局变量2.匿名函数自调用（闭包）作用：数据是.原创 2020-09-28 10:55:10 · 117 阅读 · 0 评论