闭包，原型，继承

闭包

闭包：闭包就是函数嵌套时，将局部变量进化成私有变量的环境，这个环境一般是作用域的嵌套，通俗的来说就是函数里面套函数，将原本要删除的变量，不删除，继续使用。 计算机的垃圾回收机制：不立即删，先放在临时空间内，可以二次或继续使用 特点： 闭包是将函数内部和函数外部连接起来的桥梁 可以读取函数内部的变量 让这些变量的值，始终保存在内存中，不会在调用结束后被系统回收 避免全局变量命名空间的污染 内存消耗很大，不能滥用 闭包会在父函数外部，改变父函数内部变量的值

注：一旦内部函数调用外部函数的局部变量，那么这个时候，这个局部变量就会变成内部函数的私有变量

闭包的应用：

1.循环中的事件，获取计数器的值

var ali = document.querySelectorAll("li"); for(var i=0;i<ali.length;i++){ ali[i].onclick = (function(a){ return function(){ console.log(a); } })(i) }

2.在计时器的回调函数中传参

function fn(str){ return function(){ console.log(str); } } setTimeout(fn("html"), 1000);

利用闭包封装事件委托：

function entrust(achild,cb){ return function(e){ for(var i=0;i<achild.length;i++){ if(achild[i] === e.target){ cb.bind(e.target)(); //改变this指向 } } } }

原型

原型：prototype 隐式原型：proto 实例：new出来的对象 构造函数：构造器，被new的那一方

function Fn(){} function Fun(){} Fun.prototype = new Fn(); var f = new Fn(); var f2 = new Fun(); console.log(Fn.prototype.constructor === Fn); //true console.log(Fn.prototype.constructor === f.__proto__.constructor); //true console.log(f.__proto__.constructor === Fn); //true console.log(Fn.prototype.constructor === f.constructor); //true

Fn：构造函数 Fn.prototype：构造函数的原型 Fn.prototype.constructor：是构造函数的原型内的指向当前原型所在构造函数的属性 f：实例，new构造函数出来的对象，这个对象的父级是构造函数的原型 f.proto：实例的父级

**查看实例对象f是否有指针指向构造函数Fn的原型：**两种使用，如果是返回ture，如果不是返回false **isPrototypeOf()**用于检测两个对象之间似乎否存在这种关系

Fn.prototype.isPrototypeOf(f) // 查看 Fn 的 prototype 对象，是否是 f 原型

instanceof运算符 注意：instanceof运算符右侧为构造函数，并且js中所有原型都来自Object构造函数

console.log(f instanceof Fn) // 查看 f 对象是否是构造函数 Fn 的实例 console.log(f instanceof Object)

继承

只要某个对象使用了另一个对象具有，而自身不具有的功能，就叫继承

构造函数继承：改变this指向继承 只能继承构造函数中this身上的属性和方法，不能继承原型身上的属性和方法

function Parent(n){ this.num = n; this.show = function(){ console.log(this.num); } } Parent.prototype.init = function(){ console.log("hello"); } function Child(n){ //在Child中使用Parent中的方法和属性 // P中的this是将来new出来的p; //强行将P的this指向C的this Parent.call(this,n); //Parent.apply(this,[n]); //Parent.bind(this,n)(); } var p = new Parent(12); p.show(); //12 p.init(); //hello var c = new Child(15); c.show(); //15 c.init(); //报错

原型对象继承：只能继承原型身上的属性和方法，不能继承构造函数中this的属性和方法

function Parent(n){ this.num = 123; this.show = function(){ console.log(this.num); } } Parent.prototype.init = function(){ console.log("hello"); } function Child(n){} //直接将原型作为一个对象复制(浅拷贝) //Child.prototype = Parent.prototype //这里更改会全部都更改,因为对象是浅拷贝的,因此要使用深拷贝,遍历一一对应 //深拷贝 for(var i in Parent.prototype){ Child.prototype[i] = Parent.prototype[i]; } Child.prototype.init = function(){ console.log("html"); } var p = new Parent(12); p.init(); //hello console.log(p.num); //123 var c = new Child(15); c.init(); //html console.log(c.num); //报错

原型链继承：既能继承原型身上的属性和方法，又能继承构造函数中的this的属性和方法，但是不方便传参

function Parent(n){ this.num = n; } Parent.prototype.init = function(){ console.log("hello"); } function Child(n){} Child.prototype = new Parent(15); Child.prototype.init = function(){ console.log("html"); } var p = new Parent(12); p.init(); //hello console.log(p.num); //12 var c = new Child(); c.init(); //html console.log(c.num); //15

混合继承：混合原型继承和构造函数继承，是常用的继承方式之一

function Parent(n){ this.num = n; this.show = function(){ console.log(this.num); } } Parent.prototype.init = function(){ console.log("hello"); } function Child(n){ //构造函数继承 Parent.call(this,n); } //原型继承 for(var i in Parent.prototype){ Child.prototype[i] = Parent.prototype[i]; } Child.prototype.init = function(){ console.log("html"); } var p = new Parent(12); p.init(); //hello console.log(p.num); //12 var c = new Child(15); c.init(); //html console.log(c.num); //15

ES6继承(class继承),混合继承具有改变this指向的特性,原型链继承，是常用继承方式之一

class Parent{ constructor(n) { this.num = n; } init(){ console.log(this.num); } } class Child extends Parent{ constructor(n){ //类似有call,也可以接收参数 super(n); } } var p = new Parent(123); p.init(); var c = new Child(321); c.init();

继承的应用：一个页面有两个元素，都有拖拽，一个有边界限定，一个没有边界限定 注意： 因为利用事件监听绑定和删除事件， 所以得有事件处理函数的名字 因为需要给事件处理函数加名字， 所以要将事件处理函数单独封装 因为单独封装， 所以导致事件处理函数中的this不再指向实例 因为时间处理函数中的this不再指向实例， 所以需要使用bind方法改变this指向 因为bind每次执行会返回新函数， 所以需要提前将要改变this指向的函数使用bind处理好

<style> .box1{width:100px;height:100px;background: red;position: absolute;left:0;top:0;} .box2{width:100px;height:100px;background: blue;position: absolute;left:0;top:130px;} </style> <body> <div class="box1"></div> <div class="box2"></div> </body> <script> class Drag{ constructor(ele){ this.ele = ele; this.m = this.move.bind(this); this.u = this.up.bind(this); this.addEvent(); } addEvent(){ this.ele.addEventListener("mousedown",this.down(this)) } down(that){ return function(e){ that.x = e.offsetX; that.y = e.offsetY; // console.log(that) document.addEventListener("mousemove",that.m) document.addEventListener("mouseup",that.u) } } move(e){ this.ele.style.left = e.clientX - this.x + "px"; this.ele.style.top = e.clientY - this.y + "px"; } up(){ document.removeEventListener("mousemove",this.m) document.removeEventListener("mouseup",this.u) } } class SmallDrag extends Drag{ constructor(ele){ super(ele); } move(e){ var l = e.clientX - this.x; var t = e.clientY - this.y; if(l<0) l=0; if(t<0) t=0; if(l > document.documentElement.clientWidth - this.ele.offsetWidth){ l = document.documentElement.clientWidth - this.ele.offsetWidth } this.ele.style.left = l + "px"; this.ele.style.top = t + "px"; } } var obox1 = document.querySelector(".box1"); var obox2 = document.querySelector(".box2"); new Drag(obox1); new SmallDrag(obox2); </script>