闭包,原型链和继承

闭包,原型链和继承

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() {
  
  
        }
      
  }