胡扯JS系列-内存模型和函数执行

image

准备写点乱七八糟的文章,对JavaScript的胡扯

赋诗一首

对象本无根,

类型亦无形。

本来无一物,

何处惹尘埃?

一、JavaScript的内存模型

JavaScript的本质是一个对象,一个对象可以包含多个属性,对象的属性可以分为直接量和对象两种类型,而对象又分为Object对象和function对象两种类型。

按照数据类型划分:

  • 简单数据类型
    • number
    • string
    • boolean
  • 特殊数据类型
    • null
    • undefined
  • 复杂数据类型
    • object
      • Object对象
      • function对象

直接量和对象的两种类型的属性在内存中保存方式不同(跟Java中的类似)

  • 直接量:直接用两块内存分别保存属性名和属性值

    image
  • 对象:需要三块内存,分别保存属性名、属性地址和属性内容

    image

对于对象类型的属性来说,属性名知识指向了保存对象的内存地址,而不是执行实际的对象,代码演示如下:

function F(){
    this.v = 1;
}
var f1 = new F();
var f2 = f1;
console.log(f2.v);
f2.v = 2;
console.log(f1.v);
f1 = null;
console.log(f2.v);

代码的执行图解:

image

我们一直都说JavaScript是脚本语言,在浏览器中解释执行的,不应该有自己的内存模型,其实不是这样的。无论编译语言还是解释型语言,他们的变量、函数、对象等数据都是保存在内存当中的,使用时需要通过变量名在指定地方找到对应的具体内容,然后再进行实际操作。

二、在JS中函数是如何执行的

函数我们之前已经都接触过了,函数无非有两部分:数据和对数据的操作。数据有分为外部数据内部数据。对于外部数据我们先不进行说明,这里主要是说函数,内部数据有分为参数变量两个部分。

参数(形参):在函数每次执行的时候参数都会被赋予一个新的数值;

变量(局部变量):每次都会设置为一个相同的初始值;

  • 函数的变量和参数是如何保存的呢?

    函数在每次执行之前都会新建一个参数数组和一个变量数组(当然也可以合并为一个数组,而通常会使用栈来实现),然后将调用时所传递的参数设置到参数数组中,而变量数组在每次执行都具有相同的内容。简单的数据会直接保存在数组当中,而复杂的数据,数组只是保存地址,具体的数据保存在堆中。

    image
    function paramTest(p1){
        var message = "Hello World";
        console.log(p1);
        for(var i in arguments){
            console.log(arguments[i]);
        }
    }
    //函数的调用
    paramTest("a","b","c");
    //输出结果为: a a b c
    

    我们使用了Chrome的调试,函数在执行时会将参数p1和函数中所用到的变量messag、i方法相同的地位,即在函数内部执行的时候不会区分是参数还是变量。在JS的函数中,会自动创建一个名字为arguments的内部变量,然后将所有的参数的地址保存到其中。arguments 类似数组对象,可以通过它来获取函数调用时所传递的参数。

    image

    paramTest方法首先打印了p1的值,然后遍历打印arguments中所有的参数的值,可以看出参数p1的值和arguments[0]的值是一样的,函数的参数按照顺序依次保存在arguments变量中,在调用函数时传入参数的个数也可以和定义时不一样,所以说JS中不存在同名函数的重载方法。

  • 在函数定义的变量时函数级作用域而不是块级作用域

    function scopeTest(){
        if(true){
            var message = "Hello World";
        }
        console.log(message);
    }
    //函数的调用
    scopeTest();
    //输出结果为:Hello World
    

    这里的message是在if语句块中定义的,但是在if语句外部依然可以进行调用。

    在JS中的方法执行时会将其自身所有使用var定义的变量统一放到前面介绍的变量数组当中,所以在一个函数中,所有使用var定义的变量都是同等地位的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,630评论 0 5
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,149评论 0 21
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,267评论 0 4
  • 借考察调研的时机,再次来到了美丽的杭州,因平时有跑步的习惯,跑西湖的冲动立马涌上心头…… 肇庆...
    高洪昭阅读 514评论 0 0
  • 游戏联运、礼物赠送、会员收费、广告宣传,大致是这几类了吧。没了游戏联运的盈利前景,目前其他几项加起来感觉只是勉强补...
    missly117阅读 120评论 0 0