首先编写一段求长方形的面积周长程式:
<!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>
我们看看程式的内存分配是怎样的:
上课老师笔记:
--------------------------
----------------------
----------------------------------
------------------------------
--------------------------
-------------------------
-----
---
---
----
-----
---