10 2024 档案
摘要：认识生命周期 生命周期的流程 1.创建组件实例之前回调beforeCreate函数 2.创建组件实例 3.创建组件实例之后回调create函数(1.发送网络请求 2.事件监听 3.this.$watch()组件监听) 4.对template模板进行编译 5.在挂载到虚拟DOM之前回调beforeMo
阅读全文
摘要：非父子组件的通信 ◼ 在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。 ◼ 这里我们主要讲两种方式： 全局事件总线； Provide/Inject； 全局事件总线mitt库 使用事件总线工具 事件取消 Provide和Inject Provide和Inje
阅读全文
摘要：认识插槽Slot 如何使用插槽slot？ 插槽的默认内容 多个插槽的效果 具名插槽的使用 ◼ 事实上，我们希望达到的效果是插槽对应的显示，这个时候我们就可以使用具名插槽： 具名插槽顾名思义就是给插槽起一个名字，<slot> 元素有一个特殊的attribute：name； 一个不带name 的sl
阅读全文
摘要：认识组件的嵌套 组件的拆分 组件的通信 父子组件之间通信的方式 父组件传递给子组件 Props的数组用法 数组语法存在的弊端: 1.不能对类型进行验证 2.没有默认值 Props的对象用法 细节一：那么type的类型都可以是哪些呢？ 细节二：对象类型的其他写法 细节三：Prop 的大小写命名 非Pr
阅读全文
摘要：全局CSS和局部CSS 当我们需要CSS只在当前的.vue文件中生效可以在style后面添加scoped 创建vue项目的方式 1.Vue Cli:vue create 基于 >webpack 2.npm init vue@latest 基于-->vite 1.安装一个本地工具:create-vue
阅读全文
摘要：Vue CLI脚手架 Vue CLI 安装和使用 vue create 项目的过程 项目的目录结构 Vue CLI的运行原理
阅读全文
摘要：认识组件化开发 组件化开发 Vue的组件化 注册组件的方式 注册全局组件 <div id="app"> <!-- 使用product-item组件 --> <product-item></product-item> <product-item></product-item> <product-ite
阅读全文
摘要：v-model的基本使用 基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
阅读全文
摘要：案例一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum
阅读全文
摘要：复杂data的处理方式 ◼ 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。 ◼ 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示； 比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示； 在模板中使用表达
阅读全文
摘要：列表渲染 v-for基本使用 ◼ v-for的基本格式是 "item in 数组"： 数组通常是来自data或者prop，也可以是其他方式； item是我们给每项元素起的一个别名，这个别名可以自定来定义； ◼ 我们知道，在遍历一个数组的时候会经常需要拿到数组的索引： 如果我们需要索引，可以使用
阅读全文
摘要：条件渲染 v-if、v-else、v-else-if template元素 v-show v-show和v-if的区别
阅读全文
摘要：div -> 块级元素->width : 父元素的宽度（包含块） width属性默认值不是100% 是 auto ; viewport -> 移动端适配 rem、vw、vh CSS 预处理器 包括这三个 元素属性分类 比如class、id、title 属性是公共属性 比如meta元素的charset
阅读全文
摘要：VSCode代码片段 在该网站中生成代码片段； https://snippet-generator.app 模板语法 Mustache双大括号语法（掌握） 案例演示 v-once指令（了解） v-once案例 v-text指令（了解） v-text案例 v-html指令 v-html案例 v-pre
阅读全文
摘要：认识Vue 目前Vue在前端处于什么地位？ 如何使用Vue呢？ 方式一：CDN引入 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 方式二：下载和引入 Vue初体验 ◼ 案例体验一：动态展示Hello World数
阅读全文
摘要：为什么要搭建本地服务器 webpack-dev-server 认识模块热替换（HMR） 开启HMR 框架的HMR
阅读全文
摘要：认识插件Plugin CleanWebpackPlugin HtmlWebpackPlugin 生成index.html分析 自定义HTML模板 自定义模板数据填充 DefinePlugin的介绍 DefinePlugin的使用 Mode配置 Mode配置代表更多
阅读全文
摘要：为什么需要babel？ Babel命令行使用 Babel插件的使用 Babel的预设preset babel-loader babel-preset 编写App.vue代码 App.vue的打包过程 @vue/compiler-sfc resolve模块解析 确实文件还是文件夹 extensions
阅读全文
摘要：加载图片案例准备 ◼ 为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种： img元素，设置src属性； 其他元素（比如div），设置background-image的css属性； js文件添加img元素 webpack-config.js添加配置 认识as
阅读全文
摘要：node中的内置模块path path常见的API 在webpack中的使用 认识webpack 脚手架依赖webpack Webpack到底是什么呢？ Webpack的安装 Webpack的默认打包 创建局部的webpack Webpack配置文件 指定配置文件 Webpack的依赖图 编写案例代
阅读全文
摘要：代码共享方案 ◼ 我们已经学习了在JavaScript中可以通过模块化的方式将代码划分成一个个小的结构： 在以后的开发中我们就可以通过模块化的方式来封装自己的代码，并且封装成一个工具； 这个工具我们可以让同事通过导入的方式来使用，甚至你可以分享给世界各地的程序员来使用； ◼ 如果我们分享给世
阅读全文
摘要：认识ESModule ◼ JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等，所以在ECMA推出自己的模块化系统时，大家也是兴奋异常。 ◼ ES Module和CommonJS的模块化有一些不同之处： 一方面它使用了import和e
阅读全文
摘要：exports导出 module.exports导出 require细节 情况一 情况二 情况三
阅读全文
摘要：什么是模块化？ ◼ 到底什么是模块化、模块化开发呢？ 事实上模块化开发最终的目的是将程序划分成一个个小的结构； 这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词时不会影响到其他的结构； 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用； 也可以通过某种方式，导入另
阅读全文
摘要：◼ Node中给我们提供了一些全局对象，方便我们进行一些操作： 这些全局对象，我们并不需要从一开始全部一个个学习； 某些全局对象并不常用； 某些全局对象我们会在后续学习中讲到； ✓ 比如module、exports、require()会在模块化中讲到； ✓ 比如Buffer后续会专门讲到； 特
阅读全文
摘要：Node.js是什么 ◼ 官方对Node.js的定义： Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境。 ◼ 也就是说Node.js基于V8引擎来执行JavaScript的代码，但是不仅仅只有V8引擎： 前面我们知道V8可以嵌入到任何C ++应用程序中，无
阅读全文
摘要：◼ jQuery是一个工厂函数( 别名$ )，调用该函数，会根据传入参数类型来返回匹配到元素的集合，一般把该集合称为jQuery对象。 如果传入假值：返回一个空的集合。 如果传入选择器：返回在在documnet中所匹配到元素的集合。 如果传入元素：返回包含该元素的集合。 如果传入HT
阅读全文
摘要：◼ 和 jQuery库一样，许多JavaScript库也会使用 $ 作为函数名或变量名。 在 jQuery 中，$ 是jQuery的别名。 如果我们在使用jQuery库之前，其它库已经使用了 $ 函数或者变量，这时就会出现冲突的情况。 这时我们可以通过调用jQuery中的noConflict函
阅读全文
摘要：◼ jQuery监听document的DOMContentLoaded事件的四种方案 $( document ).ready( handler ) ： deprecated $( "document" ).ready( handler ) ： deprecated $().ready( han
阅读全文
摘要：XMLHttpRequest 实现文件上传 //XHR 文件上传可以查看进度 const uploadBtn = document.querySelector(".upload") uploadBtn.onclick = function(){ //1.创建对象 const xhr = new XM
阅读全文
摘要：认识Fetch和Fetch API ◼ Fetch可以看做是早期的XMLHttpRequest的替代方案，它提供了一种更加现代的处理方案： 比如返回值是一个Promise，提供了一种更加优雅的处理结果方式 ✓ 在请求发送成功时，调用resolve回调then； ✓ 在请求发送失败时，调用rejec
阅读全文
摘要：<script> function hdcajax ({ url, method = "get", data = {}, timeout = 1000, headers = {}, success, failure }={}){ //1.创建对象 const xhr = new XMLHttpReq
阅读全文
摘要：AJAX发送请求 ◼ AJAX 是异步的JavaScript 和 XML（Asynchronous JavaScript And XML） 它可以使用JSON，XML，HTML 和text 文本等格式发送和接收数据； ◼ 如何来完成AJAX请求呢？ 第一步：创建网络请求的AJAX对象（使用XML
阅读全文
摘要：什么是HTTP？ ◼ 什么是HTTP呢？我们来看一下维基百科的解释： 超文本传输协议（英语：HyperTextTransfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议； HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种发布
阅读全文
摘要：前后端分离的优势 ◼ 早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）： 客户端发出请求-> 服务端接收请求并返回相应HTML文档-> 页面刷新，客户端加载新的HTML文档； ◼ 服务器端渲染的缺点： 当用户点击页面中的某个按钮向服务器发送请求时，
阅读全文
摘要：认识CDN ◼ 什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩写：CDN） CDN它是一组分布在不同地理位置的服务器相互连接形成的网络系统。 通过这个网络系统，将Web内容存放在距离用户最近
阅读全文
摘要：认识jQuery ◼ jQuery 读音为：/ˈdʒeɪkwɪəri/ （ 简称：jQ），是一个快速、小型且功能丰富的 JavaScript 库，官网对jQuery的描述： 使HTML文档遍历、操作、事件处理、动画和Ajax 之类的事情变得更加简单。 具有易于使用的API，可在多种浏览器中使用。
阅读全文
摘要：<script> // 类EventBus -> 事件总线对象 class HYEventBus { constructor() { this.eventMap = {} } on(eventName, eventFn) { let eventFns = this.eventMap[eventNam
阅读全文
摘要：<script src="./js/isObject.js"></script> <script> // // 封装判断是否是对象类型 // function isObject(value){ // const valueType = typeof value // return (value !=
阅读全文
摘要：<script> const info ={ name:"hdc", age:21, friends:{ name:"kobe" } } //1.引用赋值 const obj1 = info // 2.操作二:浅拷贝 const obj2 = {...info} //obj2.name = "jam
阅读全文
摘要：//1. // let a = 1 // function b(a){ // a =2 // console.log(a)//2 // } // b(a) // console.log(a)//1 //2. // function a(b=c,c=1){ // console.log(b,c)//报
阅读全文
摘要：<button class="btn">按钮</button> <!-- <script src="./js/underscore.js"></script> --> <script> function hdcthrottle(fn,time){ //获取开始时间 let startTime = 0
阅读全文
摘要：认识节流throttle函数 ◼ 我们用一副图来理解一下节流的过程 当事件触发时，会执行这个事件的响应函数； 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数； 不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的； 节流的应用场景： ➢ 监听页面的滚动事件； ➢ 鼠标
阅读全文
摘要：<button>按钮</button> <input type="text"> <!-- 本地引入:下载js文件并且本地引入 --> <!-- <script src="./js/underscore.js"></script> --> <script> /* 自己实现函数需要做的事情 1.需要接收
阅读全文
摘要：防抖函数和节流函数 认识防抖debounce函数 ◼ 我们用一副图来理解一下它的过程： 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间； 当事件密集触发时，函数的触发会被频繁的推迟； 只有等待了一段时间也没有事件触发，才会真正的执行响应函数； 防抖的应用场景很多： ➢输入框中频繁
阅读全文
摘要：// 封装工具函数:格式化时间 function formatTime(timestamp,fmtString){ //1.将时间戳转成date const date = new Date(timestamp) // // 获取具体时间 // //获取年 // const year = date.g
阅读全文
摘要：/* currentTime: 2000 [00:00.000] 作词 : 许嵩 -> { time: 0, content: "作词 : 许嵩" } [00:01.000] 作曲 : 许嵩 -> { time: 1000, content: "作曲 : 许嵩" } [00:02.000] 编曲 :
阅读全文
摘要：什么是正则表达式？ ◼ 我们先来看一下维基百科对正则表达式的解释： 正则表达式（英语：Regular Expression，常简写为regex、regexp或RE），又称正则表示式、正则表示法、规则表达式、常规表示法，是计算机科学的一个概念； 正则表达式使用单个字符串来描述、匹配一系列匹配某个句
阅读全文
摘要：认识Storage ◼ WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式： cookie:服务器返回自动返回一个cooki,浏览器将cookie存储到本地,浏览器再发送请求自动把cooki传递过去 localStorage：本地存储，提
阅读全文
摘要：function foo(x,y,z){ console.log(x+y+z) } function webKingCurrying(fn){ function curryFn(...args){ // >这里的...args是剩余参数 //两类操作: //1.第一类操作:继续返回一个新的函数,继续
阅读全文
摘要：错误处理方案 ◼ 开发中我们会封装一些工具函数，封装之后给别人使用： 在其他人使用的过程中，可能会传递一些参数； 对于函数来说，需要对这些参数进行验证，否则可能得到的是我们不想要的结果； ◼ 很多时候我们可能验证到不是希望得到的参数时，就会直接return： 但是return存在很大的弊端：调
阅读全文
摘要：面试题一 /* promise1 2 then1 queueMicrotask1 then3 setTimeout1 then2 then4 setTimeout2 */ console.log("script start")//主任务1 setTimeout(function () { conso
阅读全文
摘要：进程和线程 ◼ 线程和进程是操作系统中的两个概念： 进程（process）：计算机已经运行的程序，是操作系统管理程序的一种方式； 线程（thread）：操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中； ◼ 听起来很抽象，这里还是给出我的解释： 进程：我们可以认为，启动一个应用程
阅读全文
摘要：◼ async关键字用于声明一个异步函数： async是asynchronous单词的缩写，异步、非同步； sync是synchronous单词的缩写，同步、同时； ◼ async异步函数可以有很多中写法 async function foo(){} const foo1 = async fun
阅读全文
摘要：自动执行generator函数 ◼ 目前我们的写法有两个问题： 第一，我们不能确定到底需要调用几层的Promise关系； 第二，如果还有其他需要这样执行的函数，我们应该如何操作呢？ ◼ 所以，我们可以封装一个工具函数execGenerator自动执行生成器函数 <script> // 封装一个请
阅读全文
摘要：异步处理方案 ◼ 学完了我们前面的Promise、生成器等，我们目前来看一下异步代码的最终处理方案。 ◼ 案例需求： 我们需要向服务器发送网络请求获取数据，一共需要发送三次请求； 第二次的请求url依赖于第一次的结果； 第三次的请求url依赖于第二次的结果； 依次类推； <script> /
阅读全文
摘要：◼ 生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。 平时我们会编写很多的函数，这些函数终止的条件通常是返回值或者发生了异常。 ◼ 生成器函数也是一个函数，但是和普通的函数有一些区别： 首先，生成器函数需要在function的后面加一个
阅读全文
摘要：◼ 但是上面的代码整体来说看起来是有点奇怪的： 我们获取一个数组的时候，需要自己创建一个index变量，再创建一个所谓的迭代器对象； 事实上我们可以对上面的代码进行进一步的封装，让其变成一个可迭代对象； ◼ 什么又是可迭代对象呢？ 它和迭代器是不同的概念； 当一个对象实现了iterable
阅读全文
摘要：迭代器 什么是迭代器？ ◼ 迭代器（iterator），使用户在容器对象（container，例如链表或数组）上遍访的对象，使用该接口无需关心对象的内部实现细节。 其行为像数据库中的光标，迭代器最早出现在1974年设计的CLU编程语言中； 在各种编程语言的实现中，迭代器的实现方式各不相同，但是基
阅读全文
摘要：◼ 在目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。 ◼ JSON的全称是JavaScript Object Notation（JavaScript对象符号）： JSON是由Douglas Crockford构想和设计的一种轻量级
阅读全文
摘要：认识BOM操作 ◼ BOM：浏览器对象模型（Browser Object Model） 简称BOM，由浏览器提供的用于处理文档（document）之外的所有内容的其他对象； 比如navigator、location、history等对象； ◼ JavaScript有一个非常重要的运行环境就是浏览
阅读全文
摘要：window定时器 ◼ 有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（scheduling a call）”。 ◼ 目前有两种方式可以实现： setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。 setInterval 允许我们重复运行一个函
阅读全文
摘要：认识事件处理 ◼ Web页面需要经常和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程： 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置； 浏览器需要搭建一条JavaScript代码和事件之间的桥梁； 当某个事件发生时，让JavaScript可以相
阅读全文
摘要：元素的继承 class Student extends Person{} 创建一个Student对象继承自Person对象本身会自带Person的属性并且可以创建属于自己的属性 什么是DOM？ ◼ 前面我们花了很多时间学习JavaScript的基本语法，但是这些基本语法，但是这些语法好像和做网页没有
阅读全文
摘要：Date类型的使用 创建Date对象 Date的构造函数有如下用法： // 1. 创建date对象的方式 //没有传入任何参数获取到的是当前时间 var date1 = new Date() console.log(date1) //Wed Aug 28 2024 09:17:12 GMT+080
阅读全文
摘要：数组Array使用详解 认识数组（Array） ◼ 什么是数组（Array）呢？ 对象允许存储键值集合，但是在某些情况下使用键值对来访问并不方便； 比如说一系列的商品、用户、英雄，包括HTML元素，我们如何将它们存储在一起呢？ 这个时候我们需要一种有序的集合，里面的元素是按照某一个顺序来排列的
阅读全文
摘要：字符串类型String String类的补充（一）- 基本使用 ◼ 在开发中，我们经常需要对字符串进行各种各样的操作，String类提供给了我们对应的属性和方法。 ◼ String常见的属性： length：获取字符串的长度； ◼ String也有很多常见的方法和操作，我们来进行学习。 ◼ 操作一
阅读全文
摘要：数学对象Math ◼ 在除了Number类可以对数字进行处理之外，JavaScript还提供了一个Math对象。 Math是一个内置对象（不是一个构造函数），它拥有一些数学常数属性和数学函数方法； ◼ Math常见的属性： Math.PI：圆周率，约等于3.14159； ◼ Math常见的方法：
阅读全文
摘要：数字类型Number ◼ 前面我们已经学习了Number类型，它有一个对应的数字包装类型Number，我们来对它的方法做一些补充。 ◼ Number属性补充： Number.MAX_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)； Number.MIN
阅读全文
摘要：JavaScript面向对象 对象类型的使用 在数据类型中我们提到还有一种特别的类型：对象类型。 对象类型涉及到JavaScript的各个方面，所以掌握对象类型非常重要； 对象类型是一种存储键值对（key-value）的更复杂的数据类型； 为什么需要对象类型呢？ 基本数据类型可以存储一些简单的值，但
阅读全文
摘要：程序中的foo,bar,baz var foo ="xxxx"//变量 var bar = { //函数 name:"xxxx" } 它们通常被用来作为函数、变量、文件的名词； 目前已经编程了计算机编程的术语一部分； 但是它们本身并没有特别的用途和意义； 常被称之为“伪变量”（metasyn
阅读全文
摘要：认识循环语句 1.在开发中我们经常需要做各种各样的循环操作： 比如把一个列表中的商品、歌曲、视频依次输出进行展示； 比如对一个列表进行累加计算； 比如运行相同的代码将数字1 到10 逐个输出； 2.循环是一种重复运行同一代码的方法。 如果是对某一个列表进行循环操作，我们通常也会称之为遍历（t
阅读全文
摘要：JavaScript分支语句 程序执行顺序 顺序 >从上向下,顺序执行代码 分支 >根据条件判断,决定执行代码的分支 循环 >让特定代码重复执行 代码块的概念 在开发中，一行代码很难完成某一个特定的功能，我们就会将这些代码放到一个代码块中 // 一个代码块 { var num1 = 10; var
阅读全文
摘要：JavaScript基础运算符 几乎所有的编程语言都有各种各样的运算符(也被称之为操作符，operators) 运算符和运算元 运算元 运算元——运算符应用的对象。 ✓ 比如说乘法运算5 * 2，有两个运算元； ✓ 左运算元5 和右运算元2； ✓ 有时候人们也称其为“参数”； 如果一个运算符对应的只
阅读全文
摘要：认识JavaScript变量 变量的定义,规范等 一个变量，就是一个用于存放数值的容器； 这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据； 变量的独特之处在于它存放的数值是可以改变的 变量的命名规则 变量的声明：在JavaScript中声明一个变量使用var关键字（v
阅读全文
摘要：ES5 异步代码的处理 <script> // 1.设计一个什么地方是传入参数什么地方是传入回调函数的函数 function execode(counter,successCallback,failCallback){ // 异步任务:调用某个函数不会立马返回结果 setTimeout(()=>{
阅读全文
摘要：监听对象的操作 ◼ 我们先来看一个需求：有一个对象，我们希望监听这个对象中的属性被设置或获取的过程 通过我们前面所学的知识，能不能做到这一点呢？ 其实是可以的，我们可以通过之前的属性描述符中的存储属性描述符来做到； 案例: //2.监听所有的属性(使用Object.defineProperty
阅读全文
摘要：ES7 - Array Includes ◼ 在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf获取结果，并且判断是否为 -1。 ◼ 在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。
阅读全文
摘要：新的ECMA代码执行描述 ◼ 在执行学习JavaScript代码执行过程中，我们学习了很多ECMA文档的术语： 执行上下文栈：Execution Context Stack，用于执行上下文的栈结构； 执行上下文：Execution Context，代码在执行之前会先创建对应的执行上下文； 变量
阅读全文
摘要：解构Destructuring ◼ ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。 解构赋值是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中。 ◼ 我们可以划分为：数组的解构和对象的解构。 ◼ 数组的解构： 基本解构过程 顺序解构
阅读全文
摘要：字面量的增强 ◼ ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals（增强对象字面量）。 ◼ 字面量的增强主要包括下面几部分： 属性的简写：Property Shorthand 方法的简写：Method Shorthand 计算属性名：Computed
阅读全文
摘要：◼ 面向对象的三大特性：封装、继承、多态。 前面两个我们都已经详细解析过了，接下来我们讨论一下JavaScript的多态。 ◼ JavaScript有多态吗？ 维基百科对多态的定义：多态（英语：polymorphism）指为不同数据类型的实体提供统一的接口，或使用一个单一的符号来表示多个不同的类
阅读全文
摘要：原型继承关系 1.p1是Person的实例对象 2.obj是Object的实例对象 3.Function/Object/Foo都是Function的实例对象(__proto__ 都等于 Function.prototype) 4.原型对象默认创建时, 隐式原型都是指向Object的显式原型的(Obj
阅读全文
摘要：对象的方法补充 ◼ hasOwnProperty 对象是否有某一个属于自己的属性（不是在原型上的属性） ◼ in/for in 操作符 判断某个属性是否在某个对象或者对象的原型上 ◼ instanceof 用于检测构造函数（Person、Student类）的pototype，是否出现在某个实例
阅读全文
摘要：原型链的查找顺序 面向对象的特性–继承 ◼ 面向对象有三大特性：封装、继承、多态 封装：我们前面将属性和方法封装到一个类中，可以称之为封装的过程； 继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）； 多态：不同的对象在执行时表现出不同的形态； ◼ 那
阅读全文
摘要：对象和函数的原型 认识对象的原型 ◼ JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。 ◼ 那么这个对象有什么用呢？ 当我们通过引用对象的属性key来获取一个value时，它会触发[[Get]]的操作； 这个操作会首先检查该
阅读全文
摘要：对象的增强知识补充 ◼ 在前面我们的属性都是直接定义在对象内部，或者直接添加到对象内部的： 但是这样来做的时候我们就不能对这个属性进行一些限制：比如这个属性是否是可以通过delete删除的？这个属性是否在forin遍历的时候被遍历出来呢？ ◼ 如果我们想要对一个属性进行比较精准的操作控制，那么我们
阅读全文
摘要：◼ JavaScript历史的局限性： 长久以来，JavaScript 不断向前发展且并未带来任何兼容性问题； 新的特性被加入，旧的功能也没有改变，这么做有利于兼容旧代码； 但缺点是JavaScript 创造者的任何错误或不完善的决定也将永远被保留在JavaScript 语言中； ◼ 在ECM
阅读全文
摘要：with语句的使用 with语句 扩展一个语句的作用域链。 <script> var obj = { message : "Hello World" } with (obj) { console.log(message) } </script> ◼ 不建议使用with语句，因为它可能是混淆错误和兼容
阅读全文
摘要：◼ 组合（Compose）函数是在JavaScript开发过程中一种对函数的使用技巧、模式： 比如我们现在需要对某一个数据进行函数的调用，执行两个函数fn1和fn2，这两个函数是依次执行的； 那么如果每次我们都需要进行两个函数的调用，操作上就会显得重复； 那么是否可以将这两个函数组合起来，自动
阅读全文
摘要：◼ 柯里化也是属于函数式编程里面一个非常重要的概念。 是一种关于函数的高阶技术； 它不仅被用于JavaScript，还被用于其他编程语言； ◼ 我们先来看一下维基百科的解释： 在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化； 是把接收多个参数的函数，变成接受一个单一参
阅读全文
摘要：◼ 函数式编程中有一个非常重要的概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念； ◼ 纯函数的维基百科定义： 在程序设计中，若一个函数符合以下条件，那么这个函数被称为纯函数： 此函数在相同的输入值时，需产生相同的输出。 函数的输出和输入值以外的其他隐藏信息或状态无
阅读全文
摘要：◼ ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中： 如果最后一个参数是... 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组； ◼ 那么剩余参数和arguments有什么区别呢？ 剩余参数只包含那些没有对应形参的实参，而arguments 对象包
阅读全文
摘要：函数属性和arguments ◼ 我们知道JavaScript中函数也是一个对象，那么对象中就可以有属性和方法。 ◼ 属性name：一个函数的名词我们可以通过name来访问； ◼ 属性length：属性length用于返回函数参数的个数； 注意：rest参数是不参与参数的个数的； 认识argume
阅读全文
摘要：◼ 在前面我们说过，JavaScript是支持函数式编程的 ◼ 在JavaScript中，函数是非常重要的，并且是一等公民： 那么就意味着函数的使用是非常灵活的； 函数可以作为另外一个函数的参数，也可以作为另外一个函数的返回值来使用； ◼ 所以JavaScript存在很多的高阶函数： 自己编写
阅读全文
摘要：JavaScript内存管理 ◼ 不管以什么样的方式来管理内存，内存的管理都会有如下的生命周期： 第一步：分配申请你需要的内存（申请）； 第二步：使用分配的内存（存放一些东西，比如对象等）； 第三步：不需要使用时，对其进行释放； ◼ JavaScript会在定义数据时为我们分配内存。 ◼ 但是
阅读全文
摘要：初始化全局对象 Global Object（GO） ◼ js引擎会在执行代码之前，会在(堆内存)中创建一个全局对象：Global Object（GO） 该对象所有的作用域（scope）都可以访问； 里面会包含Date、Array、String、Number、setTimeout、setInter
阅读全文
摘要：JavaScript代码的执行 ◼ JavaScript代码下载好之后，是如何一步步被执行的呢？ ◼ 我们知道，浏览器内核是由两部分组成的，以webkit为例： WebCore：负责HTML解析、布局、渲染等等相关的工作； JavaScriptCore：解析、执行JavaScript代码； We
阅读全文
摘要：网页的解析过程 输入域名-->DNS域名解析-->IP地址-->找到对应的服务器-->服务器会返回一个html文件-->解析html文件如果遇到link标签下载CSS文件并解析,同时继续解析html文件,如果遇到script标签下载js文件并解析等到js文件下载解析好了以后继续解析html并生成DO
阅读全文
摘要：箭头函数arrowfunction ◼ 箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁： 箭头函数不会绑定this、arguments属性； 箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误）； ◼ 箭头函数如何编写呢？ (): 函数的参数 {}
阅读全文
摘要：1.函数在调用时，JavaScript会默认给this绑定一个值； 2.this的绑定和定义的位置（编写的位置）没有关系； 3.this的绑定和调用方式以及调用的位置有关系； 4.this是在运行时被绑定的； this的绑定规则 规则一：默认绑定 在函数独立调用时使用默认绑定,可以理解为函数
阅读全文
