JavaScript的常识理解

月亮_六便士
99 阅读8分钟

1. 解释下什么是变量声明提升？

  1. 首先，对代码进行预解析，并获取声明的所有变量
  2. 然后，将这些变量的声明语句统一放到代码的最前面
  3. 最后，开始一行一行运行代码

我们通过一段代码来解释这个运行过程：

console.log(a) 
var a = 1 
function b() { 
  console.log(a) 
}

b() // 1

上⾯这段代码的实际执⾏顺序为:

  • JS引擎将 var a = 1 分解为两个部分：变量声明语句 var a = undefined 和变量赋值语句 a = 1
  • JS引擎将 var a = undefined 放到代码的最前面，而 a = 1 保留在原地
  1. 变量的这一转换过程，就被称为变量的声明提升。
  2. 而这是不规范, 不合理的, 我们用的 let 就没有这个变量提升的问题，当然这是var当时设计的缺陷问题，let出现后就解决了这个问题

2. JS 的参数是以什么方式进行传递的？

基本数据类型和复杂数据类型的数据在传递时，会有不同的表现。

基本类型：是值传递！

let a = 1

function test(x) { 
  x = 10  // 并不会改变实参的值
  console.log(x)
}

test(a) // 10 
console.log(a) // 1

1、基本类型的传递方式比较简单，是按照 值传递 进行的。

2、复杂类型: 传递的是地址! (变量中存的就是地址)

let a = {
  count: 1 
}; 

function test(x) { 
  x = { count: 20 };
  console.log(x); 
}

test(a); // { count: 20 }
console.log(a); // { count: 1 }

案例2

let a = {
  count: 1 
}

function test(x) { 
  x.count = 10
  console.log(x)
}

test(a) // { count: 10 }
console.log(a) // { count: 10 }

从运行结果来看，函数内改变了参数对象内的 count 后，外部的实参对象 a 的内容也跟着改变了，所以传递的是地址。

image.png

image.png

image.png 我们会发现外部的实参对象 a 并没有因为在函数内对形参的重新赋值而被改变！ 因为当我们直接为这个形参变量重新赋值时，其实只是让形参变量指向了别的堆内存地址，而外部实参变量的指向还是不变的。

3. JavaScript垃圾回收是怎么做的？

3.1、了解JS垃圾回收机制。

首先要知道JS内存的分配和回收都是自动完成的。内存在不使用的时候会被垃圾回收器自动回收。正是因为这个特性，我们很多时候不关心内存的管理。像C语言这类底层语言，都是需要手动的回收内存的。高级语言现在都具备内存自动回收。

3.2、内存的生命周期

JS环境中分配的内存, 一般有如下生命周期：

  1. 内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
  2. 内存使用：即读写内存，也就是使用变量、函数等
  3. 内存回收：使用完毕，由垃圾回收自动回收不再使用的内存
  4. 全局变量一般不会回收, 一般局部变量的的值, 不用了, 会被自动回收掉 所谓垃圾回收, 核心思想就是如何判断内存是否已经不再会被使用了, 如果是, 就视为垃圾, 释放掉

3.2 下面介绍两种常见的浏览器垃圾回收算法: 引用计数 和 标记清除法

1 引用计数

// 创建一个对象person, person指向一块内存空间, 该内存空间的引用数 +1
let person = {
    age: 22,
    name: 'ifcode'
}

let p = person   // 两个变量指向一块内存空间, 该内存空间的引用数为 2
person = 1       // 原来的person对象被赋值为1，对象内存空间的引用数-1,
                 // 但因为p指向原person对象，还剩一个对于对象空间的引用, 所以对象它不会被回收

p = null         // 原person对象已经没有引用，会被回收
  1. 由上面可以看出，引用计数算法是个简单有效的算法。
  2. 但它却存在一个致命的问题：循环引用。
  3. 如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄露。
function cycle() {
    let o1 = {}
    let o2 = {}
    o1.a = o2
    o2.a = o1 
    return "Cycle reference!"
}

