——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…

Less详解学习教程从入门到深入【万字长文，感谢支持】

Bootstrap学习教程从入门到深入【万字长文，感谢支持】

在面向对象开发时，如果你希望自己创建的类也具备可迭代的能力，那么，你可以在定义类的时候手动添加一个@@iterator方法，让其成为可迭代对象。代码举例：// 定义类// 定义一个名为 [Symbol.iterator] 的实例方法，封装迭代器} else {},const person1 = new Person('千古壹号', ['前端', '工程师']);const person2 = new Person('许嵩', ['想象之中', '有何不可']);

04_自定义构造函数模式--方式四: 自定义构造函数模式* 套路: 自定义构造函数, 通过new创建对象* 适用场景: 需要创建多个类型确定的对象* 问题: 每个对象都有相同的数据, 浪费内存-->//定义类型​​​​​​

面试问题：说一下对变量提升的理解说明this的几种不同的使用场景创建10个标签，点击的时候弹出来对应的序号如何理解作用域实际开发中闭包的应用涉及到的知识点：执行上下文this作用域作用域链闭包。

在 JavaScript 的编程中经常需要对数据进行复制，这就涉及到浅拷贝和深拷贝，是非常重要的概念。

基于上面的种种区别，我们可以知道：var 声明的变量，很容易造成全局污染。以后我们尽量使用 let 和 const 声明变量吧。

构造函数构造函数-扩展原型规则和示例原型链instanceof任何一个函数都可以被 new，new 了之后，就成了构造方法。如下： function Foo(name, age) {     this.name = name;     this.age = age;     //retrun this;   //默认有这一行。new一个构造函数，返回一个对象 } ​

分析如下：上方代码中，我们的sayName方法是写在构造函数 Person 内部的，然后在两个实例中进行了调用。造成的结果是，构造函数每执行一次，就会给每个实例创建一个新的 sayName 方法。也就是说，每个实例的sayName都是唯一的。因此，最后一行代码的打印结果为false。按照上面这种写法，假设创建10000个对象实例，就会创建10000个 sayName 方法。这种写法肯定是不合适的。我们为何不让所有的对象共享同一个方法呢？还有一种方式是，将sayName方法在全局作用域中定义：（不建议。原因看

JavaScript基础分为三个部分：ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。BOM：Browser Object Model，浏览器对象模型。window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。DOM越是BOM的一部分。

zepto是轻量级的JavaScript库，专门为移动端定制的框架。与jquery有着类似的API，俗称：会jquery就会用zepto。

宽度操作：  $(selector).height();     //不带参数表示获取高度  $(selector).height(200);  //带参数表示设置高度宽度操作：  $(selector).width();     //不带参数表示获取宽度  $(selector).width(200);  //带参数表示设置高宽度问题：jQuery的css()获取高度

推荐使用方法来创建元素或者html("")清空元素。

如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。注意：如果元素动画还没有执行完，此时调用stop()方法，那么动画将会停止。上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。解释：动画执行完后，立即执行回调函数。

所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。jQuery的入口函数，是在文档加载完成后，就执行。jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。函数，根据传入参数的不同，进行不同的调用，实现不同的功能。js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

方式一：匿名函数每间隔一秒，将 数字 加1：num ++;}, 1000);每间隔一秒，将 数字 加1：​num ++;​代码举例：// 3秒之后，再执行这段代码。}, 3000);​​代码举例：（箭头函数写法）// 3秒之后，再执行这段代码。}, 3000);

JavaScript基础分为三个部分：ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM：文档对象模型（Document object Model），操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM：浏览器对象模型（Browser Object Model），操作浏览器部分功能的API。比如让浏览器自动滚动。BOM可以让我们通过JS来操作浏览器。BOM中为我们提供了一些对象，来完成对浏览器相关的操作。常见的 BOM对象有：Wi

