JS难点整理笔记

2023年9月30日 192次阅读 来源: tiancai啊呆

关于作用域及作用域链

首先我们需要知道一些基本概念。

  • 每一个执行环境关联了一个变量对象。环境中定义的所有变量和函数都保存在这个对象中。 全局执行环境关联的变量对象被认为是window对象，因此所有的全局变量和函数都作为window对象的属性和方法创建的。
  • 如果执行环境是函数，则将其活动对象作为变量对象。
  • 当函数调用时，该函数的执行环境被压入一个环境栈中。而在函数执行之后，该函数的执行环境弹出，把控制权交给之前的执行环境。
  • 执行环境有一个内部scope属性，表示作用域链。作用域链的第0位始终是当前执行环境的变量对象，第一位是父级执行环境的变量对象，一直延伸到全局执行环境（始终是作用域链的最后一位）。

关于闭包

  • 闭包就是能够读取其他函数内部变量的函数。
  • 用途：读取其他函数内部变量，并使变量的值始终保持在内存中。
  • 缺点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题。
  • 本质：父函数执行结束之后，父函数的执行环境会被弹出环境栈，但与之关联的变量对象依然保存在内存中，并未被销毁（因为它在子函数的作用域链中）

关于原型及原型链

  • 所有对象都有自己的原型对象，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”。
    所有对象的原型最终都可以上溯到Object.prototype，Object.prototype的原型是null。
  • 读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。
  • 每个函数都有一个prototype属性，指向一个对象。对于普通函数来说，该属性基本无用。
    对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。
  • 每个对象都有_proto_属性，指向自己的原型对象。由于这个属性不标准，因此一般不提倡使用。
  • 原型对象的所有属性和方法，都能被实例对象共享。
function Cat(name, color) {
    this.name = name;
    this.color = color;
}
var cat1 = new Cat('大毛', '白色');
console.log(Object.getPrototypeOf(cat1) === Cat.prototype)   //true
console.log(Object.getPrototypeOf(Cat.prototype) === Object.prototype)  //true
console.log(Object.getPrototypeOf(Cat) === Function.prototype)         //true
console.log(Object.getPrototypeOf(Function.prototype) === Object.prototype)  //true
//实例对象cat1的原型链为：Cat.prototype => Object.prototype => null
// Cat也是对象，它的原型链为： Function.prototype => Object.prototype => null

var o = {
    name: 'liming',
    age: 23
}
console.log(Object.getPrototypeOf(o) === Object.prototype)   //true
//实例对象o的原型链为： Object.prototype => null

关于继承

  1. 原型链继承
function Animal(name) {
    this.name = name || 'animal';
    this.sleep = function () {
        console.log(this.name + '正在sleeping！');
    }
}
Animal.prototype.eat = function (food) {
    console.log(this.name + '正在吃：' + food);
};

function Dog() {
    this.age = 4
    this.sayAge = function () {
        console.log('age is ' + this.age);
    }
}
Dog.prototype = new Animal( '二狗')

var dog = new Dog()
console.log(dog.age)             //4
console.log(dog.sayAge())       //age is 4
console.log(dog.name)           //二狗
console.log(dog.sleep())        //二狗正在sleeping！
console.log(dog.eat('骨头'))    //二狗正在吃：骨头
console.log(dog instanceof Dog)    //true
console.log(dog instanceof Animal)  //true
console.log(dog instanceof Object)   //true
  • 实现：将父类的实例作为子类的原型
  • 缺点：创建子类实例时，无法向父类构造函数传参；当父类构造函数中存在引用类型的值，该值会被所有子类实例所共享。
  • 优点：简单，易于实现。
  1. 构造函数继承
function Dog() {
    Animal.call(this, '二狗')
}
var dog = new Dog()
console.log(dog.name)    //二狗
console.log(dog.sleep())     //二狗正在sleeping！
console.log(dog instanceof Dog)     //true
console.log(dog instanceof Animal)  //false
console.log(dog instanceof Object)   //true
  • 实现：在子类构造函数中调用父类构造函数。
  • 缺点：无法继承父类原型的方法与属性。
  • 优点：可以向父类构造函数传参，当父类构造函数中存在引用类型的值，不会被所有子类实例所共享。
  1. 组合继承
function Dog() {
    Animal.call(this, '二狗')
}
Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

var dog = new Dog()
console.log(dog.name)    //二狗
console.log(dog.sleep())   //二狗正在sleeping！
console.log(dog.eat('骨头'))  //二狗正在吃：骨头
console.log(dog instanceof Dog)    //true
console.log(dog instanceof Animal)  //true
console.log(dog instanceof Object)   //true