cycle()

image.png

2 标记清除法

  1. 现代的浏览器已经不再使用引用计数算法了（淘汰了） 2.现代浏览器通用的大多是基于标记清除算法的某些改进算法，总体思想都是一致的。 标记清除法:
  • 标记清除算法将“不再使用的对象”定义为“无法达到的对象”。
  • 简单来说，就是从根部（在JS中就是全局对象）出发定时扫描内存中的对象。
  • 凡是能从根部到达的对象，都是还需要使用的。那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。

从这个概念可以看出，无法触及的对象包含了没有引用的对象这个概念（没有任何引用的对象也是无法触及的对象）。

4. 谈谈你对 JavaScript 作用域链的理解？

自己理解： 函数内访问变量时, 优先使用自己内部声明的变量 如果没有, 尝试访问外部函数作用域的变量如果外部函数作用域也没有这个变量, 继续往外找...直到找到全局, 如果全局都没有, 就报错形参的链式结构，叫作用域链

官方解释：js全局有全局可执行上下文, 每个函数调用时, 有着函数的可执行上下文, 会入js调用栈 每个可执行上下文, 都有者对于外部上下文词法作用域的引用, 外部上下文也有着对于再外部的上下文词法作用域的引用 => 就形成了作用域链

image.png

  let num = 100
  
  function fn () {
    let age = 18

    function inner () {
      // 函数内访问变量时, 优先使用自己内部声明的变量
      // 如果没有, 尝试访问外部函数作用域的变量
      // 如果外部函数作用域也没有这个变量, 继续往外找...
      // 直到找到全局, 如果全局都没有, 就报错
      let count = 100
      console.log(count)
      console.log(age)
      console.log(num)
    }
    inner()
  }

  fn()

5. 谈谈你对闭包的理解？

  1. 闭包: 内部函数, 访问了外部函数的变量, 就可以形成闭包 (常见应用: 实现数据私有)
  2. 在实际开发中，闭包最大的作用就是用来 变量私有。
  3. 注意点: 外部函数中, 一般需要 return 引用 (内存才不会被释放)

闭包实例: 闭包的基本形式:

   function fn () {
    let num = 1
    function inner () {
       num = num + 1
       console.log(num)
     }
     return inner
   }
   let result = fn()
   result()

4. 闭包常常会造成内存泄露，所以防止内存泄露，所以我们手动释放内存

  • js垃圾回收机制中的标记清除来释放内存: 从根部, 全局出发, 访问不到(无法触及)的内存空间, 就会被自动回收
  • result = null
  • // 释放内存, 断开了对于之前内部函数的引用, 对应的缓存的变量内容也会被释放掉
