js闭包-继承,原型和原型链详解

学习目标

提示：完成对常见面试题的了解,包括,js闭包 es5和es6j继承方式的不同,对构造函数的原型和原型链进行学习

---

一、js闭包概念

概念:在一个函数外部能够访问该函数内部局部变量的函数，称为闭包或者闭包函数

---

二、垃圾回收机制（GC）

1.代码回收规则：

• 全局变量不会被回收。
• 局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁
• 只要被另外一个作用域所引用就不会被回收 (闭包中引用的变量不会被回收)

(1)引用计数法

引用计数法的意思就是每个值被引用的次数，当声明了一个变量，并用一个引用类型的值赋值给改变量，则这个值的引用次数为1,；相反的，如果包含了对这个值引用的变量又取得了另外一个值，则原先的引用值引用次数就减1，当这个值的引用次数为0的时候，说明没有办法再访问这个值了，因此就把所占的内存给回收进来，这样垃圾收集器再次运行的时候，就会释放引用次数为0的这些值。

(2)标记清除法

js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在一个函数中声明一个变量，就将这个变量标记为"进入环境"，从逻辑上讲，永远不能释放进入环境变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为"离开环境"。

三、闭包的使用

1.定时器–>闭包

 //输出5 5 5 5 5
 for (var i = 0; i < 5; i++) {
   setTimeout(() => {
     console.log(i)
   }, 1000)
 }
 // 输出0 1 2 3 4
 for (var i = 0; i < 5; i++) {
   ;(function (i) {
     setTimeout(() => {
       console.log(i)
     }, 1000)
   })(i)
 }

2.循环li–>闭包

let li = document.querySelectorAll('ul li')
for (var i = 0; i < li.length; i++) {
  ;(function () {
    // 循环产生4个局部作用域
    // i=0
    // i=1
    // i=2
    // i=3  在未来都有可能被点击触发，不会被js回收机制 回收
    li[i].onclick = function () {
      console.log(i)
    }
  })(i)
}

3.闭包经典面试题

function fun(n, o) {
  console.log(o)
  return {
    fun: function (m) {
      return fun(m, n)
    },
  }
}
var a = fun(0)
a.fun(1) //fun(1,0);
a.fun(2) //fun(2,0);
a.fun(3) //fun(3,0);
//输出 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)

---

四、es5继承

继承：让一个构造函数去继承另一个构造函数的属性和方法。

1.原型链继承

缺点：由于所有Child实例原型都指向同一个Parent实例, 因此对某个Child实例的父类引用类型变量修改会影响所有的Child实例
在创建子类实例时无法向父类构造传参。

function Dog(name, age) {
  this.name = name
  this.age = age
}
Dog.prototype.say = function () {
  console.log(`hello 我叫${this.name} 我今年${this.age}岁了`)
}
function Taidi() {}
//   修改原型的链条  把自己的原型 指向一个对象，  相当于 继承了这个对
//  只能继承方法 无法进行传参
Taidi.prototype = new Dog('aa')
let dog = new Taidi('小黑', 20)
dog.say()

2.构造函数继承(绑定this)实现继承

缺点：继承不到父类原型上的属性和方法

function Dog(name, age) {
  this.name = name
  this.age = age
  // console.log(this)
}
Dog.prototype.say = function () {
  console.log(`hello 我叫${this.name} 我今年${this.age}岁了`)
}
// let dog = new Dog()
function Taidi(name, age) {
  // 通过构造函数继承只能继承属性--不能继承方法---通过绑定this
  Dog.apply(this, [name, age])
  // Dog.call(this, name);
  // Dog.bind(this)  (name);
}
// Taidi.prototype = new Dog()
let dog = new Taidi('xiaohei', 18)
console.log(dog)
// dog.say() //报错

3.组合继承

同时使用原型链继承和构造函数继承

function Dog(name, age) {
  this.name = name
  this.age = age
}
Dog.prototype.say = function () {
  console.log(`hello 我叫${this.name} 我今年${this.age}岁了`)
}
// let dog = new Dog()
function Taidi(name, age) {
  // 通过构造函数改变this--继承属性
  Dog.apply(this, [name, age])
}
//通过修改原型链
// Taidi.prototype = new Dog()--继承方法
Taidi.prototype = Object.create(Dog.prototype)
// 修正
Taidi.prototype.constructor = Taidi
let dog = new Taidi('xiaohei', 18)
dog.say()

五、es6实现继承

class Parent {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  intro() {
    console.log(this.name)
  }
  // 静态方法的继承
  static test() {
    console.log('foo')
  }
}
class Son extends Parent {
  constructor(name, age) {
    super(name, age) //super创建this,super
    this.sex = '男'
  }
  sonIntro() {
    // this.intro()
    super.intro()    //super指向父类的原型
  }
  static sonTest() {
    super.test()     //super指向父类
  }
}
// let person = new Parent('张三', 18)
// console.log(person.intro())
Son.sonTest()
let man = new Son('李四', 34)

---

六、原型和原型链

明天在写。。。。。