难啃的JS骨头_js五块骨头-CSDN博客

本文链接：https://blog.csdn.net/Ayun0420/article/details/99446076

难啃的JS骨头

内存空间详细图解
- 垃圾回收机制：
执行上下文详解
变量对象详解
var let const区别详解：
匿名函数详解
匿名函数与闭包
this、apply、call、bind
JS中的算法与数据结构——排序（Sort）
原型与原型链
对象的创建与继承

内存空间详细图解

https://www.jianshu.com/p/996671d4dcc4

垃圾回收机制：

JavaScript有自动垃圾收集机制，那么这个自动垃圾收集机制的原理是什么呢？其实很简单，就是找出那些不再继续使用的值，然后释放其占用的内存。垃圾收集器会每隔固定的时间段就执行一次释放操作。
在JavaScript中，最常用的是通过标记清除的算法来找到哪些对象是不再继续使用的，因此a = null其实仅仅只是做了一个释放引用的操作，让 a 原本对应的值失去引用，脱离执行环境，这个值会在下一次垃圾收集器执行操作时被找到并释放。而在适当的时候解除引用，是为页面获得更好性能的一个重要方式。

在局部作用域中，当函数执行完毕，局部变量也就没有存在的必要了，因此垃圾收集器很容易做出判断并回收。但是全局变量什么时候需要自动释放内存空间则很难判断，因此在我们的开发中，需要尽量避免使用全局变量。

执行上下文详解

https://www.jianshu.com/p/a6d37c77e8db

概念：

每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。

全局环境：JavaScript代码运行起来会首先进入该环境
函数环境：当函数被调用执行时，会进入当前函数中执行代码
eval（不建议使用，可忽略）

特点：

单线程
同步执行，只有栈顶的上下文处于执行中，其他的上下文需要等待
全局上下文只有唯一的一个，在浏览器关闭时出栈
函数的执行上下文没有个数限制
每次某个函数被调用，就会有新的执行上下文为其创建，即使是调用的自身函数

执行上下文生命周期

创建阶段
在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。
代码执行阶段
创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

在这里插入图片描述

变量对象详解

https://www.jianshu.com/p/330b1505e41d

变量对象创建过程简单理解：

引擎在读取js代码的过程中，分为两步。第一个步骤是整个js代码的解析读取，第二个步骤是执行。

在读取代码的过程中，就产生了将所有声明提升到顶端，然后再从上往下执行。由此产生了变量提升和函数提升。

变量提升只会提升变量名的声明，而不会提升变量的赋值初始化。
函数提升的优先级大于变量提升的优先级，即函数提升在变量提升之上。

变量对象创建过程深入理解：

建立arguments对象，检查当前上下文中的参数，建立该对象下的属性与属性值
检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。
检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。

变量对象执行过程

同名情况下变量还是会覆盖函数的，只是覆盖时机是在执行阶段而不是创建阶段。

变量对象和活动对象有什么区别，

他们其实都是同一个对象，只是处于执行上下文的不同生命周期。不过只有处于函数调用栈栈顶的执行上下文中的变量对象，才会变成活动对象。
未进入执行阶段之前，变量对象中的属性都不能访问！但是进入执行阶段之后，变量对象转变为了活动对象，里面的属性都能被访问了，然后开始进行执行阶段的操作。

变量的产生与死亡

以使用var关键词声明表里为例

声明在函数外部的变量

产生：js加载到该变量所在行时产生

死亡：js代码加载完毕，变量死亡
声明在函数内部的变量

前提：该变量所在的函数被调用

产生：js执行到该变量所在行时产生

死亡：该变量所在的函数执行行结束

变量与声明调用时候的就近原则：

不同级：

内无找外（略）

同级：

全变量上下分布先上后下

var foo = 10;
console.log(foo);// 10  因为执行到此处了 
var foo = 20;

变量与声明上下分布依旧先上后下

var foo = 10;
console.log(foo);  //10  因为执行到此处了
function foo() {
    console.log('function foo')
}

同为上时涉及执行阶段所以变量优先

var foo = 10;
function foo() { console.log('function foo') }
console.log(foo); // 10  因为执行阶段变量优先

function foo() { console.log('function foo') }
var foo = 10;
console.log(foo); // 10  因为执行阶段变量优先与先后顺序

同为下时涉及声明提升所以函数提升优先

console.log(foo); // function foo
function foo() { console.log('function foo') }
var foo = 20;

console.log(foo); // function foo
var foo = 20;
function foo() { console.log('function foo') }

console.log(foo); // undefined
var foo = 20;
var foo = 10

var let const区别详解：

解除 for 循环时 var 和 let 定义变量的困惑

JavaScript 中 var 和 let 和 const 关键字的区别

***** https://juejin.im/post/5b640ae551882506e232d067
*** https://baijiahao.baidu.com/s?id=1621787284851612777&wfr=spider&for=pc

总结：

var和let/const的区别:

块级作用域
不存在变量提升
暂时性死区
不可重复声明
let、const声明的全局变量不会挂在顶层对象下面

const命令两个注意点:

-let可以先声明稍后再赋值,而const在声明之后必须马上赋值，否则会报错

-const 简单类型一旦声明就不能再更改，复杂类型(数组、对象等)指针指向的地址不能更改，内部数据可以更改。

let、const使用场景:

let使用场景：变量，用以替代var。
const使用场景：常量、声明匿名函数、箭头函数的时候。

1 只有全局作用域与函数（方法）作用域（一个函数）没有块级作用域，这导致很多场景不可理，

内层变量可能会覆盖外层变量

