JS内存模型

JS内存模型

首先编写一段求长方形的面积周长程式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rectangle</title>
</head>
<body>
<!--题目： 定义一个创建“长方形”的构造函数（有参数，通过参数给属性赋值）
属性：长（length）；（实例属性）
 宽（width）；（实例属性）
方法：求面积；（原型方法）
     求周长；（原型方法）
通过这个构造函数创建出3个不同的对象，并调用对象方法计算对象的面积和周长；
-->
<script>
    //构造函数，传递一个对象obj
    function Rectangle(obj) {
        this._init(obj);
    }

    //原型替换
    Rectangle.prototype = {
        //使得原型函数又指向Rectangle函数对象
        constructor:Rectangle,
        //原型的方法，对初始化属性进行单独封装成对象，用对象传递
        _init: function (obj) {
            //css6中的方法，就是把obj对象中的属性全部传到this里
            Object.assign(this, obj);
        },
        area: function () {
            return this.width * this.length;
        },
        perimeter: function () {
            return this.width * 2 + this.length * 2;
        }
    };

    //new对象
    var r1 = new Rectangle({length: 10, width: 10});
    var r2 = new Rectangle({length: 20, width: 90});
    var r3 = new Rectangle({length: 50, width: 60});
    //output information
    console.log("r1长方形面积为： " + r1.area());
    console.log("r1长方形周长为： " + r1.perimeter());
    console.log("r2长方形面积为： " + r2.area());
    console.log("r2长方形周长为： " + r2.perimeter());
    console.log("r3长方形面积为： " + r3.area());
    console.log("r3长方形周长为： " + r3.perimeter());
</script>
</body>
</html>

我们看看程式的内存分配是怎样的：