变量，作用域，内存

最新推荐文章于 2024-07-05 00:15:00 发布

一只特立独行的猫猫

最新推荐文章于 2024-07-05 00:15:00 发布

阅读量101

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/fhjdzkp/article/details/119832757

版权

js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1，通过变量使用原始值和引用值

原始值：

原始值有哪些类型？

引用值：

2，理解执行上下文

3，理解垃圾回收机制

标记清理和引用计数。

需要反复理解的部分

4.1.3 传递参数

ECMAScript 中所有函数的参数都是按值传递的。这意味着函数外的值会被复制到函数内部的参数中，就像从一个变量复制到另一个变量一样。如果是原始值，那么就跟原始值变量的复制一样，如果是引用值，那么就跟引用值变量的复制一样。对很多开发者来说，这一块可能会不好理解，毕竟变量有按值和按引用访问，而传参则只有按值传递。

在按值传递参数时，值会被复制到一个局部变量(即一个命名参数，或者用 ECMAScript 的话说，就是 arguments 对象中的一个槽位)。在按引用传递参数时，值在内存中的位置会被保存在一个局部变量，这意味着对本地变量的修改会反映到函数外部。(这在 ECMAScript 中是不可能的。)来看下面这个例子:

function addTen(num) {
      num += 10;
      return num;
}
let count = 20;
let result = addTen(count);

console.log(count); // 20，没有变化 console.log(result); // 30

这里，函数 addTen()有一个参数 num，它其实是一个局部变量。在调用时，变量 count 作为参数传入。count 的值是 20，这个值被复制到参数 num 以便在 addTen()内部使用。在函数内部，参数 num 的值被加上了 10，但这不会影响函数外部的原始变量 count。参数 num 和变量 count 互不干扰，它们只不过碰巧保存了一样的值。如果 num 是按引用传递的，那么 count 的值也会被修改为 30。这个事实在使用数值这样的原始值时是非常明显的。但是，如果变量中传递的是对象，就没那么清楚了。比如，再看这个例子:

    function setName(obj) {
      obj.name = "Nicholas";
    }

    let person = new Object();
    setName(person);
    console.log(person.name);  // "Nicholas"

这一次，我们创建了一个对象并把它保存在变量 person 中。然后，这个对象被传给 setName() 方法，并被复制到参数 obj 中。在函数内部，obj 和 person 都指向同一个对象。结果就是，即使对象 是按值传进函数的，obj 也会通过引用访问对象。当函数内部给 obj 设置了 name 属性时，函数外部的 对象也会反映这个变化，因为 obj 指向的对象保存在全局作用域的堆内存上。很多开发者错误地认为， 当在局部作用域中修改对象而变化反映到全局时，就意味着参数是按引用传递的。为证明对象是按值传 递的，我们再来看看下面这个修改后的例子:

function setName(obj) {
    obj.name = "Nicholas"; 
    obj = new Object(); 
    obj.name = "Greg";

}

    let person = new Object();
    setName(person);
    console.log(person.name);  // "Nicholas"

这个例子前后唯一的变化就是 setName()中多了两行代码，将 obj 重新定义为一个有着不同 name 的新对象。当 person 传入 setName()时，其 name 属性被设置为"Nicholas"。然后变量 obj 被设置为一个新对象且 name 属性被设置为"Greg"。如果 person 是按引用传递的，那么 person 应该自动将指针改为指向 name 为"Greg"的对象。可是，当我们再次访问 person.name 时，它的值是"Nicholas"，这表明函数中参数的值改变之后，原始的引用仍然没变。当 obj 在函数内部被重写时，它变成了一个指向本地对象的指针。而那个本地对象在函数执行结束时就被销毁了。

注意 ECMAScript中函数的参数就是局部变量

需要背诵的

1，typeof 操作符最适合用来判断一个变量是否为原始类型。更确切地说，它是判断一个变量是否为字符串、数值、布尔值或 undefined 的最好方式。如果值是对象或 null，那么 typeof返回object，

 let s = "Nicholas";
 let b = true;
 let i = 22;
 let u;
 let n = null;
 let o = new Object();
 console.log(typeof s); // string
 console.log(typeof i); // number
 console.log(typeof b); // boolean
 console.log(typeof u); // undefined
 console.log(typeof n); // object
 console.log(typeof o); // object

typeof 虽然对原始值很有用，但它对引用值的用处不大。我们通常不关心一个值是不是对象，而是想知道它是什么类型的对象。为了解决这个问题，ECMAScript 提供了 instanceof 操作符，语法如下:

