闭包,原型链和继承

闭包,原型链和继承

1.闭包

定义:函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。

作用:内部函数总是可以访问其所在的外部函数中声明的参数和变量

优缺点: 让外部访问函数内部变量成为可能；局部变量会常驻在内存中；可以避免使用全局变量，防止全局变量污染；会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

使用闭包的注意点:由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数，一个闭包 alert(name); // 使用了父函数中声明的变量 } displayName(); } init();

2:原型链和继承

原型链是JS特有的一种继承机制

原型链会涉及到___proto___,prototype

原型链的顶端就是null

应用场景：继承

优点：把相同或类似的方法写在原型上，方便实例化对象复用

缺点：不好理解，通常只前端人才理解

ES6推出class extends来实现继承

也就是说构造函数的prototype属性指向原型,原型的constructor属性指向构造函数,通过构造函数创建的实例化对象的

__proto__属性指向原型,构造函数又是通过function创建出来的实例化对象,所以构造函数的proto属性指向function的原型

而在js中万物皆对象,function的proto指向object的原型,object的proto指向null

3.继承

继承是面向对象开发思想的特性之一

面试对象的三大特点：封装，继承，多态

继承主要分ES5和ES6的继承方式

ES5继承

//原型链继承 //创建一个父类 function Parent() { this.name='jack' } Parent.prototype.getName=function() { return this.name; } //创建一个子类 function Child() { } //子类的原型等于父类的实例化对象 Child.prototype=new Parent(); var c1=new Child() //缺点1.不能传参 2.没有解决对象引用问题 //借用构造函数继承//创建一个父类 function Parent(name) { this.name=name ||'jack' this.colors=['red','green','blue'] } Parent.prototype.getName=function() { return this.name; } //创建一个子类 function Child(name) { //借用父类来承继实例属性，但不能继承父类方法 Person.call(this,name) } //缺点：不能继承父类方法 //组合继承=原型链继承+借用构造函数继承 //创建一个父类 function Parent(name) { this.name=name ||'jack' this.colors=['red','green','blue'] } Parent.prototype.getName=function() { return this.name; } var p1=new Parent(); p1.getName(); //创建一个子类 function Child(name) { Parent.call(this,name) } Child.prototype=new Parent(); var c1=new Child() c1.getName()

ES6继承

//通过class,extends,super实现继承必须要写super //创建一个父类 class Parent { constructor(name) { this.name=name ||'jack' this.colors=['red','green','blue'] } getName() { return this.name; } } //创建一个子类 class Child extends Parent { constructor(name) { super(name) //super就是父类Parent } getValue() { } }