深入探讨JS高级2----函数高级

原型和原型链

当我们在JS中使用构造函数new出一个实例对象时，这个对象上就会有一些方法，比如toString()等，你没有没想过这些方法是哪儿来的？原构造函数上面的？不是，其实它是来自构造函数的原型对象上的，下面我们来看看关于JS原型

1. 函数的prototype属性
   每个函数都存在一个prototype属性，它默认指向一个空的Object实例对象(即称为原型对象)
   原型对象中有一个属性constructor，它执行函数对象
   给原型对象添加属性，函数的所有实例对象自动拥有原型中的属性

2. 显式原型和隐式原型
   每个函数function都有一个prototype，即显式原型属性
   每个实例对象都有一个__proto__,即隐式原型属性
   对象的隐式原型属性的值等于其构造函数的显式原型属性的值这句话非常重要，务必牢记

3. 原型链
   访问一个对象的属性的时候，
   先在自身属性中查找，找到返回
   如果没有，再沿着__proto__这条链向上寻找，找到返回
   如果没有找到，返回undefined
   别名：隐式原型链
   作用：查找对象的属性(方法)

<script type="text/javascript">
		function Fn(){
			this.test1 = function(){
				console.log('test1()')
			}
		}
		
		Fn.prototype.test2 = function(){
			console.log('test2()')
		}
		
		var fn = new Fn()
		
		fn.test1()
		fn.test2()
		console.log(fn.toString())
		fn.test3()
		
		// 1. 函数的显式原型指向的对象默认是空Object实例对象(但Object不满足)
		console.log(Fn.prototype instanceof Object)   //true
		console.log(Object.prototype instanceof Object) //false
		console.log(Function.prototype instanceof Object) //true
		
		//2.所有函数都是Function的实例(包括Function自己)
		console.log(Function.__proto__ === Function.prototype)
		
		//3.Object的原型对象是原型链的尽头
		console.log(Object.prototype.__proto__) //null
	</script>

就上面的代码，我们画一下内存结构图(图是我手画的，画得不好)

我们可以看到当调用对象的属性的时候，会沿着隐式原型链进行查找，test1在原本对象上，可以调用，test2在原型对象上，可以看到，同理toString方法也可以看到
我们需要理解三句话
a. 函数的显式原型指向的对象默认是空Object实例对象(但Object不满足)
所有函数都满足，唯独Object，其函数对象指向的是Object原型对象

b.所有函数都是Function的实例(包括Function自己)
在JS中，函数也被视为对象，那么所有函数对象的构造函数都是Function,包括它自己

c.Object的原型对象是原型链的尽头
在图中，我们可以清晰看到它的隐式原型属性为null

为此我们再看一张图(我把里面的constructor属性省略了，因为加上太乱了)

4. 原型链属性问题
   a.读取对象的属性值时，会自动到原型链中查找
   b.设置对象的属性值时，不会查找原型链，如果当前对象没有此属性，直接添加此属性并设置值
   c.方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

<script type="text/javascript">
		function  Fn(){
			
		}
		Fn.prototype.a = 'xxx'
		var fn1 = new Fn()
		console.log(fn1.a,fn1)
		
		var fn2 = new Fn()
		fn2.a = 'yyy'
		console.log(fn1.a,fn2.a,fn2)
	</script>

5. 探索instanceof
   instanceof是如何判断的？
   表达式：A instanceof B
   如果B函数的显式原型对象在A对象的原型链上，返回true，否则返回false

<script type="text/javascript">
		function Foo(){}
		var f1 = new Foo()
		console.log(f1 instanceof Foo) //true
		console.log(f1 instanceof Object) //true
		
		
		
		console.log(Object instanceof Function) //true
		console.log(Object instanceof Object) //true
		console.log(Function instanceof Function) //true
		console.log(Function instanceof Object) //true
		
		function Fo() {}
		console.log(Object instanceof Fo) //false
	</script>

画图就交给你自己画了，动手画一下吧

