modify:作用域和闭包
This commit is contained in:
		
							parent
							
								
									de04dd0107
								
							
						
					
					
						commit
						aa288a99d9
					
				@ -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
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
如果我们在
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										6
									
								
								03-JavaScript/13-事件委托.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										6
									
								
								03-JavaScript/13-事件委托.md
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,6 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## 事件委托
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										337
									
								
								03-JavaScript(二)/06-作用域和闭包.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										337
									
								
								03-JavaScript(二)/06-作用域和闭包.md
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,337 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## 前言
 | 
			
		||||
 | 
			
		||||
面试问题:
 | 
			
		||||
 | 
			
		||||
- 说一下对变量提升的理解
 | 
			
		||||
 | 
			
		||||
- 说明this的几种不同的使用场景
 | 
			
		||||
 | 
			
		||||
- 创建10个`<a>`标签,点击的时候弹出来对应的序号
 | 
			
		||||
 | 
			
		||||
- 如何理解作用域
 | 
			
		||||
 | 
			
		||||
- 实际开发中闭包的应用
 | 
			
		||||
 | 
			
		||||
涉及到的知识点:
 | 
			
		||||
 | 
			
		||||
- 执行上下文
 | 
			
		||||
 | 
			
		||||
- this
 | 
			
		||||
 | 
			
		||||
- 作用域
 | 
			
		||||
 | 
			
		||||
- 作用域链
 | 
			
		||||
 | 
			
		||||
- 闭包
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## 执行上下文
 | 
			
		||||
 | 
			
		||||
执行上下文主要有两种情况:
 | 
			
		||||
 | 
			
		||||
- 全局代码: 一段`<script>`标签里,有一个全局的执行上下文。所做的事情是:变量定义、函数声明
 | 
			
		||||
 | 
			
		||||
- 函数代码:每个函数里有一个上下文。所做的事情是:变量定义、函数声明、this、arguments
 | 
			
		||||
 | 
			
		||||
PS:注意“函数声明”和“函数表达式”的区别。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 全局执行上下文
 | 
			
		||||
 | 
			
		||||
在执行全局代码前将window确定为全局执行上下文。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
(1)对全局数据进行预处理:(并没有赋值)
 | 
			
		||||
 | 
			
		||||
- var定义的全局变量==>undefined, 添加为window的属性
 | 
			
		||||
 | 
			
		||||
- function声明的全局函数==>赋值(fun), 添加为window的方法
 | 
			
		||||
 | 
			
		||||
- this==>赋值(window)
 | 
			
		||||
 | 
			
		||||
(2)开始执行全局代码
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||

 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 函数执行上下文
 | 
			
		||||
 | 
			
		||||
在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中)。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
(1)对局部数据进行预处理:
 | 
			
		||||
 | 
			
		||||
- 形参变量==>赋值(实参)==>添加为执行上下文的属性
 | 
			
		||||
 | 
			
		||||
- arguments==>赋值(实参列表), 添加为执行上下文的属性
 | 
			
		||||
 | 
			
		||||
- var定义的局部变量==>undefined, 添加为执行上下文的属性
 | 
			
		||||
 | 
			
		||||
- function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
 | 
			
		||||
 | 
			
		||||
- this==>赋值(调用函数的对象)
 | 
			
		||||
 | 
			
		||||
(2)开始执行函数体代码
 | 
			
		||||
 | 
			
		||||
### 执行上下文栈
 | 
			
		||||
 | 
			
		||||
- 1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
 | 
			
		||||
 | 
			
		||||
- 2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
 | 
			
		||||
 | 
			
		||||
- 3. 在函数执行上下文创建后, 将其添加到栈中(压栈)
 | 
			
		||||
 | 
			
		||||
- 4. 在当前函数执行完后,将栈顶的对象移除(出栈)
 | 
			
		||||
 | 
			
		||||
- 5. 当所有的代码执行完后, 栈中只剩下window
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## this
 | 
			
		||||
 | 
			
		||||
this指的是,**调用函数的那个对象**。
 | 
			
		||||
 | 
			
		||||
需要特别提醒的是:this的指向在函数定义时无法确认,只有函数执行时才能确定。
 | 
			
		||||
 | 
			
		||||

 | 
			
		||||
 | 
			
		||||
this的几种场景:
 | 
			
		||||
 | 
			
		||||
- 1、作为构造函数执行
 | 
			
		||||
 | 
			
		||||
