闭包和继承

闭包

       闭包就是能够读取其他函数内部变量的函数。在JS中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解为”定义在一个函数内部的函数”。
例如：

function fn() {
     var b = 1;

     //闭包
     function box() {
          //
          console.log(b);
     }

     //返回一个函数，这个函数就是一个闭包
     return box;

}

//res 就是 box 函数
var res = fn();

//2秒以后调用res函数，还是能打印b的值,闭包能让局部变量常驻内存
setTimeout(function() {
     res();

}, 2000);

闭包的特点：
       1：可以读取函数内部的变量。变量的作用域无非就是两种：全局变量和局部变量。JS语言的特殊之处，就在于函数内部可以直接读取全局变量。另一方面，函数外部自然无法读取函数内的局部变量。
       2：让这些变量的值始终保存在内存中。
闭包的应用场景：
       1：函数作为返回值。经典代码如下：

function box() {

     var n = 1; //
     function cox() {
          n++;
          return n;
     }

     return cox;

}
//res 就是一个闭包 ，n像是一个全局变量
var res = box();

console.log(res()); //2
console.log(res()); //3

       2：函数作为参数被传递，即回调函数。

继承

       继承的方法有多种，ES5和ES6都有不同的继承方法。ES5继承有构造函数继承、call/apply方法和继承、prototype原型和原型链继承以及混合继承；ES6继承为class函数。

构造函数继承

       本质是在子类中，调用父类构造函数，从而让子类拥有父类的属性和方法。示例代码如下：

<script type="text/javascript">
			//继承第一种方式
			function Parent(username){
				this.username = username;
				this.hello = function(){
					alert(this.username);
				}
			}
			function Child(username,password){
				//通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承
				//第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对象,
				//第二步:执行this.method方法,即执行Parent所指向的对象函数
				//第三步:销毁this.method属性,即此时Child就已经拥有了Parent的所有属性和方法
				this.method = Parent;
				this.method(username);//最关键的一行
				delete this.method;
				
				this.password = password;
				this.world = function(){
					alert(this.password);
				}
			}
			var parent = new Parent("zhangsan");
			var child = new Child("lisi","123456");
			parent.hello();
			child.hello();
			child.world();
</script>

call/apply方法和继承

       all和apply都是为了改变某个函数运行时的context即上下文而存在的，换句话说，就是为了改变函数内部this的指向。二者作用完全一样，只是接受参数的方式不太一样。注意：调用函数的call或者apply方法相当于是调用函数。
fn.call(obj, arg1, arg2 [, argN]);
call方法是Function类中的方法
       call方法的第一个参数的值赋值给类(即方法)中出现的this；
       call方法的第二个参数开始依次赋值给类(即方法)所接受的参数。
fn.apply(obj, [arg1, arg2,…, argN]);
apply以数组的形式传参，call是以列表的形式。
apply方法接受2个参数，
       A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this；
       B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数。
继承直接放代码：

<script type="text/javascript">
		//实现继承
		function Parent(username){
			this.username = username;
			this.hello = function(){
				alert(this.username);
			}
		}
		function Child(username,password){
			//Parent.call(this,username);
			Parent.apply(this,[username]);
			
			this.password = password;
			this.world = function(){
				alert(this.password);
			}
		}
		var parent = new Parent("zhangsan");
		var child = new Child("lisi","123456");
		parent.hello();
		child.hello();
		child.world();
		
		
		//实现继承
		
</script>

prototype原型及原型链继承

       每一个构造函数都有一个prototype属性，这个属性会在生成实例的时候，成为实例对象的原型对象。
       JS的每个对象都继承另一个对象，后者称为“原型”（prototype）对象。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。null也可以充当原型，区别在于它没有自己的原型对象。
       JS 继承机制的设计就是，原型的所有属性和方法，都能被子对象共享。
       原型对象的作用，就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因，而实例对象可以视作从原型对象衍生出来的子对象。
       对象的属性和方法，有可能定义在自身，也有可能定义在它的原型对象。由于原型本身也是对象，又有自己的原型，所以形成了一条原型链。比如，a对象是b对象的原型，b对象是c对象的原型，以此类推。
       如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。那么，Object.prototype对象有没有它的原型呢？回答是有的，就是没有任何属性和方法的null对象，而null对象没有自己的原型。
       “原型链”的作用是，读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。
       将一个构造函数的原型指向另一个构造函数的实例对象来实现继承。代码如下：

<script type="text/javascript">
	function Box(){   //Box构造
			this.name = 'Lee';
		}
		function Desk(){   //Desk构造
			this.age = 100;
		}
		Desk.prototype = new Box();  //Desk继承了Box,通过原型,形成链条
		var desk = new Desk();
		alert(desk.age);
		alert(desk.name);   //得到被继承的属性
</script>

混合继承

       结合使用原型链与构造函数继承 。

<script type="text/javascript">
		function Box(age){
			this.name = 'Lee'
			this.age = age;
		}
		
		Box.prototype.run = function(){
			return this.name + this.age;
		};
		
		function Desk(age){
			Box.call(this,age); //构造函数继承了name和age属性
		}
		
		Desk.prototype = new Box();//原型链继承 run方法
		
		var desk = new Desk(100);
		alert(desk.run());
</script>

class继承

       Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链（在后面章节会讲解）实现继承，要清晰和方便很多。

class Point {}
class ColorPoint extends Point {}

       上面代码定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Point类。下面，我们在ColorPoint内部加上代码。

class ColorPoint extends Point {
	 constructor(x, y, color) {
 	 super(x, y); // 调用父类的constructor(x, y)
 	this.color = color;
	 }

  	toString() {
  	  return this.color + ' ' + super.toString(); // 调用父类的toString()
	}
}

       上面代码中，constructor方法和toString方法之中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。ES6 要求，子类的构造函数必须执行一次super函数。
       子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

class Point { /* ... */ }

class ColorPoint extends Point {
		constructor() {
		}
}

let cp = new ColorPoint(); // ReferenceError

       上面代码中，ColorPoint继承了父类Point，但是它的构造函数没有调用super方法，导致新建实例时报错。
       需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }}

class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正确
  }
}

       上面代码中，子类的constructor方法没有调用super之前，就使用this关键字，结果报错，而放在super方法之后就是正确的。