26-对象的创建&构造函数
title: 26-对象的创建&构造函数publish: true
在看本文之前，可以先复习前面的一篇文章：《04-JavaScript 基础/11-对象简介.md》
创建自定义对象的几种方法方式一：对象字面量对象的字面量就是一个{}。里面的属性和方法均是键值对：
键：相当于属性名。
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）。
使用对象字面量来创建一个对象，非常简洁，举例如下：：
var obj = {};
使用对象字面量，可以在创建对象时，直接指定对象中的属性。语法：{属性名:属性值,属性名:属性值….}
例 1：（一个简单的对象）
const obj1 = { name: '千古壹号', age: 28};
例 2：（一个较复杂的对象）
const obj2 = { name: "千古壹号", age: 26, isBoy: true, // 还可以存放一个嵌套的对象 tes ...
27-对象的基本操作
title: 27-对象的基本操作publish: true
对象的基本操作创建对象使用 new 关键字调用的函数，是构造函数 constructor。构造函数是专门用来创建对象的函数。
例如：
var obj = new Object();
记住，使用typeof检查一个对象时，会返回object。
关于常见对象的更多方式，可以看上一篇文章《对象的创建&构造函数》。
向对象中添加属性在对象中保存的值称为属性。
向对象添加属性的语法：
对象.属性名 = 属性值;
举例：
var obj = new Object();//向obj中添加一个name属性obj.name = '孙悟空';//向obj中添加一个gender属性obj.gender = '男';//向obj中添加一个age属性obj.age = 18;console.log(JSON.stringify(obj)); // 将 obj 以字符串的形式打印出来
打印结果：
{ "name":"孙悟空", "gen ...
28-浅拷贝和深拷贝
title: 28-浅拷贝和深拷贝publish: true
概念
浅拷贝：只拷贝最外面一层的数据；更深层次的对象，只拷贝引用。
深拷贝：拷贝多层数据；每一层级别的数据都会拷贝。
总结：
拷贝引用的时候，是属于传址，而非传值。关于传值和传址的区别，是很基础的内容，详见《JavaScript 基础/对象简介.md》这篇文章。
深拷贝会把对象里所有的数据重新复制到新的内存空间，是最彻底的拷贝。
浅拷贝的实现方式用 for in 实现浅拷贝（比较繁琐）const obj1 = { name: 'qianguyihao', age: 28, info: { desc: '很厉害', },};const obj2 = {};// 用 for in 将 obj1 的值拷贝给 obj2for (let key in obj1) { obj2[key] = obj1[key];}console.log('obj ...
29-对象的高级操作（待更新）
title: 29-对象的高级操作（待更新）publish: false
Object.freeze() 冻结对象Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。
代码举例：
const params = { name: 'qianguyihao'; port: '8899';}Object.freeze(params); // 冻结对象 paramsparams.port = '8080';// 修改无效
上方代码中，把 params 对象冻结后，如果想再改变 params 里面的属性值，是无效的。
30-原型链和原型继承（待更新）
title: 30-原型链和原型继承（待更新）publish: false
前言在 ES6 中，我们可以通过 ES6 引入的类 Class 来实现面向对象的编程（下一篇文章会讲到）。但是在 ES6 之前，我们是通过构造函数和原型，来模拟类的实现机制。
今天这篇文章，我们就来学习构造函数和原型。
31-类和构造继承（待更新）
title: 31-类和构造继承（待更新）publish: false
32-正则表达式
title: 32-正则表达式publish: true
正则表达式简介定义：正则表达式用于定义一些字符串的规则。
作用：计算机可以根据正则表达式，来检查一个字符串是否符合指定的规则；或者将字符串中符合规则的内容提取出来。
如果你想查看正则更多的内容，可以查阅官方文档关于 RegExp 这个内置对象的用法。
创建正则表达式的对象方式一：使用构造函数创建正则表达式的对象语法：
var 变量 = new RegExp("正则表达式"); // 注意，参数是字符串var 变量 = new RegExp("正则表达式", "匹配模式"); // 注意，两个参数都是字符串
备注：RegExp的意思是 Regular expression。使用typeof检查正则对象，会返回object。
上面的语法中，既可以传一个参数，也可以传两个参数。
创建了正则表达式的对象后，该怎么使用呢？大致分为两个步骤：
（1）创建正则表达式的对象 reg。
（2）使用 reg 的test() 方法，判断指定字符串是否符合规则。
正则表达式的te ...
33-事件简介
title: 33-事件简介publish: true
事件简介事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。
事件的三要素事件的三要素：事件源、事件、事件驱动程序。
比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯开了或者关了。
再比如，网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了。
于是我们可以总结出：谁引发的后续事件，谁就是事件源。
总结如下：
事件源：引发后续事件的html标签。
事件：js已经定义好了（见下图）。
事件驱动程序：对样式和html的操作。也就是DOM。
也就是说，我们可以在时间对应的属性中写一些js代码，当事件被触发时，这些代码将会执行。
代码书写步骤如下：（重要）
（1）获取事件源：documen ...
34-DOM简介和DOM操作
title: 34-DOM简介和DOM操作publish: true
常见概念JavaScript的组成JavaScript基础分为三个部分：
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型（Document object Model），操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型（Browser Object Model），操作浏览器部分功能的API。比如让浏览器自动滚动。
节点节点（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：
文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
元素节点（标签）：HTML标签。
属性节点（属性）：元素的属性。
文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。
节点的类型不同，属性和 ...
35-通过style对象获取和设置行内样式
title: 35-通过style对象获取和设置行内样式publish: true
style属性的获取和修改在DOM当中，如果想设置样式，有两种形式：
className（针对内嵌样式）
style（针对行内样式）
这篇文章，我们就来讲一下style。
需要注意的是：style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式。例如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { border: 6px solid red; } </style></head><body> <div class="box1" style="wid ...
36-offset相关属性和匀速动画（含轮播图的实现）
title: 36-offset相关属性和匀速动画(含轮播图的实现)publish: true
前言JS动画的主要内容如下：
1、三大家族和一个事件对象：
三大家族：offset/scroll/client。也叫三大系列。
事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）。
2、动画(闪现/匀速/缓动)
3、冒泡/兼容/封装
offset 家族的组成我们知道，JS动画的三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。
offset的中文是：偏移，补偿，位移。
js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括：
offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent
下面分别介绍。
1、offsetWidth 和 offsetHightoffsetWidth 和 offsetHight：获取元素的宽高 + padding + border，不包括margin。如下：
offsetWidth ...
37-scroll相关属性和缓动动画
title: 37-scroll相关属性和缓动动画publish: true
scroll 相关属性window.onscroll() 方法当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。效果如下：（注意看控制台的打印结果）
如果你需要做滚动监听，可以使用这个方法。
我们来看看和 scroll 相关的有哪些属性。
1、ScrollWidth 和 scrollHeightScrollWidth 和 scrollHeight：获取元素整个滚动区域的宽、高。包括 width 和 padding，不包括 border和margin。
注意：
scrollHeight 的特点是：如果内容超出了盒子，scrollHeight为内容的高（包括超出的内容）；如果不超出，scrollHeight为盒子本身的高度。ScrollWidth同理。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> & ...
38-client（可视区）相关属性
title: 38-client(可视区)相关属性publish: true
client 家族的组成clientWidth 和 clientHeight元素调用时：
clientWidth：获取元素的可见宽度（width + padding）。
clientHeight：获取元素的可见高度（height + padding）。
body/html 调用时：
clientWidth：获取网页可视区域宽度。
clientHeight：获取网页可视区域高度。
声明：
clientWidth 和 clientHeight 属性是只读的，不可修改。
clientWidth 和 clientHeight 的值都是不带 px 的，返回的都是一个数字，可以直接进行计算。
clientX 和 clientYevent调用：
clientX：鼠标距离可视区域左侧距离。
clientY：鼠标距离可视区域上侧距离。
clientTop 和 clientLeft
clientTop：盒子的上border。
clientLeft：盒子的左border。
三大家族 of ...
39-事件的绑定和事件对象Event
title: 39-事件的绑定和事件对象Eventpublish: true
绑定事件的两种方式/DOM事件的级别我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定（注册）事件的两种方式，我们以onclick事件为例。
DOM0的写法：onclickelement.onclick = function () {}
举例：
<body><button>点我</button><script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的 btn.onclick = function () { console.log("事件1"); } btn.onclick = function () { console ...
40-事件的传播和事件冒泡
title: 40-事件的传播和事件冒泡publish: true
DOM事件流事件传播的三个阶段是：事件捕获、事件冒泡和目标。
事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。
如下图所示：
PS：这个概念类似于 Android 里的 touch 事件传递。
事件捕获addEventListener可以捕获事件：
box1.addEventListener("click", function () { alert("捕获 box3");}, true);
上面的方法中，参数为true，代表事件在捕获阶段执行。
代码演示：
//参数为true，代表事件在「捕获」阶段触发；参数为false或者不写参数， ...