result = variable instanceof constructor


var name = "Jake";
// 等价于
name = 'Jake';
var name;

let 与 var 的另一个不同之处是在同一作用域内不能声明两次。重复的 var 声明会被忽略，而重 复的 let 声明会抛出 SyntaxError。
var a; var a;
// 不会报错
{
    let b;
    let b; 
}
// SyntaxError: 标识符 b 已经声明过了

除了 let，ES6 同时还增加了 const 关键字。使用 const 声明的变量必须同时初始化为某个值。 一经声明，在其生命周期的任何时候都不能再重新赋予新值。
const a; // SyntaxError: 常量声明时没有初始化
const b = 3;
console.log(b); // 3
b = 4; // TypeError: 给常量赋值
const 除了要遵循以上规则，其他方面与 let 声明是一样的:
    if (true) {
      const a = 0;
}
console.log(a); // ReferenceError: a 没有定义

const o3 = Object.freeze({});
o3.name = 'Jake';
console.log(o3.name); // undefined

将内存占用量保持在一个较小的值可以让页面性能更好。优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如果数据不再必要，那么把它设置为 null，从而释放其引用。这也可以叫作解除引用。这个建议最适合全局变量和全局对象的属性。局部变量在超出作用域后会被自动解除引用，如下面的例子所示:

function createPerson(name){
    let localPerson = new Object();
    localPerson.name = name; 
    return localPerson;
}

let globalPerson = createPerson("Nicholas"); 
// 解除 globalPerson 对值的引用
globalPerson = null;

不过要注意，解除对一个值的引用并不会自动导致相关内存被回收。解除引用的关键在于确保相关的值已经不在上下文里了，因此它在下次垃圾回收时会被回收。

(1) 通过 const 和 let 声明提升性能
ES6 增加这两个关键字不仅有助于改善代码风格，而且同样有助于改进垃圾回收的过程。因为 const 和 let 都以块(而非函数)为作用域，所以相比于使用 var，使用这两个新关键字可能会更早地让垃圾回收程序介入，尽早回收应该回收的内存。在块作用域比函数作用域更早终止的情况下，这就有可能发生。

(2)隐藏类和删除操作

运行期间，V8 会将创建的对象与隐藏类关联起来，以跟踪它们的属性特征。能够共享相同隐藏类的对象性能会更好，V8 会针对这种情况进行优化，但不一定总能够做到。比如下面的代码:

 function Article() {
      this.title = 'Inauguration Ceremony Features Kazoo Band';
}

    let a1 = new Article();
    let a2 = new Article();

V8 会在后台配置，让这两个类实例共享相同的隐藏类，因为这两个实例共享同一个构造函数和原型。假设之后又添加了下面这行代码:

    a2.author = 'Jake';

此时两个 Article 实例就会对应两个不同的隐藏类。根据这种操作的频率和隐藏类的大小，这有可能对性能产生明显影响。

当然，解决方案就是避免 JavaScript 的“先创建再补充”(ready-fire-aim)式的动态属性赋值，并在构造函数中一次性声明所有属性，如下所示:

function Article(opt_author) {
      this.title = 'Inauguration Ceremony Features Kazoo Band';
      this.author = opt_author;
}

    let a1 = new Article();
    let a2 = new Article('Jake');

这样，两个实例基本上就一样了(不考虑 hasOwnProperty 的返回值)，因此可以共享一个隐藏类， 从而带来潜在的性能提升。不过要记住，使用 delete 关键字会导致生成相同的隐藏类片段。看一下这 个例子:

    function Article() {
      this.title = 'Inauguration Ceremony Features Kazoo Band';
      this.author = 'Jake';
    }

    let a1 = new Article();
    let a2 = new Article();
    delete a1.author;

在代码结束后，即使两个实例使用了同一个构造函数，它们也不再共享一个隐藏类。动态删除属性与动态添加属性导致的后果一样。最佳实践是把不想要的属性设置为 null。这样可以保持隐藏类不变和继续共享，同时也能达到删除引用值供垃圾回收程序回收的效果。比如:

function Article() {
  this.title = 'Inauguration Ceremony Features Kazoo Band';
  this.author = 'Jake';
}
let a1 = new Article();
let a2 = new Article();
a1.author = null;

(3)内存泄漏

直接使用变量

闭包

定时器

（4）浏览器

浏览器决定何时运行垃圾回收程序的一个标准就是对象更替的速度