拖拽的流程：（1）：当鼠标在被拖拽元素上按下时，开始拖拽；（2）：当鼠标移动时被拖拽元素跟随鼠标移动；（3）：当鼠标松开时，被拖拽元素固定在当前位置。：鼠标滚轮滚动的事件，会在滚轮滚动时触发。但是火狐不支持该属性。：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。：按键被按下。：按键被松开。注意：如果一直按着某一个按键不松手，那么，事件会一直触发。此时，松开键盘，事件会执行一次。当连续触发时，第一次和第二次之间会间隔稍微长一点

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。比如说有一个列表 ul，列表之中有大量的列表项 标签：当我们的鼠标移到标签上的时候，需要获取此的相关信息并飘出悬浮窗以显示详细信息，或者当某个被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个都绑定类似onMouseOver或者onClick之类的事件监听：但是，上面的做法过于消耗内存和性能。我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后来添加的。因此，比较好的方

事件传播的三个阶段是：事件捕获、事件冒泡和目标。事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。如下图所示：PS：这个概念类似于 Android 里的 touch 事件传递。addEventListener可

我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。举例：点击按钮后，上方代码的打印结果：我们可以看到，的这种绑定事件的方式：一个元素的一个事件只能绑定一个响应函数。如果绑定了多个响应函数，则后者会覆盖前者。参数解释：参数1：事件名的字符串(注意，没有on)参数2：回调函数：当事件触发时，该函数会被执行参数3：true表示捕获阶段触发，false表示冒泡阶段触发（默认

元素调用时：clientWidth：获取元素的可见宽度（width + padding）。clientHeight：获取元素的可见高度（height + padding）。body/html 调用时：clientWidth：获取网页可视区域宽度。clientHeight：获取网页可视区域高度。声明： 和 属性是只读的，不可修改。 和 的值都是不带 px 的，返回的都是一个数字，可以直接进行计算。event调用：clientX：鼠标距离可视区域左侧距离。clientY：鼠标距离可视区域上侧距离。clien

当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。效果如下：（注意看控制台的打印结果）如果你需要做滚动监听，可以使用这个方法。我们来看看和 scroll 相关的有哪些属性。 和 ：获取元素整个滚动区域的宽、高。包括 width 和 padding，不包括 border和margin。注意： 的特点是：如果内容超出了盒子，为内容的高（包括超出的内容）；如果不超出，为盒子本身的高度。同理。 <!DOCTYPE html> <html&g

JS动画的主要内容如下：1、三大家族和一个事件对象：三大家族：offset/scroll/client。也叫三大系列。事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）。2、动画(闪现/匀速/缓动)3、冒泡/兼容/封装我们知道，JS动画的三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括：offsetWidthoffsetHightoffsetLeftof

在DOM当中，如果想设置样式，有两种形式：className（针对内嵌样式）style（针对行内样式）这篇文章，我们就来讲一下style。需要注意的是：style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式。例如： <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8"

DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。DOM就是由节点组成的。解析过程： HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。DOM树：（一切都是节点）DOM的数据结构如下：上图可知，在HTML当中，一切都是节点（非常重要）。

事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。

定义：正则表达式用于定义一些字符串的规则。作用：计算机可以根据正则表达式，来检查一个字符串是否符合指定的规则；或者将字符串中符合规则的内容提取出来。如果你想查看正则更多的内容，可以查阅官方文档关于 RegExp 这个内置对象的用法。

浅拷贝：只拷贝最外面一层的数据；更深层次的对象，只拷贝引用。深拷贝：拷贝多层数据；每一层级别的数据都会拷贝。总结：拷贝引用的时候，是属于传址，而非传值。关于传值和传址的区别，是很基础的内容，详见《JavaScript 基础/对象简介.md》这篇文章。深拷贝会把对象里所有的数据重新复制到新的内存空间，是最彻底的拷贝。上方代码中，用 for in 做拷贝时，只能做到浅拷贝。也就是说，在 obj2 中， name 和 age 这两个属性会单独存放在新的内存地址中，和 obj1 没有关系。但是， 属性，跟 属

使用 new 关键字调用的函数，是构造函数 constructor。构造函数是专门用来创建对象的函数。例如： const obj = new Object();记住，使用检查一个对象时，会返回。关于创建对象的更多方式，可以看上一篇文章《对象的创建&构造函数》。在对象中保存的值称为属性。向对象添加属性的语法： 对象.属性名 = 属性值;举例： const obj = new Object(); ​ //向obj中添加一个name属性&nbs

