From 207f7b746591e690a30cedf592e6408bca446289 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sat, 17 Mar 2018 12:10:41 +0800 Subject: [PATCH] modify --- 03-JavaScript（二）/创建对象和继承.md | 134 +++++++++++++++++- .../01-offset家族和匀速动画(含轮播图的实现).md | 0 .../02-scroll家族和缓动动画.md | 0 .../03-client家族(可视区).md | 0 .../04-JS的小知识.md | 0 .../01-jQuery的介绍和选择器.md | 0 {06-jQuery => 05-jQuery}/02-jQuery动画详解.md | 0 {06-jQuery => 05-jQuery}/03-jQuery操作DOM.md | 0 .../04-jQuery的事件机制和其他知识.md | 0 .../01-HTML5详解.md | 0 .../03-CSS3选择器详解.md | 0 .../04-CSS3属性详解（一）.md | 0 .../05-CSS3属性详解：动画详解.md | 0 .../06-CSS3属性详解：flex布局.md | 0 .../07-CSS3属性详解：Web字体.md | 0 .../08-HTML5举例：简单的视频播放器.md | 0 .../09-HTML5详解（二）.md | 0 .../10-HTML5详解（三）.md | 0 .../CSS3的常见边框汇总.md | 0 .../01-Bootstrap入门.md | 0 .../02-Bootstrap使用.md | 0 .../03-Less详解.md | 0 {10-Node.js => 09-Node.js}/01-Node.js入门.md | 0 .../02-事件驱动和非阻塞机制.md | 0 {10-Node.js => 09-Node.js}/03-模块化结构.md | 0 .../11-JavaScript模块化开发.md | 0 {10-Node.js => 09-Node.js}/12-ES6.md | 0 {10-Node.js => 09-Node.js}/Node.js代码举例.md | 0 {10-Node.js => 09-Node.js}/WebSocket.md | 0 {10-Node.js => 09-Node.js}/server.js | 0 .../01-ES6的介绍和常用语法.md | 0 10-ES6/02-ES6的常用语法.md | 83 +++++++++++ ...绍和环境配置.md => 00-Vue的介绍和vue-cli.md} | 0 33 files changed, 216 insertions(+), 1 deletion(-) rename {05-JavaScript特效 => 04-前端基本功：JavaScript特效}/01-offset家族和匀速动画(含轮播图的实现).md (100%) rename {05-JavaScript特效 => 04-前端基本功：JavaScript特效}/02-scroll家族和缓动动画.md (100%) rename {05-JavaScript特效 => 04-前端基本功：JavaScript特效}/03-client家族(可视区).md (100%) rename {05-JavaScript特效 => 04-前端基本功：JavaScript特效}/04-JS的小知识.md (100%) rename {06-jQuery => 05-jQuery}/01-jQuery的介绍和选择器.md (100%) rename {06-jQuery => 05-jQuery}/02-jQuery动画详解.md (100%) rename {06-jQuery => 05-jQuery}/03-jQuery操作DOM.md (100%) rename {06-jQuery => 05-jQuery}/04-jQuery的事件机制和其他知识.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/01-HTML5详解.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/03-CSS3选择器详解.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/04-CSS3属性详解（一）.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/05-CSS3属性详解：动画详解.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/06-CSS3属性详解：flex布局.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/07-CSS3属性详解：Web字体.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/08-HTML5举例：简单的视频播放器.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/09-HTML5详解（二）.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/10-HTML5详解（三）.md (100%) rename {07-HTML5和CSS3 => 06-HTML5和CSS3}/CSS3的常见边框汇总.md (100%) rename {09-移动web开发 => 07-移动web开发}/01-Bootstrap入门.md (100%) rename {09-移动web开发 => 07-移动web开发}/02-Bootstrap使用.md (100%) rename {09-移动web开发 => 07-移动web开发}/03-Less详解.md (100%) rename {10-Node.js => 09-Node.js}/01-Node.js入门.md (100%) rename {10-Node.js => 09-Node.js}/02-事件驱动和非阻塞机制.md (100%) rename {10-Node.js => 09-Node.js}/03-模块化结构.md (100%) rename {10-Node.js => 09-Node.js}/11-JavaScript模块化开发.md (100%) rename {10-Node.js => 09-Node.js}/12-ES6.md (100%) rename {10-Node.js => 09-Node.js}/Node.js代码举例.md (100%) rename {10-Node.js => 09-Node.js}/WebSocket.md (100%) rename {10-Node.js => 09-Node.js}/server.js (100%) rename 10-Node.js/00-01.ES6的介绍和常用语法.md => 10-ES6/01-ES6的介绍和常用语法.md (100%) create mode 100644 10-ES6/02-ES6的常用语法.md rename 21-Vue基础/{00-Vue的介绍和环境配置.md => 00-Vue的介绍和vue-cli.md} (100%) diff --git a/03-JavaScript（二）/创建对象和继承.md b/03-JavaScript（二）/创建对象和继承.md index 814be09..8c0422f 100644 --- a/03-JavaScript（二）/创建对象和继承.md +++ b/03-JavaScript（二）/创建对象和继承.md @@ -91,7 +91,139 @@ +### 方式三：工厂模式 + +- 方式：通过工厂函数动态创建对象并返回。 + +返回一个对象的函数，就是**工厂函数**。 + +- 适用场景: 需要创建多个对象。 + +- 问题: 对象没有一个具体的类型，都是Object类型。 + +由于这个问题的存在，工厂模式用得不多。 + +```html + + + + + 03_工厂模式 + + + + + + + +``` + + + +### 方式四：自定义构造函数 + +```html + + + + + 04_自定义构造函数模式 + + + + + + + + +``` + + +方式四引入了继承。 + +## 继承的几种方式 + + +### 通过构造函数继承 + +在子类型构造函数中通用call()调用父类型构造函数 + + +### 原型链继承 + +子类型的原型为父类型的一个实例对象 + + + +### 组合继承 -### 方式三： diff --git a/05-JavaScript特效/01-offset家族和匀速动画(含轮播图的实现).md b/04-前端基本功：JavaScript特效/01-offset家族和匀速动画(含轮播图的实现).md similarity index 100% rename from 05-JavaScript特效/01-offset家族和匀速动画(含轮播图的实现).md rename to 04-前端基本功：JavaScript特效/01-offset家族和匀速动画(含轮播图的实现).md diff --git a/05-JavaScript特效/02-scroll家族和缓动动画.md b/04-前端基本功：JavaScript特效/02-scroll家族和缓动动画.md similarity index 100% rename from 05-JavaScript特效/02-scroll家族和缓动动画.md rename to 04-前端基本功：JavaScript特效/02-scroll家族和缓动动画.md diff --git a/05-JavaScript特效/03-client家族(可视区).md b/04-前端基本功：JavaScript特效/03-client家族(可视区).md similarity index 100% rename from 05-JavaScript特效/03-client家族(可视区).md rename to 04-前端基本功：JavaScript特效/03-client家族(可视区).md diff --git a/05-JavaScript特效/04-JS的小知识.md b/04-前端基本功：JavaScript特效/04-JS的小知识.md similarity index 100% rename from 05-JavaScript特效/04-JS的小知识.md rename to 04-前端基本功：JavaScript特效/04-JS的小知识.md diff --git a/06-jQuery/01-jQuery的介绍和选择器.md b/05-jQuery/01-jQuery的介绍和选择器.md similarity index 100% rename from 06-jQuery/01-jQuery的介绍和选择器.md rename to 05-jQuery/01-jQuery的介绍和选择器.md diff --git a/06-jQuery/02-jQuery动画详解.md b/05-jQuery/02-jQuery动画详解.md similarity index 100% rename from 06-jQuery/02-jQuery动画详解.md rename to 05-jQuery/02-jQuery动画详解.md diff --git a/06-jQuery/03-jQuery操作DOM.md b/05-jQuery/03-jQuery操作DOM.md similarity index 100% rename from 06-jQuery/03-jQuery操作DOM.md rename to 05-jQuery/03-jQuery操作DOM.md diff --git a/06-jQuery/04-jQuery的事件机制和其他知识.md b/05-jQuery/04-jQuery的事件机制和其他知识.md similarity index 100% rename from 06-jQuery/04-jQuery的事件机制和其他知识.md rename to 05-jQuery/04-jQuery的事件机制和其他知识.md diff --git a/07-HTML5和CSS3/01-HTML5详解.md b/06-HTML5和CSS3/01-HTML5详解.md similarity index 100% rename from 07-HTML5和CSS3/01-HTML5详解.md rename to 06-HTML5和CSS3/01-HTML5详解.md diff --git a/07-HTML5和CSS3/03-CSS3选择器详解.md b/06-HTML5和CSS3/03-CSS3选择器详解.md similarity index 100% rename from 07-HTML5和CSS3/03-CSS3选择器详解.md rename to 06-HTML5和CSS3/03-CSS3选择器详解.md diff --git a/07-HTML5和CSS3/04-CSS3属性详解（一）.md b/06-HTML5和CSS3/04-CSS3属性详解（一）.md similarity index 100% rename from 07-HTML5和CSS3/04-CSS3属性详解（一）.md rename to 06-HTML5和CSS3/04-CSS3属性详解（一）.md diff --git a/07-HTML5和CSS3/05-CSS3属性详解：动画详解.md b/06-HTML5和CSS3/05-CSS3属性详解：动画详解.md similarity index 100% rename from 07-HTML5和CSS3/05-CSS3属性详解：动画详解.md rename to 06-HTML5和CSS3/05-CSS3属性详解：动画详解.md diff --git a/07-HTML5和CSS3/06-CSS3属性详解：flex布局.md b/06-HTML5和CSS3/06-CSS3属性详解：flex布局.md similarity index 100% rename from 07-HTML5和CSS3/06-CSS3属性详解：flex布局.md rename to 06-HTML5和CSS3/06-CSS3属性详解：flex布局.md diff --git a/07-HTML5和CSS3/07-CSS3属性详解：Web字体.md b/06-HTML5和CSS3/07-CSS3属性详解：Web字体.md similarity index 100% rename from 07-HTML5和CSS3/07-CSS3属性详解：Web字体.md rename to 06-HTML5和CSS3/07-CSS3属性详解：Web字体.md diff --git a/07-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md b/06-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md similarity index 100% rename from 07-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md rename to 06-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md diff --git a/07-HTML5和CSS3/09-HTML5详解（二）.md b/06-HTML5和CSS3/09-HTML5详解（二）.md similarity index 100% rename from 07-HTML5和CSS3/09-HTML5详解（二）.md rename to 06-HTML5和CSS3/09-HTML5详解（二）.md diff --git a/07-HTML5和CSS3/10-HTML5详解（三）.md b/06-HTML5和CSS3/10-HTML5详解（三）.md similarity index 100% rename from 07-HTML5和CSS3/10-HTML5详解（三）.md rename to 06-HTML5和CSS3/10-HTML5详解（三）.md diff --git a/07-HTML5和CSS3/CSS3的常见边框汇总.md b/06-HTML5和CSS3/CSS3的常见边框汇总.md similarity index 100% rename from 07-HTML5和CSS3/CSS3的常见边框汇总.md rename to 06-HTML5和CSS3/CSS3的常见边框汇总.md diff --git a/09-移动web开发/01-Bootstrap入门.md b/07-移动web开发/01-Bootstrap入门.md similarity index 100% rename from 09-移动web开发/01-Bootstrap入门.md rename to 07-移动web开发/01-Bootstrap入门.md diff --git a/09-移动web开发/02-Bootstrap使用.md b/07-移动web开发/02-Bootstrap使用.md similarity index 100% rename from 09-移动web开发/02-Bootstrap使用.md rename to 07-移动web开发/02-Bootstrap使用.md diff --git a/09-移动web开发/03-Less详解.md b/07-移动web开发/03-Less详解.md similarity index 100% rename from 09-移动web开发/03-Less详解.md rename to 07-移动web开发/03-Less详解.md diff --git a/10-Node.js/01-Node.js入门.md b/09-Node.js/01-Node.js入门.md similarity index 100% rename from 10-Node.js/01-Node.js入门.md rename to 09-Node.js/01-Node.js入门.md diff --git a/10-Node.js/02-事件驱动和非阻塞机制.md b/09-Node.js/02-事件驱动和非阻塞机制.md similarity index 100% rename from 10-Node.js/02-事件驱动和非阻塞机制.md rename to 09-Node.js/02-事件驱动和非阻塞机制.md diff --git a/10-Node.js/03-模块化结构.md b/09-Node.js/03-模块化结构.md similarity index 100% rename from 10-Node.js/03-模块化结构.md rename to 09-Node.js/03-模块化结构.md diff --git a/10-Node.js/11-JavaScript模块化开发.md b/09-Node.js/11-JavaScript模块化开发.md similarity index 100% rename from 10-Node.js/11-JavaScript模块化开发.md rename to 09-Node.js/11-JavaScript模块化开发.md diff --git a/10-Node.js/12-ES6.md b/09-Node.js/12-ES6.md similarity index 100% rename from 10-Node.js/12-ES6.md rename to 09-Node.js/12-ES6.md diff --git a/10-Node.js/Node.js代码举例.md b/09-Node.js/Node.js代码举例.md similarity index 100% rename from 10-Node.js/Node.js代码举例.md rename to 09-Node.js/Node.js代码举例.md diff --git a/10-Node.js/WebSocket.md b/09-Node.js/WebSocket.md similarity index 100% rename from 10-Node.js/WebSocket.md rename to 09-Node.js/WebSocket.md diff --git a/10-Node.js/server.js b/09-Node.js/server.js similarity index 100% rename from 10-Node.js/server.js rename to 09-Node.js/server.js diff --git a/10-Node.js/00-01.ES6的介绍和常用语法.md b/10-ES6/01-ES6的介绍和常用语法.md similarity index 100% rename from 10-Node.js/00-01.ES6的介绍和常用语法.md rename to 10-ES6/01-ES6的介绍和常用语法.md diff --git a/10-ES6/02-ES6的常用语法.md b/10-ES6/02-ES6的常用语法.md new file mode 100644 index 0000000..e5529ef --- /dev/null +++ b/10-ES6/02-ES6的常用语法.md @@ -0,0 +1,83 @@ + + +## Symbol + +### 概述 + +背景：ES5中对象的属性名都是字符串，容易造成重名，污染环境。 + +**概念**：ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。 + + +**特点：** + +- Symbol属性对应的值是唯一的，解决**命名冲突问题** + +- Symbol值不能与其他数据进行计算，包括同字符串拼串 + +- for in、for of 遍历时不会遍历Symbol属性。 + + +### 创建Symbol属性值 + +Symbol是函数，但并不是构造函数。创建一个Symbol数据类型： + +```javascript + let mySymbol = Symbol(); + + console.log(typeof mySymbol); //打印结果：symbol + console.log(mySymbol); //打印结果：Symbol() +``` + + +打印结果： + +20180317_1134.png + + +如果我通过 Symbol()函数创建了两个值，这两个值是不一样的： + +```javascript + let mySymbol = Symbol(); + let mySymbol2 = Symbol(); + + console.log(mySymbol == mySymbol2); //打印结果：false +``` + +上面代码的打印结果研究音声了， + + + +下面来讲一下Symbol的使用。 + +### 1、将Symbol作为对象的属性值 + +```javascript + let mySymbol = Symbol(); + + let obj = { + name: 'smyhvae', + age: 26 + }; + + //obj.mySymbol = 'male'; //错误：不能用 . 这个符号给对象添加 Symbol 属性。 + obj[mySymbol] = 'hello'; //正确：通过**属性选择器**给对象添加 Symbol 属性。后面的属性值随便写。 + + console.log(obj); +``` + + +上面的代码中，我们尝试给obj添加一个Symbol类型的属性值，但是添加的时候，不能采用`.`这个符号，而是应该用`属性选择器`的方式。打印结果： + +20180317_1145.png + + + + + + + + + + + diff --git a/21-Vue基础/00-Vue的介绍和环境配置.md b/21-Vue基础/00-Vue的介绍和vue-cli.md similarity index 100% rename from 21-Vue基础/00-Vue的介绍和环境配置.md rename to 21-Vue基础/00-Vue的介绍和vue-cli.md