例如:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
    function Foo(name) {
 | 
			
		||||
        //this = {};
 | 
			
		||||
        this.name = name;
 | 
			
		||||
        //return this;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    var foo = new Foo();
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
- 2、作为对象的属性执行
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
    var obj = {
 | 
			
		||||
        name: 'A',
 | 
			
		||||
        printName: function () {
 | 
			
		||||
            console.log(this.name);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    obj.printName();
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
- 3、作为普通函数执行
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
    function fn() {
 | 
			
		||||
        console.log(this); //this === window
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    fn();
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
- 4、call apply bind
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## 作用域
 | 
			
		||||
 | 
			
		||||
它是静态的(相对于上下文对象), 在编写代码时就确定了
 | 
			
		||||
 | 
			
		||||
作用域的分类:
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
- 全局作用域
 | 
			
		||||
 | 
			
		||||
- 函数作用域
 | 
			
		||||
 | 
			
		||||
- 没有块作用域(ES6有了)
 | 
			
		||||
 | 
			
		||||
作用:隔离变量,不同作用域下同名变量不会有冲突
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
if (true) {
 | 
			
		||||
	var name = 'smyhvae';
 | 
			
		||||
}
 | 
			
		||||
console.log(name);
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
上方代码中,并不会报错,因为:虽然 name 是在块里面定义的,但是 name 是全局变量。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 作用域与执行上下文的区别
 | 
			
		||||
 | 
			
		||||
区别1:
 | 
			
		||||
 | 
			
		||||
- 全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了。而不是在函数调用时
 | 
			
		||||
 | 
			
		||||
- 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
 | 
			
		||||
 | 
			
		||||
- 函数执行上下文是在调用函数时, 函数体代码执行之前创建
 | 
			
		||||
 | 
			
		||||
区别2:
 | 
			
		||||
 | 
			
		||||
- 作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
 | 
			
		||||
 | 
			
		||||
- 执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放
 | 
			
		||||
 | 
			
		||||
联系:
 | 
			
		||||
 | 
			
		||||
  * 执行上下文(对象)是从属于所在的作用域
 | 
			
		||||
 | 
			
		||||
  * 全局上下文环境==>全局作用域
 | 
			
		||||
 | 
			
		||||
  * 函数上下文环境==>对应的函数使用域
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 作用域链
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
外部函数定义的变量可以被内部函数所使用,反之则不行。
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
<head>
 | 
			
		||||
    <meta charset="UTF-8">
 | 
			
		||||
    <title>Title</title>
 | 
			
		||||
    <script>
 | 
			
		||||
        //只要是函数就可以创造作用域
 | 
			
		||||
        //函数中又可以再创建函数
 | 
			
		||||
        //函数内部的作用域可以访问函数外部的作用域
 | 
			
		||||
        //如果有多个函数嵌套,那么就会构成一个链式访问结构,这就是作用域链
 | 
			
		||||
 | 
			
		||||
        //f1--->全局
 | 
			
		||||
        function f1(){
 | 
			
		||||
            //f2--->f1--->全局
 | 
			
		||||
            function f2(){
 | 
			
		||||
                //f3---->f2--->f1--->全局
 | 
			
		||||
                function f3(){
 | 
			
		||||
                }
 | 
			
		||||
                //f4--->f2--->f1---->全局
 | 
			
		||||
                function f4(){
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
            //f5--->f1---->全局
 | 
			
		||||
            function f5(){
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
    </script>
 | 
			
		||||
</head>
 | 
			
		||||
<body>
 | 
			
		||||
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
理解:
 | 
			
		||||
 | 
			
		||||
- 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
- 查找变量时就是沿着作用域链来查找的
 | 
			
		||||
 | 
			
		||||
查找一个变量的查找规则:
 | 
			
		||||
 | 
			
		||||
```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:将函数作为另一个函数的返回值
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1,190 +0,0 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## 前言
 | 
			
		||||
 | 
			
		||||
面试问题:
 | 
			
		||||
 | 
			
		||||
- 说一下对变量提升的理解
 | 
			
		||||
 | 
			
		||||
- 说明this的几种不同的使用场景
 | 
			
		||||
 | 
			
		||||
- 创建10个`<a>`标签,点击的时候弹出来对应的序号
 | 
			
		||||
 | 
			
		||||
- 如何理解作用域
 | 
			
		||||
 | 
			
		||||
- 实际开发中闭包的应用
 | 
			
		||||
 | 
			
		||||
涉及到的知识点:
 | 
			
		||||
 | 
			
		||||
- 执行上下文
 | 
			
		||||
 | 
			
		||||
- this
 | 
			
		||||
 | 
			
		||||
- 作用域
 | 
			
		||||
 | 
			
		||||
- 作用域链
 | 
			
		||||
 | 
			
		||||
- 闭包
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## 执行上下文
 | 
			
		||||
 | 
			
		||||
执行上下文主要有两种情况:
 | 
			
		||||
 | 
			
		||||
- 全局代码: 一段`<script>`标签里,有一个全局的执行上下文。所做的事情是:变量定义、函数声明
 | 
			
		||||
 | 
			
		||||
- 函数代码:每个函数里有一个上下文。所做的事情是:变量定义、函数声明、this、arguments
 | 
			
		||||
 | 
			
		||||
PS:注意“函数声明”和“函数表达式”的区别。
 | 
			
		||||
 | 
			
		||||
先说全局的上下文:在执行代码之前,会先把所有的变量定义和函数声明拿出来(先拿出来放着,不急着赋值)。
 | 
			
		||||
 | 
			
		||||

 | 
			
		||||
 | 
			
		||||
## this
 | 
			
		||||
 | 
			
		||||
this指的是,**调用函数的那个对象**。
 | 
			
		||||
 | 
			
		||||
需要特别提醒的是:this的指向在函数定义时无法确认,只有函数执行时才能确定。
 | 
			
		||||
 | 
			
		||||

 | 
			
		||||
 | 
			
		||||
this的几种场景:
 | 
			
		||||
 | 
			
		||||
- 1、作为构造函数执行
 | 
			
		||||
 | 
			
		||||
例如:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
    function Foo(name) {
 | 
			
		||||
        //this = {};
 | 
			
		||||
        this.name = name;
 | 
			
		||||
        //return this;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    var foo = new Foo();
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
- 2、作为对象属性执行
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
    var obj = {
 | 
			
		||||
        name: 'A',
 | 
			
		||||
        printName: function () {
 | 
			
		||||
            console.log(this.name);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    obj.printName();
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
- 3、作为普通函数执行
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
    function fn() {
 | 
			
		||||
        console.log(this); //this === window
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    fn();
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
- 4、call apply bind
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## 作用域和作用域链
 | 
			
		||||
 | 
			
		||||
### 作用域
 | 
			
		||||
 | 
			
		||||
- **没有块级作用域**。
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
if (true) {
 | 
			
		||||
	var name = 'smyhvae';
 | 
			
		||||
}
 | 
			
		||||
console.log(name);
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
上方代码中,并不会报错,因为:虽然 name 是在块里面定义的,但是 name 是全局变量。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
- 只有全局作用域和函数作用域。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 作用域链
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
外部函数定义的变量可以被内部函数所使用,反之则不行。
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
<head>
 | 
			
		||||
    <meta charset="UTF-8">
 | 
			
		||||
    <title>Title</title>
 | 
			
		||||
    <script>
 | 
			
		||||
        //只要是函数就可以创造作用域
 | 
			
		||||
        //函数中又可以再创建函数
 | 
			
		||||
        //函数内部的作用域可以访问函数外部的作用域
 | 
			
		||||
        //如果有多个函数嵌套,那么就会构成一个链式访问结构,这就是作用域链
 | 
			
		||||
 | 
			
		||||
        //f1--->全局
 | 
			
		||||
        function f1(){
 | 
			
		||||
            //f2--->f1--->全局
 | 
			
		||||
            function f2(){
 | 
			
		||||
                //f3---->f2--->f1--->全局
 | 
			
		||||
                function f3(){
 | 
			
		||||
                }
 | 
			
		||||
                //f4--->f2--->f1---->全局
 | 
			
		||||
                function f4(){
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
            //f5--->f1---->全局
 | 
			
		||||
            function f5(){
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
    </script>
 | 
			
		||||
</head>
 | 
			
		||||
<body>
 | 
			
		||||
 | 
			
		||||
</body>
 | 
			
		||||
</html>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## 闭包
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
闭包就是能够读取其他函数内部变量的函数。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -54,6 +54,15 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
##  薪资
 | 
			
		||||
 | 
			
		||||
面试官;"你要求多少薪资?"
 | 
			
		||||
 | 
			
		||||
我:“能给个范围吗?”
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user