6. 分享2个面试题

 <script type="text/javascript">
		// 测试题1
		var A = function(){
			
		}
		A.prototype.n = 1
		
		var b = new A()
		
		A.prototype = {
			n: 2,
			m: 3
		}
		
		var c = new A()
		console.log(b.n,b.m,c.n,c.m) // 1 undefined 2 3
		
		
		
		//测试题2
		var F = function (){
			
		}
		Object.prototype.a = function(){
			console.log('a()')
		}
		Function.prototype.b = function(){
			console.log('b()')
		}
		var f = new F()
		f.a()
		//f.b()
		F.a()
		F.b()
    </script>

第二个自己动手画画吧！自己动手画一次，知识才是你的

执行上下文与执行上下文栈

1. 变量提升与函数提升
   变量声明提升
   通过var定义的变量，在定义语句之前就可以访问，不过值是undefined
   函数声明提升
   通过function声明的函数，在之前就可以直接调用

<script type="text/javascript">
		var a = 3
		function fn(){
			console.log(a)  //undefined
			var a = 4
			//相当于写
			//var a console.log(a) a = 4
		}
		fn()
		
		console.log(b)  //变量提升 undefined
		fn2()  //可调用 函数提升
		//fn3()  不能 变量提升(函数表达式声明不会函数提升)
		
		var b = 3
		function fn2(){
			console.log('fn2()')
		}
		
		var fn3 = function(){
			console.log('fn3()')
		}
	</script>

2. 执行上下文
   在看这个概念之前，我们先来看看代码分类
   代码依据位置进行分类:全局代码 局部代码,以此衍生了两个概念，全局执行上下文，函数执行上下文,他们是对象

a.全局执行上下文
在执行全局代码前将window确定为全局执行上下文
对全局数据进行预处理:
var定义的全局变量===>undefined,添加为window的属性
function声明的全局函数===>赋值，添加为window的方法
this===>赋值给window
然后开始执行全局代码

b.函数执行上下文
在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象(虚拟的，存在于栈中)
对局部数据进行预处理:
形参变量===>赋值(实参)=>添加为执行上下文的属性
arguments=>赋值(实参列表),添加为执行上下文的属性
var定义的局部变量===>undefined，添加为执行上下文的属性
function声明的函数===>赋值，添加为执行上下文的方法
this===>赋值(调用函数的对象)
然后开始执行函数体代码

<script type="text/javascript">
		//全局执行上下文
		console.log(a1,window.a1)
		a2()
		console.log(this)
		
		var a1 = 3
		function a2(){
			console.log('a2()')
		}
		
		
		console.log("--------------")
		//函数执行上下文
		function fn(a1){
			console.log(a1) //2
			console.log(a2)  //undefined
			a3()             //a3()
		    console.log(this) //window 
			console.log(arguments) //伪数组 (2,3)
			
			var a2 = 3
			function a3(){
				console.log('a3()')
			}
		}
		fn(2,3)
	</script>

3. 执行上下文栈
   1.在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象
   2.在全局执行上下文(Window)确定后，将其添加到栈中(压栈)
   3.在函数执行上下文创建后，将其添加到栈中(压栈)
   4.在当前函数执行完后，将栈顶的对象移除(出栈)
   5.当所有的代码执行完后，栈中只剩下Window

<script type="text/javascript">
		                          //1.进入全局执行上下文
		var a = 10
		var bar = function(x){
			var b = 5
			foo(x + b)            //3.进入foo执行上下文
		}
		var foo = function(y){
			var c = 5
			console.log(a + c + y)
		}
		bar(10)                   //2.进入bar函数执行上下文
	</script>

我们看3道面试题

<script type="text/javascript">
		console.log('global begin:' + i)
		var i = 1
		foo(1)
		function foo(i){
			if(i == 4){
				return
			}
		console.log('foo() begin' + i)
		foo(i + 1)
		console.log('foo() end' + i)
		}
		console.log('global end:' + i)
		/*
		global begin:undefined
		foo() begin1
		foo() begin2
		foo() begin3
		foo() end3
		foo() end2
		foo() end1
		global end:1
		*/
		
		//测试题1  先执行变量提升，再执行函数提升
		function a(){}
		var a
		console.log(typeof a)  // 'function'
		
		//测试题2
		if (!(b in window)){ //true
			var b = 1
		}
		console.log(b) //undefined
		
		
		//测试题3 出得他娘的是真的好啊！！！
		var c = 1   //相当于 var c
		function c(c){
			console.log(c)
			var c = 3
		}
		// c = 1  那c肯定不是函数了
		c(2) // 报错 c不是一个函数
	</script>

