![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
你不知道的javaScript
文章平均质量分 90
javaScript作为一个前端开发必备的知识技能,本专栏将由浅入深带你从0精通javaScript
祯民
这个作者很懒,什么都没留下…
展开
-
全面剖析javascript原型
文章目录前言正文Prototypeprototype的尽头属性设置属性屏蔽“类”"类"函数构造函数js中模拟类的方式“构造函数”的真相原型继承对象关联创建关联关联关系是备用小结前言 javascript原型在javascript的继承机制上起到重要的作用,前几章我们也一直提到prototype,但没有说它到底是什么,这一章我们将围绕这个全面解析javascript中的继承魔法正文Prototype &nbs原创 2021-07-13 16:36:51 · 286 阅读 · 1 评论 -
深入理解javascript混合对象“类“(二)
文章目录前言正文显式混入隐式混入小结前言 上一章我们介绍了有关传统面向类的设计模式,实例化,多态,继承,我们了解到这些并没在js中得到应用,js有自己的方式来实现上面的内容,这一章我们将细致地展开js是怎么实现自己的混合对象“类“的正文 在继承或者实例化时,JavaScript 的对象机制并不会自动执行复制行为。简单来说,JavaScript 中只有对象,并不存原创 2021-07-09 11:01:01 · 110 阅读 · 1 评论 -
深入理解javascript混合对象“类”(一)
文章目录前言正文类“类”设计模式javascript中的类类的机制构造函数类的继承多态多重继承小结前言 javascript是一门面向对象语言,但是与传统面向对象语言不同,javascript原理上并没有类的说法,学习过传统面向对象语言的同学们可能知道,面向类的设计模式有三种:实例化(instantiation)、继承(inheritance)和(相对)多态(polymorphism)。但是这些设计模式无法对应到javascript的原创 2021-07-08 14:58:21 · 204 阅读 · 0 评论 -
深入javascript对象语法和应用场景(二)
文章目录前言正文复制对象不变性对象常量禁止扩展密封冻结存在性遍历小结前言 上一章我们介绍了javascript对象的一些基本用法,这一章我们将继续上一章的内容,讲一些关于javascript进阶的内容正文复制对象 这个就是一个老生常谈的问题了,javascript对象的复制场景分为浅拷贝和深拷贝。浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用(地址),深拷贝原创 2021-07-07 11:12:37 · 126 阅读 · 0 评论 -
深入javascript对象语法及应用场景(一)
文章目录前言正文语法类型内置对象可计算属性名数组小结前言 对象是javascript中的一个重要的概念,甚至有“JavaScript 中万物皆是对象”的说法,可以说对于熟悉javascript而言,精通对象的应用场景至关重要,那么到底什么是对象,对象在哪些地方又有怎样的用途呢,这一系列我将带大家深入javascript对象的语法及应用场景正文语法 对象可以通过原创 2021-07-06 17:43:17 · 173 阅读 · 1 评论 -
深度解析javascript中的this(三)
文章目录前言正文优先级从bind源码看为什么new绑定优先级更高new绑定和显式绑定在函数柯里化的应用小结前言 上一章我们说到,this绑定的四种规则,默认绑定,隐式绑定,显式绑定和new绑定,并且我们抛出了一个问题,如果当这几个绑定一起使用的时候,优先级又是怎样的,这一章我们将就这个问题进一步展开解释正文优先级 毫无疑问,默认绑定的优先级是四条规则中最低的,原创 2021-06-30 13:36:18 · 129 阅读 · 0 评论 -
深度解析javascript中的this(二)
文章目录前言正文调用位置绑定规则默认绑定隐式绑定隐式丢失显式绑定硬绑定API调用的“上下文”new绑定小结前言 上篇文章我们初步了解了有关this的知识,在不考虑箭头函数的情况下,this指向函数的调用者,这一章我们将进一步学习了解this正文调用位置 在理解 this 的绑定过程之前,首先要理解调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置原创 2021-06-29 13:37:36 · 116 阅读 · 2 评论 -
深度解析javascript中的this(一)
文章目录前言正文为什么需要使用this对this的错误认知指向函数自身指向函数的作用域this指向函数调用者小结前言 this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域中。我记得自己从开始学习javascript开始就开始不停地被人问到关于this的知识,自己也从来不敢保证自己回答的是对的。毫无疑问,在缺乏清晰认识的情况下,this 对开发者来说完全就是一种魔法,这系列文原创 2021-06-28 10:45:10 · 106 阅读 · 0 评论 -
一篇文章帮你真正理解javascsript作用域闭包
文章目录前言正文javascript闭包无处不在闭包的实质闭包的真正意义循环和闭包模块小结前言 关于javascript闭包其实已经是老生常谈了,我很久以前也写过有关闭包的文章,前段时间面试字节跳动的时候,面试官笑着和我说,闭包的内容可以再看看,以前我对闭包的认识和理解也是狭隘的,闭包是这门语言中极其难以掌握又非常重要的概念,这一篇文章的意义旨在帮大家真正理解javascript闭包正文javascript闭包无处不在 原创 2021-06-25 15:46:29 · 124 阅读 · 2 评论 -
深入理解javascript变量提升机制
文章目录前言正文变量提升变量提升的作用域函数优先小结前言 经过前几章的学习,相信大家已经很熟悉作用域的概念了,前几章我们介绍了关于函数作用域的相关概念,这一章我们将进一步来学习javascript编译执行过程中的特殊机制,变量提升机制正文变量提升 包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。当你看到 var a = 2; 时,可能会认为这是原创 2021-06-24 13:51:34 · 130 阅读 · 0 评论 -
深入理解javascript块作用域
文章目录前言正文块作用域withtry/catchlet/const块作用域的作用垃圾收集let循环小结前言 上一章我们介绍到,javascript中的作用域就像一个个小“气泡”,而函数作用域就是其中的一种产生方式,每声明一个函数都会为其自身创建一个气泡,属于这个函数的全部变量都可以在整个函数的范围内使用及复用,这一章我们将介绍javascript作用域的另一种小“气泡”,块作用域正文块作用域原创 2021-06-23 15:42:56 · 232 阅读 · 2 评论 -
深入理解javascript函数作用域
文章目录前言正文函数作用域隐藏内部实现前言 上一章我们介绍了有关javascript词法作用域的相关知识,之前我们是概述地把作用域描绘成一个个小“气泡”, 但是并没有过多解释“气泡”的形成,究竟哪些情况下会形成上述的“气泡”呢,这一章我们将就这个问题详细展开正文函数作用域 JavaScript 具有基于函数的作用域,意味着每声明一个函数都会为其自身创建一个气泡原创 2021-06-22 22:10:52 · 101 阅读 · 3 评论 -
一篇文章带你彻底理解javascript词法作用域
文章目录前言正文词法阶段词法作用域的查找欺骗词法evalwitheval和with在性能上的损耗小结前言 上篇文章我们了解到“作用域”是一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。 作用域共有两种主要的工作模型。第一种是最为普遍的,被大多数编程语言所采用的词法作用域,我们会对这种作用域进行深入讨论。另外一种叫作动态原创 2021-06-21 13:40:26 · 140 阅读 · 0 评论 -
由LHS和RHS深入理解javascript引擎与作用域的交互
文章目录前言前言 几乎所有编程语言最基本的功能之一,就是能够储存变量当中的值,并且能在之后对这个值进行访问或修改。事实上,正是这种储存和访问变量的值的能力将状态带给了程序。一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量。这套规则被称为作用域。 对于javascript而言,与传统编译语言不同,我们常称它为“动态解释性“语言,因原创 2021-06-18 16:28:43 · 256 阅读 · 0 评论 -
你不知道的javascript设计模式(十七) ----编程设计原则和设计规则
文章目录前言正文单一职责原则最少知识原则开放-封闭原则代码重构提炼函数合并重复的条件片段把条件分支语句提炼成函数合理使用循环提前让函数退出代替嵌套条件分支传递对象参数代替过长的参数列表尽量减少参数数量少用三目运算符合理使用链式调用用 return 退出多重循环小结前言 同学们,我们学习设计模式已经很长的时间了,今天将会是我们设计模式系列的最后一章节,编程设计原则和设计规则。设计模式对于一个开发工程师而言是一个很原创 2021-04-12 10:44:36 · 130 阅读 · 2 评论 -
你不知道的javascript设计模式(十六)----状态模式
文章目录前言正文状态模式的定义状态模式的实现状态模式的优缺点小结前言 同学们,上一章我们介绍了装饰者模式,装饰者模式可以在不影响原类的情况下,给对象新增额外的功能,并且我们也尝试了使用AOP面向切面去拓展function的原型来实现装饰者模式。这一章,我们将进一步学习一种新的设计模式,状态模式。正文状态模式的定义允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎改变了它的类 &nb原创 2021-04-09 13:58:16 · 85 阅读 · 0 评论 -
你不知道的javascript设计模式(十五)----装饰者模式
文章目录前言正文装饰者模式的定义装饰者模式的实现基于javascript的装饰者模式实现用AOP装饰函数小结前言 同学们,上一章节我们介绍了中介者模式,中介者模式应用于对象关系复杂的场景,将所有对象之间的交互集中到中介对象处,来降低对象之间的耦合性,这一章节,我们将进一步学习一种新的设计模式,装饰者模式正文装饰者模式的定义原创 2021-04-08 11:32:51 · 157 阅读 · 4 评论 -
你不知道的javascript设计模式(十四) ----中介者模式
文章目录前言正文中介者模式的定义中介者模式的实现小结前言 不知不觉,我们学习设计模式已经很长的时间了,同学们有没有在代码设计上有一点自己的心得体会呢,上一章节我们介绍了职责链模式,职责链模式意义在于弱化发送者和接收者之间的关系,只要我们知道请求的节点,就可以将请求传下去,这一章我们将学习一章新的设计模式,中介者模式正文中介者模式的定义原创 2021-04-07 14:37:10 · 84 阅读 · 0 评论 -
你不知道的javascript设计模式(十三) ----职责链模式
文章目录前言正文职责链模式的定义职责链模式的实现基于AOP实现职责链模式小结前言 清明节三天假期过去了,一直没有更新,这里先祝大家清明节安好!上一章节我们介绍了享元模式,享元模式分离了对象的内部和外部状态,实现了对象的复用,从而去减少资源上的消耗。这一章我们将继续学习一种新的设计模式,职责链模式。正文职责链模式的定义使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这些对象连成一原创 2021-04-06 11:42:51 · 105 阅读 · 2 评论 -
你不知道的javascript设计模式(十二) ----享元模式
文章目录前言正文享元模式的定义内部状态与外部状态享元模式的实现对象池前言 同学们,上一章我们介绍了模板方法模式,这是一种基于继承的设计模式,通过设计抽象类可以避免类似类的重复定义,并且因为js的特殊原型克隆,我们也就js的实现方式进一步说明了模板方法模式,今天我们将进一步介绍一种新的设计模式,享元模式。正文享元模式的定义 &原创 2021-04-02 11:54:28 · 131 阅读 · 2 评论 -
你不知道的javascript设计模式(十一) ---- 模板方法模式
文章目录前言正文模板方法的定义模板方法的实现javascript中实现模板方法的注意事项javascript中模板方法的实现小结前言 同学们,上一章我们介绍了组合模式,组合模式是一种基于树状结构的设计模式,组合模式中的对象是满足一致性的,这样可以让用户不再需要去考虑对象的特殊性,从而达到一种一视同仁的效果。这一章我们将继续介绍一种新的设计模式,模板方法模式正文模板方法的定义 &nbs原创 2021-04-01 11:18:46 · 234 阅读 · 3 评论 -
你不知道的javascript设计模式(十) ---- 组合模式
文章目录前言正文由宏命令看组合模式组合模式的用途组合模式的实现适用组合模式的场景小结前言 同学们,上一章我们介绍了有关命令模式的知识,我们知道了命令模式拆分了命令和命令的执行,让发布者和执行者之间互不干涉,减少他们之间的耦合性,这一章我们将继续给大家一种新的设计模式,组合模式正文 宇宙中的很多东西都不仅仅是一个个体原创 2021-03-31 14:04:13 · 118 阅读 · 2 评论 -
你不知道的javascript设计模式(九) ---- 命令模式
文章目录前言正文什么是命令模式命令模式的实现javascript中的命令模式宏命令小结前言 上一章我们介绍了设计模式中的发布-订阅模式,通过分离发布者和订阅者之间的逻辑,来减少两者间的耦合性,以应用于异步等场景。今天我们要介绍的就是设计模式中的命令模式正文什么是命令模式 什么是命令模式呢?比如你去餐厅点菜,服务员原创 2021-03-30 16:20:25 · 112 阅读 · 0 评论 -
你不知道的javascript设计模式(八)---- 发布-订阅模式
文章目录前言正文发布-订阅模式的定义发布-订阅模式的实现前言 上一章我们介绍了一种简单但是常见的设计模式,迭代器模式,也自己实现了一遍迭代器对象,这一章节要介绍的内容相信大家或多或少都耳濡目染过,那就是发布-订阅模式正文发布-订阅模式的定义 发布-订阅模式又称观察者模式,它定义了对象间的一种一对多的依赖关系,当一原创 2021-03-29 11:58:17 · 210 阅读 · 4 评论 -
你不知道的javascript设计模式(七)---- 迭代器模式
文章目录前言正文迭代器模式的定义js的迭代器内部迭代器外部迭代器用js实现迭代器对象小结前言 这两天收到很多读者的回复评论,对我的鼓舞很大,大家可以从我的博客中提高就是对我最大的支持!言归正传,上一章我们谈到了策略模式,用于一些可以通过不同算法达到相同目的的场景,分离了算法本身和算法执行的部分,来保证设计模式的单一职责原则。这一章,我们将来学习关于迭代器模式的相关内容正文迭代器模式的定义迭代器模式是指提原创 2021-03-26 11:09:20 · 125 阅读 · 2 评论 -
你不知道的javascript设计模式(六)---- 策略模式
文章目录前言正文策略模式的定义实现策略模式javascript的策略模式策略模式的优劣势小结前言 上一章我们介绍了第一种设计模式单例模式,这一章我们将继续介绍一种新的设计模式,策略模式。在程序设计中,我们常常遇到这样的情况,实现同一个功能,但是可以使用不同的方法,这些算法灵活多样,可以互相交换使用,这就是本章要介绍的策略模式正文策略模式的定义定义一系列算法,把它们一个个封装起来,并且使它们可以相互替换原创 2021-03-25 13:55:19 · 120 阅读 · 3 评论 -
你不知道的javascript设计模式(五)----单例模式
文章目录前言正文单例模式的定义实现单例模式javascript中的单例模式惰性单例通用的惰性单例小结前言 前几章我们一直在为javascript设计模式的学习作一些准备,我们学习了原型编程,闭包,封装以及高阶函数等内容,从这一章节开始,我们将正式开始设计模式的学习,作为设计模式学习的第一章,我们将从最简单的设计模式,单例模式开始设计模式的相关学习正文单例模式的定义保证一个类有且只有一个实例,并提供一个访原创 2021-03-23 14:17:00 · 318 阅读 · 12 评论 -
你不知道的javascript设计模式(四)----高阶函数
文章目录前言正文高阶函数的定义函数作为函数参数传递函数作为函数返回值输出前言 这篇文章非常荣幸写了两遍,之前地铁上写完忘记保存,有点心酸。回归正题,前三章节我们分别介绍了js的原型模式以及闭包等知识,作为正式学习设计模式前知识准备的最后一章,这一章将给大家介绍相关高阶函数的知识,希望大家可以认真看完,因为对后面相关设计模式的设计与理解起到很大的作用正文高阶函数的定义 &n原创 2021-03-22 09:12:55 · 192 阅读 · 3 评论 -
你不知道的javascript设计模式(三)----闭包
文章目录前言正文封装变量函数作用域利用闭包封装工具函数延续局部变量的寿命小节前言 前面我们学习了javascript语言的多态,封装以及基于原型编程,在我们介入到设计模式的真正学习中,我们将进一步学习js中的闭包和高阶函数,因为这些在后面设计模式的实现中占到了很重要的作用,这一章我们将先学习闭包的相关知识正文 相信原创 2021-03-15 09:11:03 · 209 阅读 · 4 评论 -
你不知道的javascript设计模式(二)----基于原型编程的js(下)
文章目录前言正文封装封装数据封装实现封装类型封装变化基于原型编程的js原型模式原型模式的模糊类型性原型编程泛型小节前言 上一章节我们讲到,js的动态语言特性以及与生俱来的多态特性,多态特性的作用就是利用对象的多态性,尽可能消除函数设计过程中的条件分支语句。这一章我们将继续上一章的内容,进一步展开js开发中的封装以及js的原型编程设计原理正文封装 &原创 2021-03-12 10:29:16 · 208 阅读 · 3 评论 -
基于HTML5 Canvas实现炫酷钟表效果
文章目录前言正文分解步骤前言HTML5支持的canvas可以在Web中画各种相对复杂的图案,只要你愿意,前端不需要美工设计再提供任何切图!废话不多说,进入正题,本文将给大家介绍通过HTML5 Canvas实现炫酷钟表效果。正文分解步骤首先先到网上随便找一个钟表的图片当作本文的设计图。...原创 2020-11-06 09:58:01 · 1806 阅读 · 0 评论 -
你真的知道DOM吗(下)----(其他类型,DOM操作技术)
文章目录前言正文其他类型Text类型操作节点文本的方法创建文本节点规范化文本节点Comment类型DOM0级,DOM1级,DOM2级事件DocumentFragment类型Attr类型DOM操作技术动态脚本外部引入内部写入动态样式外部引入内部写入小结前言 DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的某一部分。可以说,DOM是前端开发中最重要的一个渲染API,它决定了页面原创 2020-09-29 17:24:17 · 165 阅读 · 0 评论 -
你真的知道DOM吗(中)----(Document类型, Element类型)
文章目录前言正文Document类型文档子节点文档信息查找元素文档写入Element类型HTML元素特性的相关方法document.getAttribute()document.setAttribute()前言DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的某一部分。可以说,DOM是前端开发中最重要的一个渲染API,它决定了页面的样式结构的走向。正文Document类型在浏览器中,document对象是HTMLDocu原创 2020-09-28 23:47:27 · 929 阅读 · 0 评论 -
你真的知道DOM吗?(上)----(节点层次,DOM集合,Node类型)
文章目录前言正文节点层次HTMLCollection和NodeListNode类型nodeName和nodeValue属性节点关系前言DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的某一部分。可以说,DOM是前端开发中最重要的一个渲染API,它决定了页面的样式结构的走向,这篇文章将带大家DOM接口中的节点类型部分正文节点层次DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构,总共有12种节点类型,这些类原创 2020-09-27 21:13:28 · 228 阅读 · 0 评论 -
都2020年了,你还不懂什么是闭包吗---深入理解闭包这一篇文章足以
文章目录前言正文什么是闭包?为什么要用闭包匿名函数与闭包的区别闭包中的变量问题内存泄露小结前言闭包(closure)是 JavasSript 的一大难点,也是它的特色。很多高级应用都要依靠闭包来实现。每个前端工程师都应该能够对闭包的原理烂熟于心,看完这篇文章,相信同学们对闭包一定会有更深的理解正文什么是闭包?闭包是指有权访问另一个函数作用域中的变量的函数,因为javaScript有一个特别之处,子对象只会一级一级向上查找搜索父对象的变量,也就是说子对象可以访问父对象的变量,但是父对象不可以访问子对原创 2020-09-21 15:50:32 · 189 阅读 · 0 评论 -
js对象的创建对象模式和继承模式(下)---继承模式
文章目录前言正文原型链前言上一章我们讲了js对象创建模式的方式,在ES5中,js中是没有类的概念的,js的继承是基于对象去实现的,这一章我将给各位同学介绍js对象的继承模式正文原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法function Fruit(){ this.name = name;}function Apple(){}Apple.prototype = new Fruit('ap原创 2020-09-21 11:26:01 · 106 阅读 · 0 评论 -
js对象的创建对象模式和继承模式(上)---构建对象模式
文章目录前言正文属性类型前言ECMAScript与其他面向对象语言不同的是,它没有类的概念,因此它的对象也和基于类的语言中的对象有所不同,深入理解js的对象是每个前端工程师的基本素养,本文将就创建对象模式的方面对对象进行介绍正文我们可以通过属性类型只有在内部才用的特性就称为属性,ECMAScript中有两种属性:数据属性和访问器属性...原创 2020-09-20 11:23:16 · 158 阅读 · 0 评论 -
学习Array类型看这一篇就够了(Array类型特点,Array原型方法,浏览器sort底层实现,深浅拷贝)
文章目录一、创建Array类型1.1 创建数组1.2 不限制类型1.3 数组length二、原型方法2.1 转换方法2.2 数据添加移除方法2.3 重排序方法除了Object之外,Array类型应该是ECMAScript中常用的类型,并且javaScript中的Array类型和其他语言中的数组非常的不同,具体javaScript中的Array类型,本文将由浅入深地从创建Array类型和原型方法两个大方向带大家彻底理解这个ECMAScript中的重要类型一、创建Array类型1.1 创建数组创建数组有原创 2020-09-11 15:16:22 · 421 阅读 · 0 评论 -
一篇文章带你搞定javaScript变量作用域和内存问题(变量,作用域,垃圾收集,管理内存)
相信学过javaScript的同学都了解,javaScript是一门弱类型语言,正是基于这个性质,javaScript中的变量只是在特定时间保存特定值的一个名字而已,由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变。这是一个有趣强大有风险的设定,下面将给大家就变量,作用域,垃圾收集,管理内存四个方向仔细谈谈javaScript的变量的相关知识。一、变量类型1.1变量类型这里我们提到的变量类型是根据数据结构去分类的,可以分为基本类型值和引用类型值基本原创 2020-09-09 21:31:22 · 303 阅读 · 2 评论 -
定一个小目标 每天一篇学习总结的优质博文
已经有快一个年头没有再写过博客了,之前迷茫,被否定过,连自己不认可自己,想了很久,不想再想那么多,我选定前端的方向,始终不渝地走下去,我渴望了解到,多年以后的自己,究竟可以走到多远,见到不一样的世界这里定个小目标每天一篇学习总结的优质博文,不求数量多,只希望真正认真总结一天的所学所悟,能给一起努力的你们一点帮助,希望可以在csdn见证我自己的成长吧,加油...原创 2020-09-09 14:35:03 · 153 阅读 · 2 评论