JavaScript 高级
关注
分享
扫一扫
成为高级前端工程师的利器
「已注销」
这个作者很懒，什么都没留下…
展开
-
47-H5 Web Workers 多线程
介绍Web Workers 是 HTML5 提供的一个javascript多线程解决方案我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质主线程html代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>We原创 2021-09-09 22:02:37 · 193 阅读 · 0 评论 -
46-事件循环模型
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>事件循环模型</title> </head> <body> <button id="btn">测试</button>1. 所有代码分类 * 初始化执行代码(同步代码): 包含绑定dom事件监听, 设置定时器, 发送ajax请求原创 2021-09-09 19:36:57 · 93 阅读 · 0 评论 -
45-js单线程
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>JS是单线程的</title> </head> <body>1. 如何证明js执行是单线程的? * setTimeout()的回调函数是在主线程执行的 * 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行 2. 为什么js要用单线程模式原创 2021-09-09 19:22:32 · 103 阅读 · 0 评论 -
44-定时器引发的思考
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>定时器引发的思考</title> </head> <body> <button id="btn">启动定时器</button><!--1. 定时器真是定时执行的吗? * 定时器并不能保证真正定时执行 * 一般会延迟原创 2021-09-09 18:49:17 · 116 阅读 · 0 评论 -
43-浏览器内核
原创 2021-09-09 12:30:34 · 132 阅读 · 0 评论 -
42-进程与线程
进程与线程一、进程二、线程一、进程程序的一次执行, 它占有一片独有的内存空间可以通过windows任务管理器查看进程二、线程原创 2021-09-09 11:53:49 · 84 阅读 · 0 评论 -
41-闭包终极面试题详解
之前在第36章的时候弄了三个闭包的面试题，前面两个我都懂，可是第三个确实把我绕蒙了，不过好在现在已经搞明白了，这是原题链接，建议自己先做，然后再看解析。function fun(n, o) { console.log(o) return { fun: function(m) { return fun(m, n) } }}var a = fun(0)a.fun(1)a.fun(2)a.fun(3) //undefined,0,0,0/*闭包就是函数的嵌套，内部函数引用了外部原创 2021-09-09 09:20:09 · 492 阅读 · 0 评论 -
39-继承模式之--组合继承
在说组合继承前，我们先说借用构造函数继承(假继承)借用构造函数继承套路定义父类型构造函数定义子类型构造函数在子类型构造函数中调用父类型构造函数关键在子类型构造函数中通过call()调用父类型构造函数示例：function Person(name, age) { this.name = name this.age = age}function Student(name, age, price) { Person.call(this, name, age) // 相当于:原创 2021-09-08 21:14:39 · 120 阅读 · 0 评论 -
38-继承模式之--原型链继承
原型链继承套路定义父类型构造函数给父类型的原型添加方法定义子类型构造函数创建父类型的实例化对象赋值给子类型的原型将子类型原型的构造属性(constructor)设置为子类型给子类型原型添加方法创建子类型的对象: 可以调用父类型的方法关键！！！子类型的原型为父类型的一个实例对象示例：// 父类型function Supper() { this.supProp = 'Supper property'}// 给父类型的原型添加方法Supper.prototype.show原创 2021-09-08 20:49:14 · 137 阅读 · 0 评论 -
37-创建对象的几种模式
文章目录一、Object构造函数模式二、对象字面量模式三、工厂模式（用的很少）四、自定义构造函数模式五、构造函数+原型的组合模式一、Object构造函数模式套路: 先创建空的Object对象, 再动态添加属性/方法适用场景: 起始时不确定对象的内部数据问题: 语句太多示例：// 先创建空的Object对象var p = new Object()// 或者：p = {} // 此时内部数据是不确定的// 再动态添加属性/方法p.name = 'Tom'p.age = 12p.s原创 2021-09-07 23:25:48 · 124 阅读 · 0 评论 -
36-闭包_面试题
试题1：var name = "The Window";var object = { name: "My Object", getNameFunc: function() { return function() { return this.name; }; }};alert(object.getNameFunc()()); // The Window试题2：var name2 = "The Window";var object2 = { name2: "My Objec原创 2021-09-07 22:31:25 · 188 阅读 · 0 评论 -
35-[内存溢出]&[内存泄漏]
内存溢出一种程序运行出现的错误当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误var obj = {}for (var i = 0; i < 10000; i++) { obj[i] = new Array(10000000) console.log('-----')}内存泄漏占用的内存没有及时释放内存泄漏积累多了就容易导致内存溢出常见的内存泄漏：1.意外的全局变量function fn() { a = 10 console.log(a)}f原创 2021-09-07 20:33:34 · 149 阅读 · 0 评论 -
~~~闭包深度剖析
文章目录一、理解闭包如何产生闭包？闭包到底是什么？产生闭包的条件？一、理解闭包如何产生闭包？当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包.闭包到底是什么？使用chrome调试查看理解一: 闭包是嵌套的内部函数(绝大部分人)理解二: 包含被引用变量(函数)的对象(极少数人)注意: 闭包存在于嵌套的内部函数中产生闭包的条件？函数嵌套内部函数引用了外部函数的数据(变量/函数)function fn1() { var a = 2原创 2021-09-06 20:39:15 · 251 阅读 · 0 评论 -
29-闭包引入_循环遍历加监听
现有需求：点击某个按钮, 提示"点击的是第n个按钮"var btns = document.getElementsByTagName('button')1.最菜的失败写法：for (var i = 0; i < btns.length; i++) { var btn = btns[i] btn.onclick = function () { alert('第' + (i + 1) + '个') }}2.稍微聪明的写法：for (var i = 0, length.原创 2021-09-06 19:22:36 · 177 阅读 · 0 评论 -
{27、28}-[作用域]&[作用域链]
文章目录一、作用域理解分类作用小试牛刀二、作用域与执行上下文的区别与联系区别1区别2联系三、作用域链理解查找一个变量的查找规则四、面试题一、作用域理解就是一块"地盘", 一个代码段所在的区域它是静态的(相对于上下文对象), 在编写代码时就确定了分类全局作用域函数作用域没有块作用域(ES6有了)作用隔离变量, 不同作用域下同名变量不会有冲突小试牛刀var a = 10, b = 20;function fn(x) { var a = 100, c = 3原创 2021-09-06 18:09:19 · 83 阅读 · 0 评论 -
25-执行上下文面试题
刚刚做了三个题，都是细节！！！题一：function a() {}var aconsole.log(typeof a) // function// 先执行变量提升, 再执行函数提升题二：if (!(b in window)) { var b = 1}console.log(b) // undefined// 全局执行上下文时，window里已经有了b，值为undefined，属于变量提升。题三：var c = 1function c(c) { console.log(原创 2021-09-05 22:40:03 · 134 阅读 · 0 评论 -
24-执行上下文栈（后进先出）
执行上下文栈在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象在全局执行上下文(window)确定后, 将其添加到栈中(压栈)在函数执行上下文创建后, 将其添加到栈中(压栈)在当前函数执行完后, 将栈顶的对象移除(出栈)当所有的代码执行完后, 栈中只剩下window流程分析...原创 2021-09-05 21:43:37 · 115 阅读 · 0 评论 -
23-[全局执行上下文]&[函数执行上下文]
文章目录代码分类(位置)全局执行上下文函数执行上下文代码分类(位置)全局代码函数(局部)代码全局执行上下文在执行全局代码前将window确定为全局执行上下文对全局数据进行预处理var定义的全局变量==>undefined, 添加为window的属性function声明的全局函数==>赋值(fun), 添加为window的方法this==>赋值(window)开始执行全局代码函数执行上下文在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象原创 2021-09-05 21:11:40 · 522 阅读 · 0 评论 -
22-变量提升与函数提升
文章目录变量声明提升函数声明提升面试题问题: 变量提升和函数提升是如何产生的?变量声明提升通过var定义(声明)的变量, 在定义语句之前就可以访问到值: undefined函数声明提升通过function声明的函数, 在之前就可以直接调用值: 函数定义(对象)面试题var a = 3function fn() { console.log(a) // undefined var a = 4}fn()console.log(b) // undefined 变量提升原创 2021-09-05 20:31:06 · 103 阅读 · 0 评论 -
~~~原型链深度剖析
JavaScript原型链原创 2021-09-05 01:06:58 · 180 阅读 · 0 评论 -
16-[prototype]显式原型&[__proto__]隐式原型
每个function函数都有一个prototype，即显式原型（属性）每个实例对象都有一个__proto__，即隐式原型（属性）实例对象的隐式原型的值为：其对应的构造函数的显式原型的值源代码：// 定义构造函数function Fn () { // 内部语句：this.prototype = {}}// 1. 每个函数function都有一个prototype，即显式原型属性，默认指向一个空的Object对象console.log(Fn.prototype)// 2. 每个实例对象.原创 2021-09-04 02:18:56 · 181 阅读 · 0 评论 -
14-函数的prototype（显式原型）
文章目录函数的prototype属性给原型对象添加属性（一般都是方法）练习函数的prototype属性每个函数都有一个prototype属性，它默认指向一个Object空对象，即称为：原型对象原型对象中有一个属性constructor，它指向函数对象示意图：给原型对象添加属性（一般都是方法）作用：函数的所有实例对象自动拥有原型中的属性（方法）练习// 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)console.log(Date.原创 2021-09-04 00:01:09 · 318 阅读 · 0 评论 -
12-JavaScript语句后面应该加分号吗
JavaScript语句后面到底该不该加分号？js一条语句的后面可以不加分号是否加分号是编码风格问题, 没有应该不应该，只有你自己喜欢不喜欢在下面2种情况下不加分号会有问题小括号开头的前一条语句中方括号开头的前一条语句解决办法: 在行首加分号强有力的例子: vue.js库知乎热议举例var a = 3(function () {})()/*错误理解var a = 3(function () {})()*/var b = 4[1, 3].forEach(fun.原创 2021-09-03 12:15:51 · 275 阅读 · 0 评论 -
11-函数中的this
this是什么?任何函数本质上都是通过某个对象来调用的, 如果没有直接指定就是window所有函数内部都有一个变量this它的值是调用函数的当前对象如何确定this的值?test(): windowp.test(): pnew test(): 新创建的那个对象p.call(obj): obj练习function Person(color) { console.log(this); this.color = color; this.getColor = func.原创 2021-09-03 10:53:30 · 83 阅读 · 0 评论 -
10-IIFE（立即调用函数表达式）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>IIFE</title></head><body>1. 理解 * 全称: Immediately-Invoked Function Expression2. 作用 * 隐藏实现 * 不会污染外部(全局)命名空间 * 用它来编写js模块原创 2021-09-03 10:19:48 · 109 阅读 · 0 评论 -
09-回调函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回调函数</title></head><body> <button id="btn">测试点击事件</button> <!--1. 什么函数才是回调函数? 1). 你定义的 2). 你没有调 3). 但最终它原创 2021-09-03 00:41:31 · 89 阅读 · 0 评论 -
08-函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04_函数</title></head><body>1. 什么是函数? * 实现特定功能的n条语句的封装体 * 只有函数是可以执行的, 其它类型的数据不能执行2. 为什么要用函数? * 提高代码复用 * 便于阅读交流3. 如何定义函数?原创 2021-09-03 00:05:58 · 89 阅读 · 0 评论 -
07-对象及相关问题
文章目录什么是对象为什么要用对象对象的组成如何访问对象内部数据什么是对象多个数据的封装体用来保存多个数据的容器一个对象代表现实中的一个事务为什么要用对象为了统一管理多个数据对象的组成属性：属性名（字符串）和属性值（任意数据）组成方法：一种特别的属性（属性值是函数）如何访问对象内部数据.属性名：编码简单，但有时不能用['属性名']：编码麻烦，但能通用var p = { name: 'Tom', age: 12, setName: function (nam原创 2021-09-02 23:27:40 · 85 阅读 · 0 评论 -
06-[函数调用时的值传递和引用传递]&[内存管理]
文章目录关于函数调用时数据传递的问题内存管理关于函数调用时数据传递的问题问题: 在js调用函数传递变量参数时, 是值传递还是引用传递理解1: 都是值(基本值/地址值)传递理解2: 可能是值传递, 也可能是引用传递(地址值)var a = 3function fn(a) { a = a + 1}fn(a)console.log(a)function fn2(obj) { console.log(obj.name)}var obj = { name: 'Tom'原创 2021-09-02 21:56:37 · 113 阅读 · 0 评论 -
05-关于[赋值和内存]&[引用变量赋值]的问题
文章目录关于赋值和内存的问题关于引用变量赋值的问题关于赋值和内存的问题问题: var a = xxx, a内存中到底保存的是什么?xxx是基本数据, 保存的就是这个数据xxx是对象, 保存的是对象的地址值xxx是一个变量, 保存的是xxx的内存内容(可能是基本数据, 也可能是地址值)关于引用变量赋值的问题2个引用变量指向同一个对象, 通过其中一个变量修改这个对象的内部数据, 另一个变量看到的是修改之后的数据2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一个引用原创 2021-09-02 21:06:48 · 142 阅读 · 0 评论 -
04-[数据]&[内存]&[变量]
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02_数据_变量_内存</title></head><body>1. 什么是数据? * 存储在内存中代表特定信息的'东东', 本质上是0101... * 数据的特点: 可传递, 可运算 * 一切皆数据 * 内存中所有操作的目标: 数据原创 2021-09-02 19:59:35 · 74 阅读 · 0 评论 -
03-数据类型相关问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>相关问题</title></head><body><!--1. undefined与null的区别? * undefined代表定义未赋值 * null定义并赋值了, 只是值为null2. 什么时候给变量赋值为null呢? * 初始赋值原创 2021-09-02 13:43:58 · 96 阅读 · 0 评论 -
02-数据类型
数据类型分类基本（值）类型对象（引用）类型判断typeofinstanceof===练习基本类型对象类型分类基本（值）类型Number：任意数值String：任意文本Boolean：true / falseundefined：undefinednull：null对象（引用）类型Object：任意对象Array：特别的对象类型（下标/内部数据有序）Function：特别的对象类型（可执行）判断typeof可以区别：数值、字符串、布尔值、undefined、function原创 2021-09-02 10:24:31 · 118 阅读 · 0 评论