第一个的栈图，希望对你理解有帮助

作用域与作用域链

1. 理解
   它就是一块"地盘"，一个代码所在的区域,它是静态的(相对于上下文对象)，在编写代码时就确定了
2. 分类
   全局作用域 局部作用域 块级作用域(ES6才有的)
3. 作用
   隔离变量，不同作用域下同名变量不会有冲突
4. 作用域与执行上下文
   1.区别1
   *全局作用域之内，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了，而不是在函数调用时
   *全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建
   *函数执行上下文是在调用函数时，函数体代码执行之前创建
   2.区别2
   *作用域是静态的，只要函数定义好了就一直存在，且不再变化
   *执行上下文是动态的，调用函数时创建，函数调用结束就会自动释放
   3.联系
   *上下文环境(对象)是从属于所在的作用域
   *全局上下文环境 ===> 全局作用域
   *函数上下文环境 ===> 对应的函数作用域
5. 作用域链
   1.理解
   *多个上下级关系的作用域形成的链，它的方向是从上向下的(从内到外)
   *查找变量时就是沿着作用域链来查找的
   2.查找一个变量的查找规则
   *在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入2
   *在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入3
   *再次执行2的相同操作，直到全局作用域，如果还找不到就抛出找不到的异常

闭包

1. 引入
   我们通过一个循环遍历加监听的例子来看看闭包吧

<script type="text/javascript">
		var btns = document.querySelectorAll("button")
		//比for(var i = 0; i < btns.length; i++)这样写效率更高，因为btns是一个伪数组，每次循环它的length属性都要重新计算
		// for(var i = 0,length = btns.length; i < length; i++){
		// 	btns[i].index = i
		// 	btns[i].onclick = function(){
		// 		alert(this.index)
		// 	}
		// }
		
		//利用闭包
		for(var i = 0,length = btns.length; i < length; i++){
			(function(i){
				btns[i].onclick = function(){
					alert(`这是第${i+1}个`);
				}
			})(i)
		}
	</script>

2. 理解闭包

如何产生闭包？
嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量时，就产生闭包

闭包到底是什么？
闭包就是嵌套的内部函数

禅城闭包的条件？
函数嵌套，内部函数引用了外部函数的数据，内部执行函数定义就会产生闭包，不用调用内部函数，但要调用外部函数

<script type="text/javascript">
   	function f1(){
   		var a = 2
   		var b = 'adc'
   		function f2(){
   			console.log(a)
   		}
   	   // f2()
   	}
   	f1()
   </script>

3. 常见的闭包
   a.将函数作为另一个函数的返回值
   b.将函数作为实参传递给另一个函数调用

<script type="text/javascript">
   	//1.将函数作为另一个函数的返回值
   	function fn1(){
   		var a = 2
   		function fn2(){
   			a++
   			console.log(a)
   		}
   		return fn2
   	}
   	var f = fn1()
   	f() //3
   	f() //4
   	
   	
   	//2.将函数作为实参传递给另一个函数调用
   	function showDelay(msg,time){
   		setTimeout(function(){
   			alert(msg)
   		},time)
   	}
   	showDelay('cxq',1000)
   </script>

4. 闭包的作用

问题：
1.函数执行完后，函数内部声明的局部变量是否还存在？
一般是不会存在的，存在于闭包中的变量才可能存在

2.在函数外部能直接访问函数内部的局部变量吗？
不能，但我们可以通过闭包让外部操作它

a.使用函数内部的变量在函数执行完后，仍然存活在内存中
b.让函数外部可以操作(读/写)到函数内的数据(变量/函数)

5. 闭包的生命周期

