深入理解Javascript
文章平均质量分 92
深入理解Javascript,让你从入门到精通,也是NodeJS的前置教程。
梦想画家
开源软件爱好者,乐于博客分享,业余时间喜欢跑步和科幻,希望与意趣相投朋友一起学习交流。
展开
-
JavaScript this 关键字
JavaScript this 关键字本文一起学习下JavaScript中this关键字。this关键字在JavaScript与java有一些差异,不仅仅只对象本身。1. 引入问题首先请看下面一段代码,其中 _this = this 我们经常看到,为什么需要这句,看完本文你应该能找到答案。$("#btn").click(function(){ var _this = this; ...原创 2020-01-31 17:31:57 · 312 阅读 · 0 评论 -
详解CSS属性选择器
详解CSS属性选择器CSS属性选择器是根据标签属性或属性值选择元素的方式。1. [attribute] 选择器最简单属性选择器是根据特定属性选择元素。下面示例选择带有title属性的所有元素:[title] { color: blue;}也可以限制选择特定的html元素,即把属性选择器放在元素后面。下面示例abbr[title]仅匹配标签:abbr[title] { ...原创 2020-01-31 16:20:45 · 899 阅读 · 0 评论 -
JavaScript函数参数缺省值
JavaScript函数参数缺省值本文介绍Es6中如何处理函数的缺省参数。1. 实参与形参(Argument vs. Parameter)通常我们不区分实参与形参(Argument vs. Parameter),形参(Parameter)是函数定义时声明的参数,而实参(Argument)是调用函数时传入的参数。请看下面add()函数:function add(x,y) { retu...原创 2020-01-29 17:33:40 · 8275 阅读 · 0 评论 -
JavaScript && 及 || 操作
JavaScript && 及 || 操作和类C语言一样,JavaScript定义 && 及 || 分别表示逻辑与、或操作。使用true和false两个布尔值可生成下列真值表:// Logical AND operationtrue && true; // truetrue && false; // falsefals...原创 2020-01-29 14:57:26 · 506 阅读 · 0 评论 -
详解ES6 模块化
详解ES6 模块化本文我们学习ES6模块化,如何从模块中导出变量、函数、类并在其他模块中重用。ES6 模块即为在严格模式下执行的JavaScript文件。意味着模块中声明的变量和函数不会自动增加至全局作用域中。1. 浏览器中执行模块首先创建新文件message.js并增加下列代码:export let message = 'ES6 Modules';在es6中message.js是一...原创 2020-01-21 12:37:45 · 8574 阅读 · 5 评论 -
ES6 中三种方式定义对象属性
ES6 中三种方式定义对象属性重复样本代码让开发者很不爽,代码混乱掩盖了重要业务代码。ES6关注并解决一些重复的代码方式,使代码简洁、逻辑清晰,如数组解构、对象解构、箭头函数等。本文我们主要介绍利用三种方式在初始化对象时定义属性。1. 属性简写属性简写即删除重复表达。这里定义两个变量:const name = "Luke"; const age = 24; 现在把这两个变量赋值给...原创 2019-12-28 16:57:15 · 3617 阅读 · 0 评论 -
TypeScript中数组和元祖
TypeScript中数组和元祖本文我们讨论下TypeScript中数组和元祖,讨论两者之间的区别以及应用场合。1. 数组在TypeScript中数组可以存储元素集合,可以同一类型或不同类型。可以通过两种方式定义数组:type MyArray = string[];这里定义了单一数据类型。下面定义包括多种类型数组:type MyArray = Array<string | nu...原创 2019-11-30 22:14:39 · 5544 阅读 · 1 评论 -
TypeScript中类与接口
TypeScript中类与接口自ES6开始,JavaScript中已经有了类,TypeScript中类存在的时间甚至更长。然而TypeScript中也有接口的概念,在代码中添加类型声明时,经常会出现这样的问题:对于这种类型声明是使用接口还是使用类?本文聚集TypeScript中接口和类概念比较,这样我们能很好地回答这个问题。1.从示例开始为了理解本文,下面先给一个示例:fetch(...原创 2019-11-30 21:08:12 · 692 阅读 · 0 评论 -
Javascript 垃圾回收
Javascript 垃圾回收 内存管理Javascript是自动完成的,对用户来说是透明的。我们创建原始类型、对象、函数等,所有这些都需要占用内存。当一些对象不再被需要时,Javascript引擎是如何发现并清除?能达性(Reachability)Javascript内存管理主要概念是能达性。简单说,“能达”是那些可被访问或使用值,他们需保证存储在内存中。 1、继承可达值,他们显然不能被删原创 2017-03-30 09:28:19 · 668 阅读 · 0 评论 -
Javascript中var和let间差异
Javascript中var和let间差异 Javascript申明变量的方式有let、var、const三种不同方式。let和const行为在词法环境中相同,但是var差异很大,var在早起被引入,现代Javascript一般不使用,但旧代码到处都是,本文详细说明,希望不让你迷惑。示例1 两者相同function sayHi() { var phrase = "Hello"; // lo原创 2017-03-30 10:30:10 · 6574 阅读 · 0 评论 -
详解Javascript对象
详解Javascript对象 在Javascript中有7种类型,其中6个为原始类型,因为他们的值仅包含单个内容(如字符串、数值或其他)。 反之对象通常存储包含不同类型的键集合,更加复杂。在Javascript中,对象几乎涉及方方面面,所有我们在深入使用前必须首先理解他们。定义对象使用{}创建,可以包含若干个属性。属性是“键:值”方式,其中键必须是字符串类型,即属性名称,值可以是任意类型原创 2017-04-03 22:53:44 · 711 阅读 · 0 评论 -
Javascript面向对象(一)——属性标志与描述
Javascript对象属性标志与属性描述 我们都知道,对象可以存储属性。属性一般都是简单的键值对,但一个对象属性可以更复杂、优美。属性标志writable – 如果为 true, 属性可以改变,否则为只读。enumerable – 如果为 true, 属性可以在loop…in中被列出,否则不被列出。configurable – 如果为 true, 属性可以被删除或修改,否则不行。这些翻译 2017-04-04 11:09:58 · 991 阅读 · 0 评论 -
javascript 构造函数和new操作符
javascript 构造函数和new操作符 {…}语法允许创建一个对象,但如果需要创建多个类似的对象,则我们需要使用构造函数和“new”操作符。构造函数构造函数技术上就是正常的函数,但一般有两个约定: 1、他们的名称第一个字母大写。 2、他们应该仅仅使用new操作符执行。示例:function User(name) { this.name = name; this.isAdmin翻译 2017-04-08 17:20:59 · 806 阅读 · 0 评论 -
Javascript面向对象(二)——setter、getter属性
setter、getter属性 Javascript对象有两种属性,一种是数据属性,我们经常使用比较熟悉;第二种是访问器属性,本质就是获取和设置值的函数,但从代码上好像是正常属性。Getters 和 setters访问器属性通过”getter”和”setter”方法表示,在对象中使用get和set文字标识。let obj = { get propName() { // getter翻译 2017-04-15 20:27:10 · 2926 阅读 · 0 评论 -
Javascript面向对象(三)——原型继承
原型继承 实际编程中,我们经常需要一些东西并扩展之。例如,我们有user对象,带有属性和方法,现在想要admin和guest,和其稍微有些变化,我们最好重用user对象,但不是复制/重新实现它的方法,而是在其基础上构建。原型继承是Javascript重要特性,可以实现之。[[Prototype]] 在Javascript中,对象有个特殊的隐藏属性[[Prototype]](规范中的名称),其翻译 2017-04-15 22:18:45 · 1098 阅读 · 0 评论 -
Javascript面向对象(四)——函数原型
javascript函数原型 现代javascript中,我们可以通过使用__proto__设置原型,但这不总是这样。javascript从一开始就有原型继承,它是javascript语言的核心特性。在过去,有其他方式设置原型:设置构造函数的”prototype”属性,现在仍然有很多脚本使用。“prototype”属性我们已经知道,new F()创建一个对象,但我们没有使用F.prototyp翻译 2017-04-16 20:26:53 · 752 阅读 · 0 评论 -
Javascript面向对象(五)——内置原型
内置原型 “prototype”属性在javascript内核中也应用广泛,所有的内置构造函数都用。我们首先看看简单的对象如何使用,然后进一步说明复杂对象。Object.prototype我们看看空对象输出什么?let obj = {};alert( obj ); // "[object Object]" ?代码生成的字符串 “[object Object]” 从哪来的,这是内置toStr翻译 2017-04-17 08:29:09 · 644 阅读 · 0 评论 -
Javascript面向对象(六)——方法原型
Javascript面向对象(六)————方法原型 本节我们主要说明额外的方法使用原型。除了我们已经知道的方式,也有其他的方式get/set原型。Object.create(proto[, descriptors])– 使用给定的原型和可选的属性描述符创建一个空对象。Object.getPrototypeOf(obj)– 返回对象原型[[Prototype]].Object.setPro翻译 2017-04-23 14:49:09 · 589 阅读 · 0 评论 -
Javascript面向对象(七)——类模式
Javascript面向对象之七——类模式 在面向对象编程里,类是一个为创建对象的可扩展编程代码模板。提供了状态的初始值(成员变量),实现行为(成员函数或方法)。——维基百科在Javascript中有特定语法结构以及关键字class,但学习之前,我们应该考虑术语“类”是面向对象编程理论。其定义是引用上面内容,且和语言无关。即使不用class关键字,在Javascript也有几种众所周知的类编程翻译 2017-04-23 22:10:40 · 666 阅读 · 0 评论 -
Javascript面向对象(八)——Class
Javascript面向对象(八)——Class 类结构允许使用简洁、漂亮的方式定义基于原型的类模式。class语法类的语法有多种形式,我们从简单的开始。 这里是基于原型的类User:function User(name) { this.name = name;}User.prototype.sayHi = function() { alert(this.name);}let u翻译 2017-04-24 08:08:42 · 667 阅读 · 0 评论 -
Javascript面向对象(九)——类继承
Javascript面向对象(九)——类继承 类可以继承另一个类。有漂亮的语法,技术上基于原型继承。为了从另一个类继承,我们应该指定“extends”关键字,并且把父类写在括号{...}之前。下面示例代码中Rabbit类继承自Animal类:class Animal { constructor(name) { this.speed = 0; this.name = name;翻译 2017-05-07 21:52:18 · 791 阅读 · 0 评论 -
Javascript 代码注释规范
javascript 代码注释规范 注释一般来说是好事情,但新手编程经常犯错误。他们写注释解释“代码是什么”,但这样解释性注释应该越少越好。 严肃地说,好的代码应该容易理解无需注释。有个极好规则:如果代码不清楚需要注释,那么也许可以重构代码。有时最好使用函数代替一些代码片段,如下:function showPrimes(n) { nextPrime: for (let i = 2翻译 2017-05-10 12:17:07 · 7453 阅读 · 0 评论 -
Javascript代码风格
代码风格 代码必须清晰且尽可能易读。 编程确实为一门艺术——完成一项复杂的任务,以一定方式组织代码实现,既要正确也要易读。 好的代码风格是非常有必要的。语法代码风格规则图示:现在让我们讨论上图中的规则和原因。 没有什么是不能变的,上述内容都是可选的且能改变:因为这是代码风格,不是宗教教条。大括号大多数javascript项目大括号写在同一行,不是新的一行,一般称为”埃及“风格,在翻译 2017-05-13 10:50:27 · 707 阅读 · 0 评论 -
Javascript面向对象(十)——类检测instanceof
Javascript面向对象(十)——类监测instanceof instanceof操作符允许监测一个对象是否属于特定的类,也考虑了继承。 很多场景需要监测,这里我们用其构建一个多态函数,处理不同参数取决他们类型。instanceof 操作符语法为: obj instanceof Class如果obj属性class(或从它继承的列)返回true,举例: class翻译 2017-05-14 18:29:28 · 698 阅读 · 0 评论 -
Javascript数组
Javascript数组 对象允许存储键值集合,这非常好,但通常我们需要有序集合,通过它可以获得第一、第二、第三元素等。举例,我们需要存储一些列表:用户、货物以及HTML元素等。 这里使用对象则不方便,因为没有提供方法管理元素顺序。我们不能在已存在元素之间插入新的元素。对象不适合这样使用。 Javascript提供了一个特殊的Array数据结构,可以存储顺序集合。申明数组有两种语法翻译 2017-05-18 22:21:53 · 532 阅读 · 0 评论 -
Javascript数组方法
Javascript数组方法 数据提供了很多方法。为了简化,本节进行分组阐述。增加/删除元素从上节中已经知道的在数组开头或结尾的增加/删除方法。arr.push(...items) – 在结尾增加元素,arr.pop() – 从结尾抽取元素,arr.shift() – 从开头抽取元素,arr.unshift(...items) – 在开头增加元素.这里还有几个其他方法。splice如翻译 2017-05-20 07:46:44 · 781 阅读 · 0 评论 -
Javascript回调(一):简述
Javascript回调(一):简述Javascript中大多数操作都为异步执行。举例,看看loadScript(src):function loadScript(src) { let script = document.createElement('script'); script.src = src; document.head.append(script);}该函数的目的是加载翻译 2017-06-10 20:30:35 · 870 阅读 · 0 评论 -
彻底理解Javascript闭包
彻底理解Javascript闭包 Javascript是面向函数编程语言,非常灵活。定义函数,赋值给变量,或作为参数传递给其他函数,最后在完全不同的地方调用。 我们知道函数可以访问外部变量,该特性很常用,但当外部变量变化时,函数获得的是当前最新值还是函数创建时存在的值?另外,当函数被传至其他地方并执行会怎么,在新的地方访问外部会怎么?几个问题让我们提出两个问题作为引子,然后一步一步研讨内翻译 2017-06-20 00:04:54 · 709 阅读 · 0 评论 -
Javascript 调度: setTimeout and setInterval
Javascript 调度: setTimeout and setInterval我们可能决定不立刻执行一个函数,而是某时间之后执行,一般我们称为“调度执行”。 有两种方法可以实现:setTimeOut指某时间间隔之后执行一次函数。setInterval指安装一定时间间隔有规律执行函数。这些函数不是Javascript规范的一部分,但是大多数环境有内部调度并提供了这些方法。特别是,所有浏览器翻译 2017-06-28 14:41:08 · 2769 阅读 · 0 评论 -
Javascript 箭头函数
Javascript 箭头函数Javascript箭头函数不仅是“速写”代码的小事情。通常场景为我们需要写一个小函数,然后在其他地方执行。举例:arr.forEach(func) – func 需要针对数组的每个元素执行.setTimeout(func) – func 在内置的调度计划中执行.…等.创建一个函数并将它传递到某个地方是JavaScript的风格。 并且有些函数,我们通常希望保留当翻译 2017-06-28 21:57:17 · 1391 阅读 · 0 评论 -
Javascript装饰器与转发, call/apply
Javascript装饰器与转发, call/apply Javascript在处理函数上提供了非常的灵活性,它们可以被传递,作为对象使用,现在我们看看如何在他们之间如何转发调用和装饰。透明式缓存假设我们有个函数为slow(x),比较占用CPU资源,但结果是稳定的,换句话说,对相同的x返回总是相同。如果该函数经常被调用,我们可能想到缓存(记住)针对不同x的结果,避免浪费额外的时间重新计算。但我翻译 2017-07-05 21:37:05 · 878 阅读 · 0 评论 -
Javascript函数绑定
Javascript函数绑定 当我们在setTimeout函数中使用对象方法或传递对象方法,会出现丢失 this 的问题。 this突然停止工作,这个场景对新手来说很常见,即使有经验的开发这也会遇到。失去this我们已经知道在Javascript中很容易丢失this,一旦一个方法被传递值和对象分离的地方时,this丢失。 这里看看在setTimeout中是如何发生的:let use翻译 2017-07-22 19:44:16 · 549 阅读 · 0 评论 -
Javascript偏函数与柯里化
Javascript偏函数与柯里化 到目前位置我们仅讨论绑定this,现在让我们更深入学习。 我们不仅能绑定this,也可以是参数,这较少使用,但有时很方便。bind完整的语法为:let bound = func.bind(context, arg1, arg2, ...);可以绑定上下文this和函数的初始参数。举例,我们有个乘法函数mul(a,b):function mul(a,翻译 2017-07-23 19:57:06 · 5995 阅读 · 0 评论 -
Javascript错误处理——try...catch
Javascript错误处理——try…catch 无论我们编程多么精通,脚本错误怎是难免。可能是我们的错误造成,或异常输入,错误的服务器端响应以及无数个其他原因。 通常,当发送错误时脚本会立刻停止,打印至控制台。 但try...catch语法结构可以捕获错误并可以做更多的事情,而不是直接停止。“try…catch” 语法try...catch结构有两个语句块,即try,然翻译 2017-07-29 21:22:20 · 12236 阅读 · 0 评论 -
Javascript自定义错误,继承Error
Javascript自定义错误,继承Error 在开发过程中,经常需要我们自己的错误类,用于描述任务中可能发生错误的特别内容。如网络操作错误,可能需要HttpError,数据库操作错误DbError以及搜索操作错误NotFoundError等等。 我们的错误应该支持基本的错误属性,如:message,name以及更详细的stack,也可能有其他属性,如HttpError对象可能有sta翻译 2017-07-30 10:02:36 · 11220 阅读 · 0 评论