对象的字面量就是一个{}。里面的属性和方法均是键值对键：相当于属性名。值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）。使用对象字面量来创建一个对象，非常简洁，举例如下：：使用对象字面量，可以在创建对象时，直接指定对象中的属性。语法：{属性名:属性值,属性名:属性值....}例 1：（一个简单的对象）name: '千古壹号',age: 28例 2：（一个较复杂的对象）name: "千古壹号",age: 26,// 还可以存放一个嵌套的对象。

面向过程：先分析好的具体步骤，然后按照步骤，一步步解决问题。优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。缺点：没有面向对象易维护、易复用、易扩展。面向对象（OOP，Object Oriented Programming）：以对象功能来划分问题，而不是步骤。优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护。缺点：性能比面向过程低。面向对象的编程思想：对代码和数据进行封装，并以对象调用的方式，对外

闭包：如果外部作用域有权访问另外一个函数内部的局部变量时，那就产生了闭包。这个内部函数称之为闭包函数。注意，这里强调的是访问局部变量。闭包代码举例：fun1();// 调用外部函数，就能得到内部函数，并用 变量 result 接收// 在 fun1函数的外部，执行了内部函数 fun2，并访问到了 fun2的内部变量aresult();// 10打印结果：10。

如果有些函数，我们不需要立即调用，但是又想改变这个函数内部的this指向，此时用 bind() 是最为合适的。解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是 this，this 指向的是一个对象，这个对象我们称为函数执行的 上下文对象。上面的举例可以看出，this 指向的是 对象 obj2 ，所以 this.name 指的是 obj2.name。上面的举例可以看出，this 指向的是 window 对象，所以 this.name 指的是全局的 name。

我们在上一篇文章《作用域》中简单讲过“变量提升”，今天来讲一下预编译，这对我们深入理解变量提升会有帮助。

概念：作用域是一个变量或函数的作用范围。作用域在函数定义时，就已经确定了。目的：为了提高程序的可靠性，同时减少命名冲突。在 JS 中，一共有两种作用域：（ES5 中）全局作用域：作用于整个 script 标签内部，或者作用于一个独立的 JS 文件。函数作用域（局部作用域）：作用于函数内的代码环境。直接编写在 script 标签中的 JS 代码，都在全局作用域。全局作用域在页面打开时创建，在页面关闭时销毁。在全局作用域中有一个全局对象 window，它代表的是浏览器的窗口，由浏览器创建，我们可以直接使用。相关

函数定义完，就立即被调用，这种函数叫做立即执行函数。英文是 IIFE（Immediately-invoked function expression），立即调用函数表达式。语法1： (function() {   // 函数体 })();语法2：（立即执行函数也可以传参） (function() {   // 函数体 })(a, b);语法解释：这种写法，需要再加一对圆括号，变成``现有匿名函数如下：&nb

如果一个函数在内部调用这个函数自身，这个函数就是递归函数。递归在数据结构和算法中经常用到，可以将很多复杂的数据模型拆解为简单问题进行求解。一定要掌握。递归模式：把大问题拆解为小问题进行分析。也称为递归体。边界条件：需要确定递归到何时结束。也称为递归出口。提问：求一个正整数的阶乘。普通写法： // 函数：计算一个正整数的阶乘 function factorial(n) {   let result = 1;   for (let i = 1;

函数：就是一些功能或语句的封装。在需要的时候，通过调用的形式，执行这些语句。函数也是一个对象使用typeof检查一个函数对象时，会返回 function函数的作用一次定义，多次调用。将大量重复的语句抽取出来，写在函数里，以后需要这些语句时，可以直接调用函数，避免重复劳动。简化代码，可读性更强，让编程模块化。高内聚、低耦合。来看个例子：console.log("你好");sayHello();// 调用函数sayHello();// 再调用一次函数​​​// 定义函数。

如果在 sort()方法中带参，我们就可以自定义排序规则。具体做法如下：我们可以在 sort()的参数中添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，JS将会分别使用数组中的元素作为实参去调用回调函数。JS根据回调函数的返回值来决定元素的排序：（重要）如果返回一个大于 0 的值，则元素会交换位置如果返回一个小于 0 的值，则不交换位置。如果返回一个等于 0 的值，则认为两个元素相等，则不交换位置如果只是看上面的文字，可能不太好理解，我们来看看下面的例子，你肯定就能明白。