var name = 'lee';
function getName(){
  console.log(name);     //undefined   如果有块级作用域的话  if{} 里面的name不应该被访问到  从而覆盖了本应从外面取值的name=lee
  if(true){
      var name = 'jack';
  }
}
getName();

var name = 'lee';
function getName(){
  console.log(name);     //lee   块级作用域形成
  if(true){
      let name = 'jack';
  }
}
getName();

var name = 'lee';
function getName(){
  console.log(name);     //lee  name=jack是操作 并不是声明  并不是要寻找的变量对象 所以内部并不存在变量声明的变量对象 所以需要到外面去找
      name = 'jack';
}
getName();

用来计数的循环变量泄露为全局变量或函数作用域变量。即：会导致函数内部任意区域都可以访问到内部for循环块级作用域（一个大括号{}）的i值，每个内部块都可以修改这个存在于整个函数作用域的i值。所以循环结束后输出的值是一样的。

var funs= [];
for(var i = 0; i < 10; i++){
   funs.push(function(){
     console.log(i);
  });
}
funs[6]();   //10

//为了解决这个问题，可以使用立即调用函数表达式(IIFE)，
//以强制生成计数器变量的副本，就像这样：

var funs = [];
for(var i = 0; i < 10; i++){
  funs.push((function(value){
    return function(){
       console.log(value);
    }
  })(i));
}
funs[6]();  //6`

该问题也可以表述为：var 变量关键字的真正问题在于其在方法内部的定义变量开始的任何地方都可以访问到这个变量。如下所示，i、discountedPrice、finalPrice 这三个变量是定义在一个 for 循环体中的 (即位于块作用域中)，按照正常思维来讲，在循环结束后，这三个变量是不可访问的，但是现在在这个整个大的方法中，依然是可以访问的：

匿名函数详解

https://www.zcfy.cc/article/javascript-anonymous-functions-1002.html

匿名函数与闭包

***** https://juejin.im/post/5aab3e946fb9a028be35bdf8

this、apply、call、bind

总结：

this

***** https://juejin.im/post/59bfe84351882531b730bac2#comment
***** https://zhuanlan.zhihu.com/p/24107744

this 永远指向最后调用它的那个对象
没有调用的对象那么就是全局对象 window，这就相当于是 window.a()；注意，这里我们没有使用严格模式，如果使用严格模式的话，全局对象就是 undefined，那么就会报错 Uncaught TypeError: Cannot read property 'name' of undefined。
匿名函数的 this 永远指向 window。(setTimeOut问题)

apply 、 call 、bind

***** https://wangdoc.com/javascript/oop/this.html （一篇够）
**** https://mp.weixin.qq.com/s/BYbCgTMt7nvChPddWor0Tw （包含具体的运用）

三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。
bind是返回对应函数，便于稍后调用；apply、call则是立即调用。

注意事项

thisArg：在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函
-数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。
argsArray：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。

JS中的算法与数据结构——排序（Sort）

https://www.jianshu.com/p/8d30da8b832e

原型与原型链

***** https://wangdoc.com/javascript/oop/prototype.html
***** https://blog.csdn.net/cc18868876837/article/details/81211729

总结：

__proto__和constructor属性是对象所独有的；
prototype属性是函数所独有的。但是由于JS中函数也是一种对象，所以函数也拥有__proto__和constructor属性，
prototype由函数该函数（构造函数）的原型对象，即由此函数所创建实例的原型对象
__proto__由对象指向该对象的原型对象
constructor是由对象指向该对象的构造函数
所有函数和对象最终都是由Function构造函数得来，所以constructor属性的终点就是Function这个函数。
所有对象的原型最终都可以上溯到Object.prototype，Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。

prototype

JavaScript 通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部。

通过构造函数为实例对象定义属性，虽然很方便，但是有一个缺点。同一个构造函数的多个实例之间，无法共享属性，从而造成

对系统资源的浪费。

JavaScript 继承机制的设计思想就是，原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原

型上，那么所有实例对象就能共享，不仅节省了内存，还体现了实例对象之间的联系。

JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。

对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。

构造函数的prototype属性，就是实例对象的原型对象。

当实例对象本身没有某个属性或方法的时候，它会到原型对象去寻找该属性或方法。

如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法。

原型对象的作用，就是定义所有实例对象共享的属性和方法

constructor

prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。

由于constructor属性定义在prototype对象上面，意味着可以被所有实例对象继承。

constructor属性的作用是，可以得知某个实例对象，到底是哪一个构造函数产生的。

function F() {};
var f = new F();

f.constructor === F // true   相当于F.prototype.constructor === F 也就是看其原型对象所在的构造函数  
								  也就是看实例对象的构造函数  因为构造函数的prototype属性就是实例的原型对象

constructor属性表示原型对象与构造函数之间的关联关系，如果修改了原型对象后。要记得补上或者修正原型对象的prototype属

性以指向原来的构造函数

proto

实例对象的__proto__属性（前后各两个下划线），返回该对象的原型对象。该属性可读写。
__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向

的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就相当于在null上取值，会报错。通过

__proto__属性将对象连接起来的这条链路即我们所谓的原型链。

原型链

通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。

JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方

面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原

型的原型……

所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。也就是说，所有对象都继承了

Object.prototype的属性。这就是所有对象都有valueOf和toString方法的原因，因为这是从Object.prototype继承的。

Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。

对象的创建与继承

***** https://wangdoc.com/javascript/oop/prototype.html
*****https://juejin.im/entry/58f85f87b123db006235e938/detail
***** https://www.jianshu.com/p/d7a7458b2a50
***** https://blog.csdn.net/Beng_shakalaka/article/details/84309235