├── course-js高级 ├── day01 │ ├── images │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ ├── 04.png │ │ └── 05.png │ └── js高级学习笔记-01.md ├── day04 │ └── js高级第四天.md └── day03 │ └── js高级第三天.md ├── .gitignore ├── README.md └── course-WebAPI └── Web API Day04.md /course-js高级/day01/images/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/course-notes/master/course-js高级/day01/images/01.png -------------------------------------------------------------------------------- /course-js高级/day01/images/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/course-notes/master/course-js高级/day01/images/02.png -------------------------------------------------------------------------------- /course-js高级/day01/images/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/course-notes/master/course-js高级/day01/images/03.png -------------------------------------------------------------------------------- /course-js高级/day01/images/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/course-notes/master/course-js高级/day01/images/04.png -------------------------------------------------------------------------------- /course-js高级/day01/images/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TianchengLee/course-notes/master/course-js高级/day01/images/05.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | pids 2 | logs 3 | node_modules 4 | npm-debug.log 5 | coverage/ 6 | run 7 | dist 8 | .DS_Store 9 | .nyc_output 10 | .basement 11 | config.local.js 12 | basement_dist 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # notes 2 | 3 | > 前端学科双元笔记 4 | 5 | ## Development 6 | 7 | ```bash 8 | cd course-* 9 | yarn dev 10 | yarn build 11 | ``` 12 | 13 | For more details, please head VuePress's [documentation](https://v1.vuepress.vuejs.org/). 14 | 15 | -------------------------------------------------------------------------------- /course-WebAPI/Web API Day04.md: -------------------------------------------------------------------------------- 1 | # Web API Day04 2 | 3 | ## 01-常用的键盘事件 4 | 5 | ### 提问 6 | 7 | 1. 学习了几个键盘事件？ 8 | 2. onkeyup和onkeypress有什么区别？ 9 | 3. 这几个键盘事件的执行顺序是什么？ 10 | 11 | 12 | 13 | ### 答案 14 | 15 | 1. 学习了几个键盘事件？ 16 | - 答： 17 | 2. onkeyup和onkeypress有什么区别？ 18 | 3. 这几个键盘事件的执行顺序是什么？ 19 | 20 | 21 | 22 | ## 02-keyCode判断用户按下哪个键 23 | ## 03-模拟京东按键输入内容案例 24 | ## 04-模拟京东快递单号查询(上) 25 | ## 05-模拟京东快递单号查询(下) 26 | ## 06-B0M导读 27 | ## 07-B0M概述 28 | ## 09-页面加载事件 29 | ## 10-调整窗口大小事件 30 | ## 11-定时器之 setTimeout 31 | ## 12-回调图数以及5秒之后自动关闭的广告 32 | ## 13-清除定时器clearTimeout 33 | ## 14-定时器之setInterval 34 | ## 15-倒计时效果 35 | ## 16-清除定时器 clearInterval 36 | ## 17-发送短信案例 37 | ## 18-this指向问题 38 | ## 19-JS同步和异步 39 | ## 20-同步任务和异步任务执行过程 40 | ## 21-上执行机制 41 | ## 22-location对象常见属性 42 | ## 23-5秒钟之后跳转页面 43 | ## 24-获取URL卷数 44 | ## 25-location常见方法 45 | ## 26-navigator 对象 46 | ## 27-history对象 -------------------------------------------------------------------------------- /course-js高级/day04/js高级第四天.md: -------------------------------------------------------------------------------- 1 | # js高级学习笔记 2 | 3 | 4 | # js高级04天 5 | 6 | ## day04的能力目标 7 | - 能够说出正则表达式的作用 8 | - 能够写出简单的正则表达式 9 | - 能够使用正则表达式对表单进行验证 10 | - 能够使用表达式替换内容 11 | 12 | ## 1.正则表达式的导读 13 | ### 1.1正则的概述 14 | - 什么是正则表达式？ 15 | - 在js中正则表达式是什么存在？ 16 | - 正则表达式的作用都有哪些呢？ 17 | - 正则表达式的特点？ 18 | 19 | ```js 20 | 1. 正则表通常被用来检索、替换那些符合某个模式(规则)的文本，例如验证表单:用户 名表单只能输入英文字母、数字或者下划线 21 | 2. 昵称输入框中可以输入中文(匹配)。 22 | 3. 正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要 的特定部分(提取)等 。 23 | ``` 24 | 25 | ```js 26 | 特点 27 | 1. 灵活性、逻辑性和功能性非常的强。 28 | 2. 可以迅速地用极简单的方式达到字符串的复杂控制。 29 | 3. 对于刚接触的人来说，比较晦涩难懂。比如:^\w+([-+.]\w+)@\w+([-.]\w+).\w+ 30 | ([-.]\w+)*$ 31 | 4. 实际开发,一般都是直接复制写好的正则表达式.但是要求会使用正则表达式并且根据 32 | 实际情况修改正则表达式. 比如用户名: /^[a-z0-9_-]{3,16}$/ 33 | ``` 34 | 35 | ## 2.正则表达式在JavaScript中的使用 36 | 37 | ### 2.1 创建正则表达式 38 | - 怎么用正则的对象方法创建正则表达式 39 | - 怎么使用字面量的方式创建正则表达式 40 | 41 | ```js 42 | 1.通过调用RegExp对象的构造函数创建 43 | var regexp = new RegExp(/123/); 44 | console.log(regexp); 45 | 46 | 2.利用字面量创建 正则表达式 47 | var rg = /123/; 48 | ``` 49 | 50 | 51 | ### 2.2 测试正则表达式 52 | - 使用什么方法检测是否符合正则的规范 53 | - 测试的结果返回的是什么 54 | 55 | ```js 56 | var rg = /123/; 57 | console.log(rg.test(123));//匹配字符中是否出现123 出现结果为true console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false 58 | ``` 59 | 60 | ## 3.j正则表达式中的特殊字符 61 | 62 | ### 3.1 正则表达式的组成 63 | - 正则中的简单字符、特殊字符、专用符号 64 | - 什么是边界符 65 | - 正则表达式里需不需要加引号 66 | - 正则以谁开始的符号是什么 67 | - 正则以谁结束的符号是什么 68 | - 怎么使用正则的精确匹配 69 | 70 | ### 3.2 字符类 71 | - []在正则中可以做什么作用 72 | - 怎么写一个大小写字母和数字的正则表达式 73 | - 正则里的取反怎么实现 74 | 75 | ### 3.3 量词符 76 | - 常用的量词符都有哪些 77 | - *可以让匹配的字符出现几次？ 78 | - +可以让匹配的字符出现几次？ 79 | - ？可以让匹配的字符出现几次？ 80 | - 怎么实现不能少于多次和多余多少次？ 81 | - 怎么通过量词实现字母和数字组合的多次组合？ 82 | 83 | ### 3.4 使用正则表达式实现用户名验证 84 | 85 | ### 3.5 括号的总结 86 | - 在正则表达式里中括号能做什么作用 87 | - 在正则表达式里大括号能做什么作用 88 | - 在正则表达式里小括号能做什么作用 89 | - 怎么使用正则的在线调试工具 90 | 91 | ### 3.6 正则的预定义类 92 | - 常见的预定义类 93 | - 怎么使用预定义类实现电话号码的匹配 94 | 95 | ### 3.7 表单验证 96 | - 实现手机号码的正则验证 97 | - 实现QQ号的的正则验证 98 | - 实现公共方法的抽取 99 | - 实现汉字的正则验证 100 | - 实现短信验证码的正则验证 101 | - 实现确认密码比较 102 | 103 | ## 4.正则表达式中的替换 104 | - 怎么实现正则表达式的替换 105 | - 怎么表达式的修饰符有哪些 106 | 107 | -------------------------------------------------------------------------------- /course-js高级/day01/js高级学习笔记-01.md: -------------------------------------------------------------------------------- 1 | # js高级01-笔记 2 | 3 | [toc] 4 | 5 | ## 1. day01 能力目标 6 | 7 | 1. 能够说出面向过程与面向对象的区别 8 | 2. 能够使用说出类和对象的区别 9 | 3. 能够完成tab栏切换案例 10 | 11 | 12 | ## 2. day02能力目标 13 | 14 | 15 | 16 | 17 | # js高级第01天 18 | 19 | ## 1. 类相关概念 20 | 21 | - 面向对象和面向过程的区别 22 | - 类和对象的使用 - 调用类的实例和方法 23 | - 类和实例对象的区别 24 | 25 | ### 1.1 面向对象编程介绍 26 | 27 | 面向对象和面向过程的区别以及优缺点? 28 | 29 | ``` 30 | 区别: 31 | 面向过程关注步骤 32 | 面向对象关注谁能完成工作找到对应的人,更注重结果 33 | ``` 34 | 35 | - **面向对象** 36 | - 优点 37 | - **易维护**、**易复用**、**易扩展**，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护 38 | - 缺点 39 | - 性能比面向过程低 40 | - **面向过程** 41 | - 优点 42 | - **性能比面向对象高**，因为类调用时需要实例化，开销比较大，比较消耗资源;比如单片机、嵌入式开发、Linux/Unix等一般采用面向过程开发，性能是最重要的因素。 43 | - 不易维护、不易复用、不易扩展 44 | 45 | 46 | 47 | ### 面向对象的应用场景 48 | 49 | 50 | 51 | ```html 52 | 很多游戏类型的项目都是用面向对象做到 53 | 包括我们之前学到的jquery 也是用$这个对象去调用的 也是面向对象 54 | 还有今天要学习的tab栏切换也是面向对象 55 | 56 | 总结:万物皆对象 57 | ``` 58 | 59 | 60 | 61 | 62 | 63 | ## 2. 类的封装 64 | 65 | ### 2.1 类和对象 66 | 67 | 以前声明类用什么关键字?方式是? 68 | 69 | 70 | 71 | ```javascript 72 | function Star(uname, age, sex) { 73 | this.name = uname; 74 | this.age = age; 75 | this.sex = sex; 76 | this.sing = function(sang) { 77 | console.log(sang); 78 | 79 | } 80 | } 81 | 82 | var ldh = new Star('刘德华', 18, '男'); 83 | console.log(ldh); 84 | ``` 85 | 86 | 87 | 88 | 89 | 90 | 现在声明类用什么关键字? 91 | 92 | 类和对象的区别是? 93 | 94 | 95 | 96 | ```javascript 97 | 声明类的关键字是class 98 | 99 | 类抽象了对象的公共部分,他泛指一大类 100 | 对象特指某一个,通过实例化一个简单的对象 101 | 102 | 类是一系列事物的统称，同类事物必定具有相同的特征，类在日常生活中是看不到的 103 | 对象是一个类的具体表现形式，日常生活中看到的全是对象 104 | ``` 105 | 106 | 107 | 108 | 109 | 110 | 思考: 111 | 112 | 分析下列哪些是对象 113 | 114 | - 建筑工人 115 | - 市长 116 | - 红烧带鱼 117 | - 我家的狗“多多” 118 | - 左边同桌最新买的笔记本电脑 119 | - 厕所 120 | 121 | 122 | 123 | ### 2.2 创建类和生成实例 124 | 125 | 126 | ```javascript 127 | // 1. 创建类 class 创建一个 明星类 128 | class Star { 129 | constructor(uname, age) { 130 | this.uname = uname; 131 | this.age = age; 132 | } 133 | } 134 | 135 | // 2. 利用类创建对象 new 136 | var ldh = new Star('刘德华', 18); 137 | var zxy = new Star('张学友', 20); 138 | console.log(ldh); 139 | console.log(zxy); 140 | 141 | 通过一个类 可以创建出多个实例对象 142 | ``` 143 | 144 | 145 | 146 | 147 | ### 2.3 类中添加共有方法 148 | 149 | 类中添加方法需要function吗? 150 | 151 | 类中的方法是通过谁去调用的? 152 | 153 | ```javascript 154 | // 1. 创建类 class 创建一个 明星类 155 | class Star { 156 | // 类的共有属性放到 constructor 里面 157 | constructor(uname, age) { 158 | this.uname = uname; 159 | this.age = age; 160 | } 161 | sing(song) { 162 | // console.log('我唱歌'); 163 | console.log(this.uname + song); 164 | } 165 | } 166 | 167 | // 2. 利用类创建对象 new 168 | var ldh = new Star('刘德华', 18); 169 | var zxy = new Star('张学友', 20); 170 | console.log(ldh); 171 | console.log(zxy); 172 | // (1) 我们类里面所有的函数不需要写function 173 | //(2) 多个函数方法之间不需要添加逗号分隔 174 | ldh.sing('冰雨'); 175 | zxy.sing('李香兰'); 176 | ``` 177 | 178 | ```javascript 179 | 在es6之后 声明类用的是class 所以语法有写改变 并且类中的方法直接声明即可 不需要function 180 | 类中的方法是通过实例对象去调用的 181 | ``` 182 | 183 | 184 | 185 | ## 3. 类的继承 186 | 187 | ### 3.1 类继承extends和super关键字 188 | 189 | 为什么需要继承? 190 | 191 | 继承的关键字是什么? 192 | 193 | 194 | 195 | ``` 196 | 如果父类有100个方法 子类也有100个方法 197 | 如果按照以前的写法 就需要重复的写100种方法了,而使用继承能够很好的减少代码量,并且子类也能拓展自己的方法 198 | 199 | super关键字:JS中super关键词是用来调用原型对象的属性和方法的,目前理解为super指向父类即可 200 | ``` 201 | 202 | ```javascript 203 | class Father { 204 | constructor(x, y) { 205 | this.x = x; 206 | this.y = y; 207 | } 208 | sum() { 209 | console.log(this.x + this.y); 210 | 211 | } 212 | } 213 | class Son extends Father { 214 | constructor(x, y) { 215 | super(x, y); //调用了父类中的构造函数 216 | } 217 | } 218 | var son = new Son(1, 2); 219 | var son1 = new Son(11, 22); 220 | son.sum(); 221 | son1.sum(); 222 | ``` 223 | 224 | **练习**(5分钟) 225 | 226 | 1. 进阶练习: 动物类有名字,年龄的属性,狗类有名字年龄和品种的属性,用继承如何写? 227 | 228 | 229 | 230 | ### 3.2 super调用父类普通函数以及继承中属性方法查找原则 231 | 232 | 如果父类有一个say方法,子类也有一个say方法,那么调用父类对象的say和子类对象的say会相同吗? 233 | 234 | ```javascript 235 | class Father { 236 | say() { 237 | return '我是爸爸'; 238 | } 239 | } 240 | class Son extends Father { 241 | say() { 242 | // console.log('我是儿子'); 243 | console.log(super.say() + '的儿子'); 244 | // super.say() 就是调用父类中的普通函数 say() 245 | } 246 | } 247 | var son = new Son(); 248 | son.say(); 249 | 250 | 251 | ``` 252 | 253 | 254 | 255 | **练习**(5分钟) 256 | 257 | 1. 动物类有吃喝跑睡的方法 狗类继承动物类,并且狗类也有吃喝跑睡的方法,并且重写跑方法,最后调用狗类的跑方法和动物类的跑方法. 258 | 259 | 260 | 261 | ### 3.3 super必须放到子类this之前 262 | 263 | 子类可以添加自己的独有方法吗? 264 | 265 | ```javascript 266 | class Father { 267 | constructor(x, y) { 268 | this.x = x; 269 | this.y = y; 270 | } 271 | sum() { 272 | console.log(this.x + this.y); 273 | } 274 | } 275 | // 子类继承父类加法方法 同时 扩展减法方法 276 | class Son extends Father { 277 | constructor(x, y) { 278 | // 利用super 调用父类的构造函数 279 | // super 必须在子类this之前调用 280 | super(x, y); 281 | this.x = x; 282 | this.y = y; 283 | } 284 | subtract() { 285 | console.log(this.x - this.y); 286 | } 287 | } 288 | var son = new Son(5, 3); 289 | son.subtract(); 290 | son.sum(); 291 | 292 | 注意:super要写在this的前面 293 | ``` 294 | 295 | **练习**(5分钟) 296 | 297 | 1. 动物类有吃喝跑睡的方法 狗类继承动物类,并且狗类有自己叫的方法,并且调用狗类的叫方法和跑的方法 298 | 299 | 300 | 301 | ### 3.4 使用类2个注意点 302 | 303 | ```javascript 304 | 1.现有类再有实例化 (先有了女朋友才能跟女朋友一起睡觉,才能...) 305 | 2.类里面的属性需要this调用 306 | ``` 307 | 308 | 309 | 310 | ## 3.5 类里面this指向问题 311 | 312 | 313 | 314 | 315 | 316 | ```javascript 317 | 案例分析: 318 | class Person { 319 | constructor(name) { 320 | this.loverName = name; 321 | } 322 | look(name) { 323 | this.loverName = name; 324 | } 325 | } 326 | var zzw = new Person('刘亦菲'); 327 | console.log(zzw.loverName); 328 | zzw.look("马爸爸"); 329 | console.log(zzw.loverName); 330 | 331 | 332 | ``` 333 | 334 | 335 | 336 | 337 | 338 | -------------------------------------------------------------------------------- /course-js高级/day03/js高级第三天.md: -------------------------------------------------------------------------------- 1 | # js高级学习笔记 2 | 3 | 4 | # js高级03天 5 | 6 | ## 1.函数的定义及调用 7 | ### 1.1函数的导读 8 | - 复习一下之前的函数 9 | - 学习函数的高级用法 10 | - 能够说出函数的多种定义和调用 11 | - 能够说出和改变函数内部的this指向 12 | - 能够说出严格模式的特点 13 | - 能够把函数作为参数和返回值传递 14 | - 能够说出闭包的作用 15 | - 能够说出递归的两个条件 16 | - 能够输出浅拷贝和深拷贝的区别 17 | 18 | ### 1.2 函数的定义用 19 | - 能够说出常用的函数定义的方式有哪几种？ 20 | ```js 21 | function fn(){} 22 | var fn = function(){} 23 | var f = new Function(){} 24 | ``` 25 | - new Function()需要注意那几点 26 | ```js 27 | Function里面的参数必须是字符串格式 28 | 使用较少，执行效率低，书写也不方便 29 | 函数也是一个对象 30 | var fn = new Function() 31 | console.log(fn instanceof Object)//true 32 | ``` 33 | 34 | ### 1.3 函数的调用 35 | - 能够说出普通函数怎么调用？ 36 | - 能够说出对象的方法怎么调用？ 37 | - 构造函数的调用方式 38 | - 事件绑定的函数的调用的方式 39 | - 定时器函数的调用方式 40 | - 立即执行函数的调用方式 41 | 42 | ## 2.函数的this指向以及改变this指向 43 | 44 | ### 2.1 函数内部的this指向 45 | - 普通函数的this指向？ 46 | - 构造函数的this指向？ 47 | - 对象方法调用的this指向? 48 | - 事件绑定的this指向? 49 | - 定时器的this指向? 50 | - 立即执行函数的this指向? 51 | 52 | ### 2.2 call方法的使用 53 | - call方法是否会调用函数？ 54 | - call方法的作用是什么？ 55 | - call方法的应用场景？ 56 | ```js 57 | //父构造函数 58 | function Father(uname, age){ 59 | this.uname = uname 60 | this.age = age 61 | } 62 | //子构造函数 63 | function Son(uname, age, score){ 64 | //使用call改变this指向，这里的this是指向实例对象 65 | Father.call(this, uname, age) 66 | this.score = score 67 | } 68 | var son = new Son('刘德华',18,100) 69 | console.log(son) 70 | ``` 71 | 72 | ### 2.3 apply方法的使用 73 | - apply方法能否直接调用函数 74 | - apply方法的参数与call有什么区别 75 | - apply方法一般的应用场景 76 | ```js 77 | 78 | ``` 79 | ### 2.4 bind方法的使用 80 | - bind方法能直接调用函数 81 | - bind方法能否改变this指向 82 | - bind方法的返回值是什么？ 83 | - bind方法的应用场景 84 | 85 | ### 2.5 call、apply、bind的区别 86 | ``` 87 | 共同点: 都可以改变this指向 88 | 不同点: 89 | call 和 apply 会调用函数, 并且改变函数内部this指向. 90 | call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递 bind 不会调用函数, 可以改变函数内部this指向. 91 | 应用场景 92 | 1. call经常做继承. 93 | 2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值 94 | 3. bind不调用函数,但是还想改变this指向.比如改变定时器内部的this指向. 95 | ``` 96 | 97 | ## 3.js的严格模式 98 | 99 | ### 3.1 严格模式的定义 100 | - 什么是严格模式？ 101 | - 为什么会有严格模式？ 102 | - 怎么开启严格模式？ 103 | - 怎么在一个函数里面开启严格模式 104 | 105 | ### 3.2 严格模式下的一些注意事项 106 | - 严格模式下哪些操作是不能去做的 107 | ```js 108 | 'use strict' 109 | num = 10 110 | console.log(num)//严格模式后使用未声明的变量 111 | ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐ 112 | var num2 = 1; 113 | delete num2;//严格模式不允许删除变量 ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐ 114 | function fn() { 115 | console.log(this); // 严格模式下全局作用域中函数中的 this 是 undefined } 116 | fn(); 117 | ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ 118 | ‐‐‐‐‐‐‐‐ 119 | function Star() { 120 | this.sex = '男'; } 121 | // Star();严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给 他赋值则 会报错. 122 | var ldh = new Star(); 123 | console.log(ldh.sex); ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐ ‐‐‐‐‐‐‐‐‐ 124 | setTimeout(function() { 125 | console.log(this); //严格模式下，定时器 this 还是指向 window 126 | }, 2000); 127 | ``` 128 | 129 | ## 4.高阶函数 130 | 131 | ### 4.1高阶函数的定义 132 | - 什么是高阶函数 133 | - 我们使用过哪些高阶函数 134 | 135 | ## 5.闭包 136 | 137 | ### 5.1 闭包的定义 138 | - 复习变量的作用域 139 | - 了解什么是闭包 140 | 141 | ### 5.2 闭包的作用 142 | - 延伸变量的作用范围 143 | 144 | ### 5.3 闭包的应用 145 | - 用闭包实现打车计价 146 | 147 | ### 5.4 闭包的扩展 148 | ```js 149 | //思考题1： 150 | var name = 'The window'; 151 | var object = { 152 | name: 'My Object', 153 | getNameFunc:function () { 154 | return function () { 155 | return this.name; 156 | } 157 | } 158 | } 159 | console.log(object.getNameFunc()())//立即执行函数里面的this指向window 160 | //拆解1 161 | // var fn = function () { 162 | // return function () { 163 | // return this.name; 164 | // } 165 | // } 166 | //拆解2 167 | // fn = function () { 168 | // return this.name; 169 | // } 170 | //加上括号就是调用 171 | // fn() 172 | 173 | // 思考题二 174 | var name = 'The window'; 175 | var object = { 176 | name: 'My Object', 177 | getNameFunc:function () { 178 | var that = this; 179 | return function () { 180 | return that.name; 181 | } 182 | } 183 | } 184 | console.log(object.getNameFunc()()) 185 | ``` 186 | 187 | ## 6.递归 188 | 189 | ### 6.1 递归的定义 190 | - 什么是递归 191 | - 递归需要注意哪些点 192 | - 怎么用递归求斐波函数 193 | - 使用递归实现数据的遍历案例 194 | 195 | ## 7.浅拷贝和浅拷贝 196 | - 浅拷贝的对象级别的拷贝指向的是什么？ 197 | 198 | ```js 199 | //浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用 200 | //深拷贝拷贝多层，每一级别的数据都会去拷贝 201 | var obj = { 202 | id: 1, 203 | name: 'Euni', 204 | msg:{ 205 | age:18 206 | } 207 | }; 208 | var o = {}; 209 | 210 | // for (var k in obj) { 211 | // //k 是属性的名字，obj[o]可以拿到对象的属性值 212 | // o[k] = obj[k] 213 | // } 214 | // console.log(o) 215 | // //由于对象级别的拷贝只是拷贝引用的地址，一个改变，另一个跟着改变 216 | // o.msg.age = 20 217 | // console.log(obj) 218 | Object.assign(o, obj) 219 | o.msg.age = 30 220 | console.log(o) 221 | console.log(obj ) 222 | ``` 223 | 224 | - 什么是深拷贝？ 225 | 226 | ```js 227 | 228 | ``` 229 | - 使用递归实现深拷贝 230 | - 扩展使用JSON.parse(),JSON.stringify()实现对对象的深拷贝 231 | ```js 232 | //JSON.stringify()将 JavaScript json对象转换为JavaScript对象表示法的JSON字符串(对象转为字符串) 233 | //JSON.parse()用于从一个JSON字符串中解析出json对象 234 | 235 | var test={ 236 | a:"ss", 237 | b:"dd", 238 | c:[ 239 | {dd:"css",ee:"cdd"}, 240 | {mm:"ff",nn:"ee"} 241 | ] 242 | }; 243 | 244 | //拷贝一个字符串会新辟一个新的存储地址，这样就切断了引用对象的指针联系。 245 | var test1 = JSON.parse(JSON.stringify(test));//拷贝数组,注意这行的拷贝方法 246 | console.log(test); 247 | console.log(test1); 248 | test1.c[0].dd="change"; //改变test1的c属性对象的d属性 249 | console.log(test); //不影响test 250 | console.log(test1); 251 | //根据测试结果，我们可以看到，test1已经从test复制一份，并且test1改变其中属性的值时，对原来的对象test没有造成影响。 252 | 253 | //注意 254 | //JSON.parse(),JSON.stringify()兼容性问题 255 | //可以通过为IE7以及IE7以下版本的IE浏览器引入json2.js，使用json2.js来解决JSON的兼容性问题 256 | 259 | ``` 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | --------------------------------------------------------------------------------