1.产生：在嵌套内部函数定义执行完时就产生了(不是在调用)
2.死亡：在嵌套的内部函数成为垃圾对象时

<script type="text/javascript">
		function fn1(){
			//此时闭包就已经产生了(函数提升，内部函数对象已经创建了)
			var a = 2
			function fn2(){
				a++
				console.log(a)
			}
			return fn2
		}
		var f = fn1()
		f() //3
		f() //4
		f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)
	</script>

6. 闭包的应用

自定义JS模块
a.模块是什么?
具有特定功能的JS文件
将所有的数据和功能都封装在一个函数内部
只向外暴露一个包含n个方法的对象或者函数
模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能
两种方式定义模块(普通和IIFE)

普通

function myMoudle(){
	//私有数据
	var msg = 'My name'
	//操作数据的函数
	function doSomething() {
		console.log('doSomething()' + msg.toUpperCase())
	}
	function doOtherthing(){
		console.log('doOtherthing' + msg.toLowerCase())
	}
	
	//向外暴露对象(给外部函数使用的方法)
	return{
		doSomething: doSomething,
		doOtherthing: doOtherthing
	}
}

<script src="myMoudle.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		var moudle = myMoudle()
		moudle.doSomething()
</script>

IIFE

(function(window){
	//私有数据
	var msg = 'My name'
	//操作数据的函数
	function doSomething() {
		console.log('doSomething()' + msg.toUpperCase())
	}
	function doOtherthing(){
		console.log('doOtherthing' + msg.toLowerCase())
	}
	
	//向外暴露对象(给外部函数使用的方法)
	window.myMoudle2 = {
		doSomething: doSomething,
		doOtherthing: doOtherthing
	}
})(window)

<script src="myMoudle2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		myMoudle2.doOtherthing()
		myMoudle2.doSomething()
</script>

7. 闭包的缺点和解决

我们先了解两个概念：内存溢出和内存泄露

内存溢出
一种程序运行出现的错误
当程序运行需要的内存超过了剩余的内存时，就抛出内存溢出的错误

内存泄露
占用内存，没有及时释放
内存泄露积累多了就容易导致内存溢出
常见的内存泄露：
意外的全局变量 没有及时清理的计时器 闭包未释放

缺点:
函数执行完后，函数内的局部变量没有释放，占用内存时间会变长
容易造成内存泄露
解决:
能不用闭包就不用
即时释放

<script type="text/javascript">
		function fn1(){
			var arr = new Array[100000]
			function fn2(){
				console.log(arr.length)
			}
			return fn2
		}
		var f = fn1()
		f()
		
		f = null //让内部函数成为垃圾对象 ----> 回收闭包
	</script>

8. 面试题

<script type="text/javascript">
		//1
		var name = 'The Window'
		var object = {
			name: 'My Object',
			getNameFunc: function(){
				return function(){
					return this.name
				}
			}
		}
		alert(object.getNameFunc()()) // The Window
		
		//2
		var name2 = 'The Window'
		var object2 = {
			name2: 'My Object',
			getNameFunc: function(){
				var that = this
				return function(){
					return that.name2
				}
			}
		}
		alert(object2.getNameFunc()()) //My Object
</script>

这个应该不难理解，就是this的绑定问题，第一个返回的函数通过window对象调用的，所以this指向window，第二个保存了第一次调用this的值，指向的是object2这个对象

<script type="text/javascript">
		function fun(n,o){
			console.log(o)
			return {
				fun: function(m){
					return fun(m,n)
				}
			}
		}
		var a = fun(0)
		a.fun(1)
		a.fun(2)
		a.fun(3)  //undefined 0 0 0
		var b = fun(0).fun(1).fun(2).fun(3) //undefined 0 1 2
		var c = fun(0).fun(1)
		c.fun(2)
		c.fun(3) //undefined 0 1 1
</script>

这道题挺过分的，它考察的就是那个闭包变量的值，就是o,而o是n赋值的，n是m赋值的,关键在于它的调用有没有产生新的闭包，如果没产生新的闭包，那么原来产生闭包的变量的值不会改变
好了，我的分享就到这里了，谢谢大家