function fn () {
  let count = 0

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

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

6. 谈谈对于继承的理解

继承, 可以让多个构造函数之间建立关联, 便于管理和复用

6.1 继承 - 原型继承

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

<script>
  // 分析需求:
  // ​	人类, 属性: name, age   会说话
  // ​	学生, 属性: name, age, className  会说话
  // ​	工人, 属性: name, age, companyName  会说话

  // 为什么要有继承:
  // 继承: 将多个构造函数, 建立关联, 实现方便管理 和 方便复用

  // 目标: 原型继承 => 继承方法
  // 原型继承: 通过改造原型链实现继承, 利用原型链的特征实现继承

  function Person (name, age) {
    this.name = name
    this.age = age
  }
  Person.prototype.sayHi = function() {
    console.log('会说话')
  }

  function Student (name, age, className) {
    this.name = name
    this.age = age
    this.className = className
  }
  Student.prototype = new Person()

  const stu = new Student('zs', 7, '一年级一班')
  stu.sayHi()
</script>

image.png

6.3 继承 - 寄生组合继承（是对象继承的一种优化）

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

  1. 0. Object.create 会创建一个新对象,
    1. 并且这个新对象的__proto__ 会指向传入的参数对象
<script>
 
  function Person (name, age) {
    this.name = name 
    this.age = age
  }
  Person.prototype.sayHi = function() {
    console.log('会说话')
  }

  function Student (name, age, className) {
    // 不仅要执行Person构造函数, 且要让执行构造函数时的this指向创建出来的实例stu
    // call
    // 1. 调用函数
    // 2. 改变函数执行时的this指向
    Person.call(this, name, age)
    this.className = className
  }
  // 构造函数没有必要执行, 我们只需要的是原型链
  Student.prototype = Object.create(Person.prototype)

  const stu = new Student('zs', 7, '一年级一班')
  stu.sayHi()
  console.log(stu)
</script>

6.2 继承 - 组合继承

合继承有时候也叫伪经典继承，指的是将原型链 和 借用构造函数 call 技术组合到一块，

从而发挥二者之长的一种继承模式，其背后的思路: 是使用原型链实现对原型属性和方法的继承 (主要是方法)，

而通过借用构造函数来实现对实例属性构造的继承。这样既通过在原型上定义方法实现了函数复用，又能保证每个实例都有它的自己的属性。

<script>
  // 组合继承: 两种技术的组合, 原型链技术, 借用构造函数(call)结合, 发挥二者之长, 实现继承的方式
  // 1. 原型链技术: 改造原型链, 实现继承方法
  //    Student.prototype = new Person()
  // 2. 实例属性的构造过程没有得到复用, 可以用借用构造函数的方式, 实现复用
  //    Person.call(this, name, age)

  function Person (name, age) {
    this.name = name 
    this.age = age
  }
  Person.prototype.sayHi = function() {
    console.log('会说话')
  }

  function Student (name, age, className) {
    // 不仅要执行Person构造函数, 且要让执行构造函数时的this指向创建出来的实例stu
    // call
    // 1. 调用函数
    // 2. 改变函数执行时的this指向
    Person.call(this, name, age)
    this.className = className
  }
  Student.prototype = new Person()

  const stu = new Student('zs', 7, '一年级一班')
  stu.sayHi()
  console.log(stu)


</script>

8. 如何判断是否是数组？

方法一：使用 toString 方法

function isArray(arg) {
	return Object.prototype.toString.call(arg) === '[object Array]'
}

let arr = [1,2,3]
isArray(arr)  // true

方法二：使用 ES6 新增的 Array.isArray 方法

let arr = [1,2,3]
Array.isArray(arr) // true

this指向的情况

  1. 函数调用模式 fn() 指向window (默认绑定)
  2. 方法调用模式 obj.fn() 指向调用者 (隐式绑定, 虽然没有刻意的绑定, 但是执行时, 会自动将函数的this指向调用者)
  3. 上下文调用模式 想指向谁就指向谁 (显示绑定, 硬绑定) call apply bind
  • fn.call(this指向的内容, 参数1, 参数2, ...)
  • fn.apply(this指向的内容, [参数1, 参数2, ...])
  • const newFn = fn.bind(this指向的内容)
  1. 构造函数模式 new Person() 指向创建的实例 (new绑定) new四步:
    1. 创建一个新对象
    2. 让构造函数的this, 指向新对象
    3. 执行构造函数
    4. 返回实例 5.箭头函数不同于传统函数，它其实没有属于⾃⼰的 this，
  2. 它所谓的 this 是, 捕获其外层 上下⽂的 this 值作为⾃⼰的 this 值。
  3. 并且由于箭头函数没有属于⾃⼰的 this ，它是不能被 new 调⽤的。

我们可以通过 Babel 转换前后的代码来更清晰的理解箭头函数:

// 转换前的 ES6 代码
const obj = { 
  test() { 
    return () => { 
      console.log(this === obj)
    }
  } 
}

// 转换后的 ES5 代码
var obj = { 
  test: function getArrow() { 
    var that = this
    return function () { 
      console.log(that === obj)
    }
  } 
}
avatar
文章
阅读
粉丝