From aa288a99d95305c5244306469e14c4855404aac8 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 15 Mar 2018 23:14:46 +0800 Subject: [PATCH] =?UTF-8?q?modify=EF=BC=9A=E4=BD=9C=E7=94=A8=E5=9F=9F?= =?UTF-8?q?=E5=92=8C=E9=97=AD=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...向对象.md => 07-面向对象、作用域和this.md} | 139 -------- 03-JavaScript/08-构造函数和原型.md | 81 ++++- ...向对象和内置对象.md => 09-面向对象和内置对象.md} | 0 ...DOM操作.md => 10-JavaScript基础:DOM操作.md} | 0 ...泡.md => 12-JavaScript基础:事件对象Event和冒泡.md} | 0 03-JavaScript/13-事件委托.md | 6 + 03-JavaScript(二)/06-作用域和闭包.md | 337 ++++++++++++++++++ .../07-call、apply、bind的区别.md | 0 .../this.md | 0 .../严格模式.md | 0 .../others/06-作用域和闭包.md | 190 ---------- .../{23-面试技巧.md => 23-面试技巧 by smyhvae.md} | 9 + 12 files changed, 431 insertions(+), 331 deletions(-) rename 03-JavaScript/{07-面向对象.md => 07-面向对象、作用域和this.md} (96%) rename 03-JavaScript/{11-JavaScript语法基础:面向对象和内置对象.md => 09-面向对象和内置对象.md} (100%) rename 03-JavaScript/{12-JavaScript基础:DOM操作.md => 10-JavaScript基础:DOM操作.md} (100%) rename 03-JavaScript/{13-JavaScript基础:事件对象Event和冒泡.md => 12-JavaScript基础:事件对象Event和冒泡.md} (100%) create mode 100644 03-JavaScript/13-事件委托.md create mode 100644 03-JavaScript(二)/06-作用域和闭包.md rename {11-JavaScript => 03-JavaScript(二)}/07-call、apply、bind的区别.md (100%) rename {11-JavaScript => 03-JavaScript(二)}/this.md (100%) rename {11-JavaScript => 03-JavaScript(二)}/严格模式.md (100%) delete mode 100644 04-前端基本功:CSS和DOM练习/others/06-作用域和闭包.md rename 04-前端基本功:CSS和DOM练习/others/{23-面试技巧.md => 23-面试技巧 by smyhvae.md} (91%) diff --git a/03-JavaScript/07-面向对象.md b/03-JavaScript/07-面向对象、作用域和this.md similarity index 96% rename from 03-JavaScript/07-面向对象.md rename to 03-JavaScript/07-面向对象、作用域和this.md index 1daad45..ad4a981 100644 --- a/03-JavaScript/07-面向对象.md +++ b/03-JavaScript/07-面向对象、作用域和this.md @@ -3,14 +3,12 @@ **对象的作用是:封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。 - 对象具有**特征**(属性)和**行为**(方法)。 面向对象:可以创建自定义的类型、很好的支持继承和多态。 面向对象的特征:封装、继承、多态。 - ## 向对象中添加属性/添加方法 首先创建一个对象: @@ -20,7 +18,6 @@ var obj = new Object(); ``` - 向对象中添加属性: ```javascript @@ -28,7 +25,6 @@ obj.age = 18; ``` - 对象的属性值可以是任何的数据类型,也可以是个**函数**: ```javascript @@ -43,7 +39,6 @@ ``` - 打印结果: 20180314_2109.png @@ -53,7 +48,6 @@ 如果一个函数作为一个对象的属性保存,那么我们称这个函数是这个对象的**方法**。调用这个函数就说调用对象的方法(method)。但是它只是名称上的区别,没有其他的区别。 - ```javascript //调方法 obj.sayName(); @@ -62,7 +56,6 @@ fun(); ``` - ## 枚举对象中的属性:for in 语法: @@ -109,7 +102,6 @@ ``` - 打印结果: 20180314_2125.png @@ -138,7 +130,6 @@ 全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问的到。 - **变量的声明提前:** @@ -156,7 +147,6 @@ 举例2: - ```javascript console.log(a); a = 123; //此时a相当于window.a @@ -166,14 +156,12 @@ 20180314_2136.png - **函数的声明提前:** - 使用`函数声明`的形式创建的函数`function foo(){}`,**会被声明提前**。 也就是说,它会在所有的代码执行之前就被创建,所以我们可以在函数声明之前,调用函数。 - - 使用`函数表达式`创建的函数`var foo = function(){}`,**不会被声明提前**,所以不能在声明前调用。 很好理解,因为此时foo被声明了,且为undefined,并没有给其赋值`function(){}`。 @@ -182,7 +170,6 @@ 20180314_2145.png - ### 函数作用域 **调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁。** @@ -195,10 +182,8 @@ 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用(**就近原则**)。如果没有则向上一级作用域中寻找,直到找到全局作用域;如果全局作用域中依然没有找到,则会报错ReferenceError。 - 在函数中要访问全局变量可以使用window对象。(比如说,全局作用域和函数作用域都定义了变量a,如果想访问全局变量,可以使用`window.a`) - **提醒1:** 在函数作用域也有声明提前的特性: @@ -208,7 +193,6 @@ - 函数声明也会在函数中所有的代码执行之前执行 - 因此,在函数中,没有var声明的变量都会成为**全局变量**,而且并不会提前声明。 举例1: @@ -229,7 +213,6 @@ 上方代码中,foo()的打印结果是`1`。如果去掉第一行代码,打印结果是`Uncaught ReferenceError: a is not defined` - **提醒2:**定义形参就相当于在函数作用域中声明了变量。 ``` @@ -285,128 +268,6 @@ ``` - 打印结果:`vae`。 - - - - - - - - - - - - -```javascript - - -``` - - - - - - - - - - -```javascript - - -``` - - - - - - - - - - -```javascript - - -``` - - - - - - - - - - -```javascript - - -``` - - - - - - - - - - -```javascript - - -``` - - - - - - - - - - -```javascript - - -``` - - - - - - - - - - -```javascript - - -``` - - - - - - - - - - -```javascript - - -``` - - - - - - - diff --git a/03-JavaScript/08-构造函数和原型.md b/03-JavaScript/08-构造函数和原型.md index e20411b..3c39e2a 100644 --- a/03-JavaScript/08-构造函数和原型.md +++ b/03-JavaScript/08-构造函数和原型.md @@ -14,6 +14,83 @@ ## 原型对象 -引入: +### 原型的引入 + + +```javascript + function Person(name, age, gender) { + this.name = name; + this.age = age; + this.gender = gender; + //向对象中添加一个方法 + this.sayName = function () { + console.log("我是" + this.name); + } + } + + //创建一个Person的实例 + var per = new Person("孙悟空", 18, "男"); + var per2 = new Person("猪八戒", 28, "男"); + per.sayName(); + per2.sayName(); + + console.log(per.sayName == per2.sayName); //打印结果为false +``` + +上方代码中,我们在Person中添加了一个sayName方法,然后在两个实例中进行了调用,造成的结果是:给每个实例都添加了sayName方法。 + +目前我们的sayName方法是在构造函数内部创建的,也就是说,**构造函数每执行一次就会创建一个新的sayName方法**。也是说所有实例的sayName都是唯一的,最后一行代码的打印结果为false。 + +还有一种方式是,将sayName方法在全局作用域中定义:(不建议。看注释) + +```javascript + function Person(name, age, gender) { + this.name = name; + this.age = age; + this.gender = gender; + //向对象中添加一个方法 + this.sayName = fun; + } + + //将sayName方法在全局作用域中定义 + /* + * 将函数定义在全局作用域,污染了全局作用域的命名空间 + * 而且定义在全局作用域中也很不安全 + */ + function fun() { + alert("Hello大家好,我是:" + this.name); + }; +``` + + +比较好的方式是,在原型中添加sayName方法: + +```javascript + Person.prototype.sayName = function(){ + alert("Hello大家好,我是:"+this.name); + }; +``` + +### 原型prototype的概念 + +我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype。这个属性对应着一个对象,这个对象就是我们所谓的原型对象。 + + +如果函数作为普通函数调用prototype没有任何作用,当函数以构造函数的形式调用时,它所创建的实例对象中都会有一个隐含的属性,指向该构造函数的原型,我们可以通过__proto__来访问该属性。 + +原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。 + +当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用。 + +以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,这样就不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了。 + + + +### 原型链 + +原型对象也是对象,所以它也有原型,当我们使用一个对象的属性或方法时,会现在自身中寻找,自身中如果有,则直接使用。如果没有则去原型对象中寻找。如果原型对象中有,则使用,如果没有则去原型的原型中寻找,直到找到Object对象的原型。Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined。 + + + + -如果我们在 diff --git a/03-JavaScript/11-JavaScript语法基础:面向对象和内置对象.md b/03-JavaScript/09-面向对象和内置对象.md similarity index 100% rename from 03-JavaScript/11-JavaScript语法基础:面向对象和内置对象.md rename to 03-JavaScript/09-面向对象和内置对象.md diff --git a/03-JavaScript/12-JavaScript基础:DOM操作.md b/03-JavaScript/10-JavaScript基础:DOM操作.md similarity index 100% rename from 03-JavaScript/12-JavaScript基础:DOM操作.md rename to 03-JavaScript/10-JavaScript基础:DOM操作.md diff --git a/03-JavaScript/13-JavaScript基础:事件对象Event和冒泡.md b/03-JavaScript/12-JavaScript基础:事件对象Event和冒泡.md similarity index 100% rename from 03-JavaScript/13-JavaScript基础:事件对象Event和冒泡.md rename to 03-JavaScript/12-JavaScript基础:事件对象Event和冒泡.md diff --git a/03-JavaScript/13-事件委托.md b/03-JavaScript/13-事件委托.md new file mode 100644 index 0000000..9375e37 --- /dev/null +++ b/03-JavaScript/13-事件委托.md @@ -0,0 +1,6 @@ + + +## 事件委托 + + + diff --git a/03-JavaScript(二)/06-作用域和闭包.md b/03-JavaScript(二)/06-作用域和闭包.md new file mode 100644 index 0000000..a545162 --- /dev/null +++ b/03-JavaScript(二)/06-作用域和闭包.md @@ -0,0 +1,337 @@ + + +## 前言 + +面试问题: + +- 说一下对变量提升的理解 + +- 说明this的几种不同的使用场景 + +- 创建10个``标签,点击的时候弹出来对应的序号 + +- 如何理解作用域 + +- 实际开发中闭包的应用 + +涉及到的知识点: + +- 执行上下文 + +- this + +- 作用域 + +- 作用域链 + +- 闭包 + + +## 执行上下文 + +执行上下文主要有两种情况: + +- 全局代码: 一段` + + + + + +``` + +理解: + +- 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外) + + +- 查找变量时就是沿着作用域链来查找的 + +查找一个变量的查找规则: + +```javascript + var a = 1 + + function fn1() { + var b = 2 + + function fn2() { + var c = 3 + console.log(c) + console.log(b) + console.log(a) + console.log(d) + } + fn2() + } + fn1() +``` + + +- 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2 + +- 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3 + +- 再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常 + + + + +## 闭包 + +闭包就是能够读取其他函数内部变量的函数。 + +只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。 + + + +### 如何产生闭包 + +**当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量或函数时, 就产生了闭包。** + +### 闭包到底是什么? + + +> 使用chrome调试查看 + + +理解一: 闭包是嵌套的内部函数(绝大部分人) + +理解二: 包含被引用变量 or 函数的对象(极少数人) + + +注意: 闭包存在于嵌套的内部函数中。 + + +### 产生闭包的条件 + +- 函数嵌套 + +- 内部函数引用了外部函数的数据(变量/函数)。 + +## 常见的闭包 + +- 1. 将函数作为另一个函数的返回值 + +- 2. 将函数作为实参传递给另一个函数调用 + +### 闭包1:将函数作为另一个函数的返回值 + + + + + + + + + + + + + + + + + + diff --git a/11-JavaScript/07-call、apply、bind的区别.md b/03-JavaScript(二)/07-call、apply、bind的区别.md similarity index 100% rename from 11-JavaScript/07-call、apply、bind的区别.md rename to 03-JavaScript(二)/07-call、apply、bind的区别.md diff --git a/11-JavaScript/this.md b/03-JavaScript(二)/this.md similarity index 100% rename from 11-JavaScript/this.md rename to 03-JavaScript(二)/this.md diff --git a/11-JavaScript/严格模式.md b/03-JavaScript(二)/严格模式.md similarity index 100% rename from 11-JavaScript/严格模式.md rename to 03-JavaScript(二)/严格模式.md diff --git a/04-前端基本功:CSS和DOM练习/others/06-作用域和闭包.md b/04-前端基本功:CSS和DOM练习/others/06-作用域和闭包.md deleted file mode 100644 index cadf4b1..0000000 --- a/04-前端基本功:CSS和DOM练习/others/06-作用域和闭包.md +++ /dev/null @@ -1,190 +0,0 @@ - - -## 前言 - -面试问题: - -- 说一下对变量提升的理解 - -- 说明this的几种不同的使用场景 - -- 创建10个``标签,点击的时候弹出来对应的序号 - -- 如何理解作用域 - -- 实际开发中闭包的应用 - -涉及到的知识点: - -- 执行上下文 - -- this - -- 作用域 - -- 作用域链 - -- 闭包 - - -## 执行上下文 - -执行上下文主要有两种情况: - -- 全局代码: 一段` - - - - - -``` - - -## 闭包 - - -闭包就是能够读取其他函数内部变量的函数。 - - -只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。 - - - - - - - - - - - - - - - - - - - - diff --git a/04-前端基本功:CSS和DOM练习/others/23-面试技巧.md b/04-前端基本功:CSS和DOM练习/others/23-面试技巧 by smyhvae.md similarity index 91% rename from 04-前端基本功:CSS和DOM练习/others/23-面试技巧.md rename to 04-前端基本功:CSS和DOM练习/others/23-面试技巧 by smyhvae.md index e76a541..53996a7 100644 --- a/04-前端基本功:CSS和DOM练习/others/23-面试技巧.md +++ b/04-前端基本功:CSS和DOM练习/others/23-面试技巧 by smyhvae.md @@ -54,6 +54,15 @@ +## 薪资 + +面试官;"你要求多少薪资?" + +我:“能给个范围吗?” + + + +