![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javaScript
文章平均质量分 74
你的微笑暖暖的
这个作者很懒,什么都没留下…
展开
-
监听浏览器窗口关闭onbeforeunload不起作用的原因
监听浏览器窗口关闭onbeforeunload不起作用的原因原创 2022-06-29 15:36:19 · 3764 阅读 · 0 评论 -
常见js面试题--手写节流,防抖,深拷贝
常见手写面试题原创 2022-06-03 18:23:10 · 440 阅读 · 0 评论 -
常见js面试题--手写call,apply,bind
手写简易call,apply,bind面试中可能会让你手写写这几个函数,但是他们的内部实现其实是C++代码,所以我们这里只是用js实现简易版的,不会过多的考虑边界情况,当然,应对面试,肯定是够用了。一、call函数实现对于这个我就一步一步的给大家分析(后面的apply和bind就不在一步步地分析了)1.在Function的原型上挂载我们自己的call函数Function.prototype.xtCall = function() { console.log(111);}functio原创 2022-06-01 21:50:20 · 158 阅读 · 0 评论 -
JavaScript进阶讲解十八—>await-async-eventloop
异步函数async关键字用于声明一个异步函数async function foo() { }const foo1 = async function() { }const foo2 = async () => { }class Foo3 { async foo() { }}异步函数的执行流程async function foo() { console.log('foo start'); console.log(1)原创 2022-05-29 22:03:32 · 318 阅读 · 0 评论 -
JavaScript进阶讲解十七—>迭代器与生成器
迭代器(iterator)迭代器(iterator),是确使用户可在容器对象(container,例如链表或数组)上遍访的对象,使用该接口无需关心对象的内部实现细节。迭代器是帮助我们对某个数据结构进行遍历的对象在JavaScript中,迭代器也是一个具体的对象,这个对象需要符合迭代器协议(iterator protocol):迭代器协议定义了产生一系列值(无论是有限还是无限个)的标准方式在js中这个标准就是一个特定的next方法next方法有如下的要求:一个无参数或者一个参数的函数(如原创 2022-05-29 18:22:41 · 180 阅读 · 0 评论 -
JavaScript进阶讲解十六—>Promise
Promise三个状态pending: 初始状态,既没有被兑现,也没有被拒绝(当执行executor中的代码时,处于该状态)fulfilled:操作成功完成(执行了resolve时,处于该状态)rejected:操作失败(执行了reject时,处于该状态)function requestData(url) { return new Promise((resolve, reject) => { if (url === '123') { reso原创 2022-05-29 00:38:52 · 223 阅读 · 0 评论 -
JavaScript进阶讲解十五—>实现响应式
响应式可以自动响应数据变量的代码机制,我们就称之为是响应式。如:当有一个值发生了变化,引用了这个值的地方会自动重新执行响应式的实现我们已经知道了其原理,那么我们如何实现对象的响应式呢?我们看看我们需要做什么?对象的属性发生变化时,我们需要将要做响应式的代码,重新执行。我们先来分析步骤。我们我们需要实现一个响应式函数(他接收需要响应式的函数)响应式依赖收集(第一反应就是用数组管理,但数组又太难管理,所以可以用类)监听对象的变化(Object.defineProperty或者用proxy)当原创 2022-05-28 19:05:33 · 1924 阅读 · 0 评论 -
JavaScript进阶讲解十四—>Proxy-Reflect
监听对象的操作在之前我们已将讲过一种方式(Object.defineProperty)通过它的存取属性描述符,我们就可以实现对对象属性的监听。const obj = { name: 'xt', age: 18}Object.keys(obj).forEach(key => { let val = obj[key] Object.defineProperty(obj, key, { get: function() { c原创 2022-05-28 14:21:00 · 187 阅读 · 0 评论 -
JavaScript进阶讲解十三—>es6~es12(三)
Includes(es7)判断一个数组或者字符串中是否包含某个元素,包含则返回 true,否则返回false。(在es7之前,可以用indexOf判断,不存在返回-1)const arr = ['a', 'b', 'c']console.log(arr.includes('a')); // trueconsole.log(arr.includes('d')); // falseconst str = 'abc'console.log(str.includes('a')); // truec原创 2022-05-27 22:09:11 · 223 阅读 · 0 评论 -
JavaScript进阶讲解十二—>es6~es12(二)
SymbolSymbol是ES6中新增的一个基本数据类型,翻译为符号。Symbol的作用Symbol生成的是一个独一无二的值。Symbol值是通过Symbol函数来生成的,生成后可以作为属性名。在ES6中,对象的属性名可以使用字符串,也可以使用Symbol值。Symbol即使多次创建值,它们也是不同的:Symbol函数执行后每次创建出来的值都是独一无二的。可以在创建Symbol值的时候传入一个描述description(es10)const s1 = Symbol()const s2原创 2022-05-26 22:59:28 · 115 阅读 · 0 评论 -
JavaScript进阶讲解十一—>es6~es12(一)
一、let与constlet和var是没有太大的区别的,都是用于声明一个变量const关键字是constant的单词的缩写,表示常量、衡量它表示保存的数据一旦被赋值,就不能被修改(如果赋值的是引用类型,那么可以通过引用找到对应的对象,修改对象的内容)let、const不允许重复声明变量let/const作用域提升作用域提升:在声明变量的作用域中,如果这个变量可以在声明之前被访问,那么我们可以称之为作用域提升。在最开始讲作用域的时候,我们之间说过var声明的变量是会进行作用域提升的cons原创 2022-05-26 20:26:56 · 233 阅读 · 0 评论 -
JavaScript进阶讲解十—>面向对象四(class类)
一、对象的其他方法hasOwnProperty:对象是否有某一个属于自己的属性(不是在原型上的属性)。in/for in 操作符:判断某个属性是否在某个对象或者对象的原型上。instanceof:用于检测构造函数的pototype,是否出现在某个实例对象的原型链上。isPrototypeOf:用于检测某个对象,是否出现在某个实例对象的原型链上var obj = { name: 'xt'}var info = Object.create(obj, { age: { valu原创 2022-05-25 21:26:54 · 205 阅读 · 0 评论 -
JavaScript进阶讲解九—>面向对象三(原型链)
一、面向对象的特性封装:将属性和方法封装到一个类中,就是封装的过程。继承:继承是面向对象中非常重要的,不仅仅可以减少重复代码的数量,也是多态前提(纯面向对象中)多态:不同的对象在执行时表现出不同的形态。二、原型链var obj = { name: 'xt'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = { age: 18}console.log(原创 2022-05-24 20:34:41 · 70 阅读 · 0 评论 -
JavaScript进阶讲解八—>面向对象二(原型)
一、使用new操作符时,是怎么执行的?在内存中创建一个新的空对象。将改构造函数的prototype属性赋值给这个对象内部的prototype属性。构造函数内部的this,会指向创建出来的新对象。执行函数内部代码。如果构造函数没有返回非空对象,则返回创建出来的新对象二、对象的原型...原创 2022-05-23 22:15:49 · 84 阅读 · 0 评论 -
JavaScript进阶讲解七—>面向对象一
原创 2022-05-22 22:13:52 · 92 阅读 · 0 评论 -
JavaScript进阶讲解六—>js函数式编程
一、JavaScript纯函数定义:(维基百科)符合以下条件的函数,被称为纯函数此函数在相同的输入值时,需产生相同的输出。函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产生的外部输出无关。该函数不能有语义上可观察的函数副作用,诸如“触发事件”,使输出设备输出,或更改输出值以外物件的内容等。简单的来说:4. 确定的输入,一定会产生确定的输出。5. 函数在执行过程中,不能产生副作用。1.1、副作用定义:表示在执行一个函数时,除了返回函数值之外,还对调用函数产生了附原创 2022-05-22 01:48:18 · 224 阅读 · 0 评论 -
JavaScript进阶讲解五—>js中的arguments
我们本节来了解下js中的arguments一、定义arguments 是一个 对应于 传递给函数的参数 的 类数组(array-like)对象。我们这里提到了类数组,那么什么又是类数组呢?类数组(array-like):白话的解释就是一个像数组的东西,比如他拥有数组的一些特性,比如说length,比如可以通过index索引来访问,但是它却没有数组的一些方法,比如forEach、map等。二、演示function foo() { console.log(arguments);// Argu原创 2022-05-21 21:53:53 · 412 阅读 · 0 评论 -
JavaScript进阶讲解四—>this的指向二
本节我们继续讲js中this的绑定问题一、系统API中的thissetTimeout(function() { console.log(this); // window}, 100);[1,2].forEach(function(item) { console.log(this); // window});[1,2].forEach(function(item) { console.log(this); // a}, 'a');[1,2].map(function(原创 2022-05-21 00:56:59 · 253 阅读 · 0 评论 -
JavaScript进阶讲解三—>this的指向一
上一节我们讲了闭包的原理及形成,希望大家可以多去理解一下。本节我们开始讲js中this的指向问题一、结论与规则与优先级排序结论函数在调用时,JavaScript会默认给this绑定一个值。this的绑定和定义的位置(编写的位置)没有关系。this的绑定和调用方式以及调用的位置有关系。this是在运行时被绑定的。规则默认绑定。隐式绑定。显示绑定。new绑定。优先级排序.隐式绑定高于默认绑定(默认绑定最低)显示绑定优先级高于隐式绑定new绑定优先级高于隐式绑定new绑原创 2022-05-19 23:32:59 · 152 阅读 · 0 评论 -
JavaScript进阶讲解二—>闭包
上一节我们讲了作用域大家需要记住一句话:函数的作用域与他定义的位置有关,与调用位置无关。今天让我们来学习闭包吧一、JS的内存管理JS对于基本数据类型内存的分配,会在执行时,直接在栈空间进行分配。JS对于复杂数据类型内存的分配,会在堆内存中开辟一块空间,并且将这块空间的指针返回值变量引用;二、JS的垃圾回收(Garbage Collection->GC)js中时有垃圾回收机制的(当然像c和c++就没得,这里不多赘述),因为内存的大小是有限的,当内存不再需要的时候,我们就需要对其进行原创 2022-05-19 00:41:18 · 166 阅读 · 0 评论 -
JavaScript进阶讲解一作用域
JavaScript进阶讲解一接下来,我会给大家讲解js中让人让人迷惑的知识点,比如: 作用域、函数、闭包、面向对象、ES新特性、事件循环、微任务、宏任务、内存管理、Promise、await、asnyc、防抖、节流等等。一、浏览器的内核1.常见的浏览器内核Gecko:早期被Netscape和Mozilla Firefox浏览器浏览器使用。Trident:微软开发,被IE4~IE11浏览器使用。Webkit:苹果基于KHTML开发、开源的,用于Safari,Google Chrome之前也在原创 2022-05-18 17:27:14 · 104 阅读 · 0 评论 -
VUE将虚拟DOM渲染成真实DOM-----渲染器
我们知道我们的虚拟DOM是通过render函数渲染成真实DOM的,但是render函数又是怎么实现的呢?他的原理是什么呢?接下来我们一起来看看渲染器的实现原理。一、最简单的rander函数function Render(obj, root) { const el = document.createElement(obj.tag) if (typeof obj.children === 'string') { const text = document.creat原创 2022-04-01 16:55:37 · 3417 阅读 · 1 评论