特点：组合继承避免了原型链继承和构造函数继承的缺陷，融合了他们的优点，成为最常用的继承模式。
使用原型链实现对原型属性和方法的继承，通过构造函数实现对实例属性和方法的继承。
缺点：调用两次父类构造函数，子类实例对象的原型会有父类的实例属性。

  1. 寄生式继承
var clone = Object.create(new Animal('二狗'))
clone.age = 4
clone.sayAge = function () {
    console.log('age is ' + this.age);
}
console.log(clone.age)    //4
console.log(clone.sayAge())      //age is 4
console.log(clone.name)    //二狗
console.log(clone.sleep())      //二狗正在sleeping！
console.log(clone.eat('骨头'))       //二狗正在吃：骨头
console.log(clone instanceof Animal)     //true
console.log(clone instanceof Object)     //true

特点：以一个对象为原型，创建一个新对象，然后对新对象进行增强，返回新对象。

  1. 寄生组合继承
function Dog() {
    Animal.call(this, '二狗')
    this.age = 4
    this.sayAge = function () {
        console.log('age is ' + this.age);
    }
}

var clone = Object.create(Animal.prototype)
Dog.prototype = clone
Dog.prototype.constructor = Dog
var dog = new Dog()
dog.colors.push('black')
console.log(dog.age)     //4
console.log(dog.sayAge())  //age is 4
console.log(dog.name)    //二狗
console.log(dog.sleep())    //二狗正在sleeping！
console.log(dog.eat('骨头'))    //二狗正在吃：骨头
console.log(dog instanceof Dog)    //true
console.log(dog instanceof Animal)  //true
console.log(dog instanceof Object)   //true
  • 特点：解决了组合继承的缺点。

关于this

简单说，this就是属性或方法“当前”所在的对象，指向是可变的。

  • 全局环境使用this，它指的就是顶层对象window。
  • 构造函数中的this，指的是实例对象。
  • 如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。

注意点：

  • 避免多层 this，切勿在函数中包含多层的this。
  • 避免数组处理方法中的 this
  • 避免回调函数中的 this

固定this值

  • call() 第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。
  • apply() 与call方法类似，区别是它接收一个数组作为函数执行时的参数。
  • bind() 将函数体内的this绑定到某个对象，然后返回一个新函数。参数就是所要绑定this的对象，及函数调用时所需的参数。每运行一次，就返回一个新函数。
  • 如果第一个参数为空、null和undefined，则默认传入全局对象。以上三个方法定义在Function.prototype上，所以任何函数都具有这三个方法。

关于执行机制

看了网上很多资料，讲的都大同小异，我按照自己的理解整理了一下，欢迎纠错。

  • js是单线程语言，同步任务会按行执行，异步任务会进入Event Table并注册函数，当指定的事情完成时，Event Table会将这个函数移入Event Queue。
  • 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
  • Event Queue分为宏任务队列（script，定时器等）与微任务队列（promise，process.nextTick等），先执行微任务队列，在执行宏任务队列，每个队列均遵守先进先出的原则。
  • 上述过程会不断重复。
console.log("1")
setTimeout(function() {
  console.log("2")
  process.nextTick(function() {
    console.log("3")
  })
  new Promise(function(resolve) {
    console.log("4")
    resolve()
  }).then(function() {
    console.log("5")
  })
})
process.nextTick(function() {
  console.log("6")
})
new Promise(function(resolve) {
  console.log("7")
  resolve()
}).then(function() {
  console.log("8")
})

setTimeout(function() {
  console.log("9")
  process.nextTick(function() {
    console.log("10")
  })
  new Promise(function(resolve) {
    console.log("11")
    resolve()
  }).then(function() {
    console.log("12")
  })
})

//  1 7 6 8 2 4 3 5 9 11 10 12
  1. 先打印1，没有问题，遇到setTimeout，setTimeout（简写为s1）会进入宏任务事件队列。
  2. process.nextTick进入微任务事件队列。
  3. 遇到promise立即执行，打印7，then函数进入微任务事件队列。
  4. 再遇到setTimeout，setTimeout（简写为s2）会进入宏任务事件队列。
  5. 执行微任务事件队列里面的任务，打印 6 和 8 （因为process.nextTick是先进入队列的，故先执行，遵守先进先出原则）。
  6. 执行宏任务事件队列里面的任务，先执行s1，在执行s2。
  7. 执行s1，打印2和4，s1里面的process.nextTick和then函数又进入微任务事件队列，然后打印3和5。
  8. 执行s2，打印9和11，s2里面的process.nextTick和then函数又进入微任务事件队列，然后打印10和12。

参考资料

    原文作者：tiancai啊呆
    原文地址: https://www.jianshu.com/p/3d8ef1ea42f1
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