JavaScript
蛙哇
这个作者很懒,什么都没留下…
展开
-
我如何搞懂Javascript系列之原型和原型链
理解原型JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链。构造函数创建对象JavaScript 中使用 new 操作符,通过构造函数初始化新对象。我们先使用构造函数创建一个对象。function Ninja() { this.swung = true;}const ninja = new Ninja()console.lo原创 2020-05-13 23:28:18 · 521 阅读 · 0 评论 -
深入Js之我是如何搞懂作用域和闭包的
写在前面本文将深入剖析 JavaScript 里面的作用域和闭包概念,阅读完本文,你不仅能学好作用域和闭包,同时也能自如地应对面试官有关的相关问题。作用域编译原理对作用域的定义:作用域是指声明的变量在程序中的一个区域,在其中对变量的使用都指向这个声明。如果仅通过阅读程序就可以确定一个变量的作用域,那么语言使用的是词法作用域,否则,这个语言使用的是动态作用域。作用域用一句话概括就是规定...原创 2020-04-16 15:43:23 · 215 阅读 · 0 评论 -
深入理解浏览器存储
前言随着Web应用程序出现以来,人们对与能够直接在客户端上存储信息能力的要求始终没有停止过。应用开发人员在找各种方式将数据存储在客户端上。从刚开始的Cookie存储方案,到现在的Web Storage和indexedDB,本文将主要介绍这三种浏览器存储方式优缺点。Cookie1、Cookie是什么?HTTP Cookie,通常直接叫做cookie,起初是在客户端用于存储会话信息的。该标准要...原创 2019-12-28 18:56:03 · 220 阅读 · 0 评论 -
JS异步编程方案总结
前言Javcscript是单线程机制,单线程模型指的是,JavaScript只在一个线程上运行。也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。JavaScript 之所以采用单线程,而不是多线程,原因是不想让浏览器变得太复杂,因为多线程需要共享资源、且有可能修改彼此的运行结果,对于一种网页脚本语言来说,这就太复杂了。异步编程解决了什么问题?单线程的好处是...原创 2019-12-19 22:43:14 · 119 阅读 · 0 评论 -
Javascript浅拷贝和深拷贝
前言浅拷贝和深拷贝在前端开发中是非常重要的知识点,有时候面试官也非常喜欢问到这点,相信很多人只是听过这两个词,不明白他们的意思和涵义,这里将会浅显的讲解浅拷贝和深拷贝。总结学习的同时,希望大家也会有点收获。Javascript的两种变量类型1、JavaScript变量的类型分为两种: 基本类型和引用类型。基本类型是指简单的数据段,有5种类型: Undefined、Null、Boolean...原创 2019-12-10 00:04:27 · 127 阅读 · 0 评论 -
深入理解this绑定原理
前言前段时间,看了《你不知道的JavaScript》中this的全面解析,讲的特别好,还没看过的小伙伴抓紧去学习,在这边特意整理总结了一波,一起分享学习。在这之前可以先理解一下关于this、call、applay和bind这篇文章。调用栈在了解this绑定原理之前,首页要先了解JavaScript的执行栈。(执行栈也叫做调用栈)如果对调用栈还不了解,可以先详细了解深入浅出JavaScript...原创 2019-12-08 14:55:14 · 188 阅读 · 0 评论 -
函数节流和防抖
前言浏览器中某些计算和处理要比其他的昂贵很多。例如DOM操作比DOM交互需要更多的时间和cpu时间,为了提升性能,减少DOM操作,于是,函数节流防抖和应运而生,其函数节流的基本思想是指,某些代码不可以在没有间断的情况下连续重复执行。函数防抖的基本思想是指,一个频繁触发的事情只让最后一次执行。下面就让我们来认真了解下这经常使用的函数节流和防抖。函数节流函数节流:一个函数执行一次后,只有大于设定...原创 2019-12-08 13:11:52 · 124 阅读 · 0 评论 -
Js数组遍历方法总结
前言ES5和ES6都新增了很多对数组遍历的方法,本文主要介绍forEach、map、filter、some、every、reduce / reduceRight、find/findIndex方法,它们可以让我们更方便的编写代码,抛弃for循环。而这些方法有个共同的特点都是不改变原有的数组。forEachforEach是最基本的方法,它的作用是对数组的每个元素执行一次提供的函数。functi...原创 2019-11-22 22:15:54 · 564 阅读 · 0 评论 -
深入浅出JavaScript执行上下文和执行栈
前言深入了解事物的背后原理,是进阶过程中必须要做和非常重要且值得花时间的事情。作为前端开发来说,JavaScript不言而喻是必备技能了,我想作为一个合格前端来说知道JavaScript程序的内部执行机制也是必须的,而执行上下文和执行栈是其中的关键概念之一,也是难点之一。理解它们同样有助于我们对事件循环机制、闭包、作用域等概念的理解。执行栈(Execution Stack)JavaScrip...原创 2019-11-22 20:58:58 · 193 阅读 · 0 评论 -
JS定时器机制详解
前言JavaScript 提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。在了解定时器前,你首页也要对事件循环机制有一定的了解。可以先阅读这篇文章Js事件循环(Event Loop)机制。基本概念什么是定时器?定时器是一种异步任务,通常浏览器都有一个独立的定时器模块,定时器的延迟时间就...原创 2019-11-19 00:58:25 · 1323 阅读 · 0 评论 -
一文搞定闭包原理
前言闭包是JS中重要的内容,对大多数人来说都会觉的闭包本身很好理解,不就是一个函数嵌套一个函数吗?但是再深入解释时,好像不知道要说些啥。不用担心,相信看完这篇你对闭包的理解就不仅仅只停留在概念层面上了。基本概念1、闭包是什么?官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。通俗的解释是:闭包就是能够读取其他函数内部变...原创 2019-11-16 08:14:04 · 261 阅读 · 0 评论 -
Js事件循环(Event Loop)机制
前言Event Loop是计算机系统的一种运行机制,是个很重要的概念。而Javascript用这种机制来解决单线程运行带来的问题。理解很熟悉将会有利于我们更容易理解Vue的异步事件。JavaScript是单线程的1、什么是单线程?单线程在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行。简单来说,即同一时间只能做一件事件。2、Js为什么是单线程?Js是一种...原创 2019-11-12 23:15:24 · 169 阅读 · 0 评论 -
5种常见函数的写法和调用方式
前言函数在开发中随处可见,经常在开发中我们声明函数就使用了一两种就已经足够了,但是,对我这有梦想的码农来说,这显然是不够的,因此,总结整理了5中常见的声明方式和调用方式。1、函数声明(最常规写法)// 常规函数写法function bar() { console.log('我调用了函数');}// 调用函数bar();2、函数表达式(匿名函数写法)// 匿名函数写法...原创 2019-11-08 19:40:52 · 7931 阅读 · 0 评论 -
关于let、var和const
前言let和const命令是ES6新增的命令,用来声明变量,这两个变量跟ES5中的var有许多不同,同时let和const也有不一样的地方。并且在ES6中也添加了块级作用域来解决ES5中作用域存在的问题。作用域官方解释是:“一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。”举个例子来形象的解析下上面的定义:function fn ()...原创 2019-11-07 19:40:30 · 141 阅读 · 0 评论 -
关于箭头函数和普通函数
前言箭头函数是ES6中新增的特性,因其在语言上的简洁性,相信很多人都非常喜欢使用它。对于初学者来说,对于箭头函数的熟练使用与深刻理解需要一个过程。本文总结一下普通函数与箭头函数的区别,希望能够使这一过程加速。基本语法ES6允许使用“箭头”(=>)定义函数。具体的定义,可以看下面的例子。var f = v => v// 等同于var f = function (v) { ...原创 2019-11-07 19:39:50 · 405 阅读 · 0 评论 -
一文搞懂原型和原型链
前瞻JavaScript是面对对象编程,但是它又跟其他编程语言不一样,不同之处是JavaScript面对对象并不是依赖于抽象类,而是通过原型链。在C++和Java使用new命令时,都会调用"类"的构造函数。而在Javascript语言中,new命令后面跟的不是类,而是构造函数。但是,用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。为了解决这个问题,于是在构造函数设置了prototy...原创 2019-11-04 23:21:56 · 303 阅读 · 0 评论 -
JS中继承关系的应用
前言面向对象编程很重要的一个方面,就是对象的继承。A对象通过继承B对象,就能直接拥有B对象的所有属性和方法。这对于代码的复用是非常有用的。传统上,JavaScript语言的继承不通过class,需要使用原型机制或者用applay和call方法实现。ES6引入了class语法,则出现了基于class的继承。继承解决了什么?为什么要使用继承?继承解决了什么问题?这里就不卖关子了,直接给出答案。继...原创 2019-11-02 00:49:44 · 476 阅读 · 0 评论 -
关于JS中正则表达式
前言对于前端开发来说,正则表达式是我们避不开的且需要重点掌握的技能,作为一门用途很广,但是又常常让人望而生畏的技术。花时间去深入理解并且融合贯通是值得。基本概念什么是正则表达式?正则表达式是一种表达文本模式(即字符串结构)的方法,有点像字符串的模板,常常用来匹配文本。通过特殊字符+普通字符来进行模式描述,从而达到文本匹配目的工具。声明方式新建正则表达式有两种方法并且以斜杠表示开始和结束。...原创 2019-11-02 00:49:12 · 172 阅读 · 0 评论 -
关于new命令
前言JS中有一种说法,叫做一切皆为对象。对象是什么呢?大话来讲,对象是一种容器,里面封装了属性和方法。在每天编程中,最基本的事情也是频繁的干的事情就是创建一个对象,然后使用它干各种各样的事情。创建对象的方法有构造函数创建、语法糖创建、还有new命令创建。当然,本文的标题已经表明这次的主角是new关键字了。new的基本用法new命令的作用,就是执行构造函数,返回一个实例对象。ps:如果忘了使...原创 2019-10-30 23:29:18 · 436 阅读 · 0 评论 -
关于this、call、applay和bind
前言this关键字是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。而this可以动态切换,为JavaScript创造了巨大的灵活性的同时,也使得编程变得困难和模糊。有时,需要把this固定下来,避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法,来切换/固定this的指向。基本概念this可以用在构造函数之中,表示实例...原创 2019-10-29 21:21:17 · 239 阅读 · 0 评论 -
关于Flex布局
前言Flex 是 Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。Flex布局是如今布局的首选方案,本文将介绍flexbox 的基本属性,感受一下Flex的便捷之处。概念属性采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成...原创 2019-10-27 03:39:17 · 165 阅读 · 0 评论 -
浅谈HTTP缓存机制
前言HTTP缓存不管是在面试中,还是实际开发中都是重中之重。了解HTTP缓存不仅可以轻松自如应对面试,而且也是在实际开发中对性能优化不可或缺的手段。缓存分类浏览器第一次请求资源时,必须请求所有的资源,然后根据响应的header内容来决定,如何缓存资源。一般而言缓存可以分为强缓存和协商缓存两种。强缓存当客户端缓存所要请求的数据时。客户端直接从缓存数据获取数据。当客户端没有缓存所请求的数据时...原创 2019-10-24 20:11:11 · 100 阅读 · 0 评论