关于JavaScript的闭包、原型链、继承

关于JavaScript的闭包、原型链、继承

对闭包的理解

什么是闭包？
MDN的官方解释：
闭包是函数和声明该函数的词法环境的组合
更通俗一点的解释是：
内层函数, 引用外层函数上的变量, 就可以形成闭包
需求: 定义一个计数器方法, 每次执行一次函数, 就调用一次进行计数

let count = 0
function fn () {
  count++
  console.log('fn函数被调用了' + count + '次')
}
fn()

count 定义成了全局变量, 太容易被别人修改了, 我们可以利用闭包解决
闭包实例：

function fn () {
  let count = 0

  function add () {
    count++
    console.log('fn函数被调用了' + count + '次')
  }

  return add
}
const addFn = fn()
addFn()
addFn()
addFn()

闭包的主要作用是什么？

在实际开发中，闭包最大的作用就是用来 变量私有。
实例：

function Person() {
  // 以 let 声明一个局部变量，而不是 this.name
  // this.name = 'zs'     =>  p.name
  let name = 'hm_programmer' // 数据私有
  
  this.getName = function(){ 
    return name
  }
  
  this.setName = function(value){ 
    name = value
  }
}

// new:
// 1. 创建一个新的对象
// 2. 让构造函数的this指向这个新对象
// 3. 执行构造函数
// 4. 返回实例
const p = new Person()
console.log(p.getName()) // hm_programmer

p.setName('Tom')
console.log(p.getName()) // Tom

p.name // 访问不到 name 变量：undefined

变量 name 只能通过 Person 的实例方法进行访问，外部不能直接通过实例进行访问，形成了一个私有变量。

JavaScript内存泄漏

什么是内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
哪些操作会造成内存泄漏？
1、垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的 引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的 内存即可回收
2、setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
3、闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

JavaScript垃圾回收

JS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收
但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况。
内存的生命周期
JS环境中分配的内存, 一般有如下生命周期：

1. 内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
2. 内存使用：即读写内存，也就是使用变量、函数等
3. 内存回收：使用完毕，由垃圾回收自动回收不再使用的内存
   全局变量一般不会回收, 一般局部变量的的值, 不用了, 会被自动回收掉
   标记清除算法
   现代浏览器通用的大多是基于标记清除算法的某些改进算法，总体思想都是一致的。
   标记清除法:

• 标记清除算法将“不再使用的对象”定义为“无法达到的对象”。
• 简单来说，就是从根部（在JS中就是全局对象）出发定时扫描内存中的对象。
• 凡是能从根部到达的对象，都是还需要使用的。那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。
  从这个概念可以看出，无法触及的对象包含了没有引用的对象这个概念（没有任何引用的对象也是无法触及的对象）。
  根据这个概念，上面的例子可以正确被垃圾回收处理了。

JavaScript 作用域链

JavaScript 在执⾏过程中会创建一个个的可执⾏上下⽂。 (每个函数执行都会创建这么一个可执行上下文)
每个可执⾏上下⽂的词法环境中包含了对外部词法环境的引⽤，可通过该引⽤来获取外部词法环境中的变量和声明等。
这些引⽤串联起来，⼀直指向全局的词法环境，形成一个链式结构，被称为作⽤域链。
简而言之: 函数内部 可以访问到 函数外部作用域的变量, 而外部函数还可以访问到全局作用域的变量,
这样的变量作用域访问的链式结构, 被称之为作用域链
每个可执行上下文, 都有者对于外部上下文词法作用域的引用, 外部上下文也有着对于再外部的上下文词法作用域的引用 ，就形成了作用域链

JavaScript原型链

要讲清楚这个问题，主要着重这几个方面：

• 什么是原型对象
• 构造函数, 原型对象, 实例的三角关系图
• 原型链如何形成
  
  原型对象
  在 JavaScript 中，除去一部分内建函数，绝大多数的函数都会包含有一个叫做 prototype 的属性，指向原型对象，
  基于构造函数创建出来的实例, 都可以共享访问原型对象的属性。
  例如我们的 hasOwnProperty, toString ⽅法等其实是 Obejct 原型对象的方法，它可以被任何对象当做⾃⼰的⽅法来使⽤。
  hasOwnProperty 用于判断, 某个属性, 是不是自己的 (还是原型链上的)
  原型链
  在 JavaScript 中，每个对象中都有一个 proto 属性，这个属性指向了当前对象的构造函数的原型。
  对象可以通过自身的 __proto__属性与它的构造函数的原型对象连接起来，
  而因为它的原型对象也有 proto，因此这样就串联形成一个链式结构，也就是我们称为的原型链。

JavaScript继承

原型继承
原型继承: 通过改造原型链, 利用原型链的语法, 实现继承方法!

组合继承
组合继承有时候也叫伪经典继承，指的是将原型链 和 借用构造函数 call 技术组合到一块，
从而发挥二者之长的一种继承模式，其背后的思路: 是使用原型链实现对原型属性和方法的继承 (主要是方法)，
而通过借用构造函数来实现对实例属性构造的继承。这样既通过在原型上定义方法实现了函数复用，又能保证每个实例都有它的自己的属性。

// 1. 定义Person构造函数
function Person (name, age) {
  this.name = name
  this.age = age
}
Person.prototype.say = function () {
  console.log('人类会说话')
}

// 2. 定义Student构造函数
function Student (name, age, className) {
  Person.call(this, name, age) // 实现构造属性的继承
  this.className = className
}

// 3. 原型继承: 利用原型链, 继承于父级构造函数, 继承原型上的方法
// 语法: 子构造函数.prototype = new 父构造函数()
Student.prototype = new Person()
Student.prototype.study = function() {
  console.log('学生在学习')
}

let stu = new Student('张三', 18, '80期')
stu.say()
console.log(stu)

// 方法通过 原型继承
// 属性通过 父构造函数的.call(this, name, age)

寄生组合继承
student实例上有 name age, 而原型 __proto__上不需要再有这些属性, 所以利用 Object.create 改装下
Object.create(参数对象),

1. Object.create 会创建一个新对象,
2. 并且这个新对象的__proto__ 会指向传入的参数对象

// 1. 定义Person构造函数
function Person (name, age) {
  this.name = name
  this.age = age
}
Person.prototype.say = function () {
  console.log('人类会说话')
}

// 2. 定义Student构造函数
function Student (name, age, className) {
  Person.call(this, name, age)
  this.className = className
}

// 3. 原型继承: 利用原型链, 继承于父级构造函数, 继承原型上的方法
// 语法: 子构造函数.prototype = new 父构造函数()
Student.prototype = Object.create(Person.prototype)
Student.prototype.study = function() {
  console.log('学生在学习')
}

let stu = new Student('张三', 18, '80期')
stu.say()
console.log(stu)


// 总结:
// Object.create() 以参数的对象, 作为新建对象的__proto__属性的值, 返回新建的对象

es6 - class 实现继承 extends

// 继承关键字 => extends
class Person {
  constructor (name, age) {
    this.name = name
    this.age = age
  }
  jump () {
    console.log('会跳')
  }
}

class Teacher extends Person {
  constructor (name, age, lesson) {
    super(name, age) // extends 中, 必须调用 super(), 会触发执行父类的构造函数
    this.lesson = lesson
    console.log('构造函数执行了')
  }
  sayHello () {
    console.log('会打招呼')
  }
}

let teacher1 = new Teacher('zs', 18, '体育')
console.log(teacher1)