chaussen

## JavaScript优化模式（一）——作者Benedikt Meurer

``````class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

distance(other) {
const dx = Math.abs(this.x - other.x);
const dy = Math.abs(this.y - other.y);
return dx + dy;
}
}

``````

``````function test() {
const points = [
new Point(10, 10),
new Point(1, 1),
new Point(8, 9)
];
let result = 0;
for (let i = 0; i < 10000000; ++i) {
for (const point1 of points) {
for (const point2 of points) {
result += point1.distance(point2);
}
}
}
return result;
}

``````

`点(Point)`这个类，尤其是它的`距离(distance)`方法现在就有了合适的基准函数。让我们来运行几次这个`测试(test)`驱动程序，看看性能如何。用以下HTML代码片断：

``````<script>
function test() {
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

distance(other) {
const dx = Math.abs(this.x - other.x);
const dy = Math.abs(this.y - other.y);
return dx + dy;
}
}

const points = [
new Point(10, 10),
new Point(1, 1),
new Point(8, 9)
];
let result = 0;
for (let i = 0; i < 10000000; ++i) {
for (const point1 of points) {
for (const point2 of points) {
result += point1.distance(point2);
}
}
}
return result;
}

for (let i = 1; i <= 5; ++i) {
console.time("test " + i);
test();
console.timeEnd("test " + i);
}
</script>

``````

``````test 1: 595.248046875ms
test 2: 765.451904296875ms
test 3: 930.452880859375ms
test 4: 994.2890625ms
test 5: 3894.27392578125ms

``````

``````<script>
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

distance(other) {
const dx = Math.abs(this.x - other.x);
const dy = Math.abs(this.y - other.y);
return dx + dy;
}
}

function test() {
const points = [
new Point(10, 10),
new Point(1, 1),
new Point(8, 9)
];
let result = 0;
for (let i = 0; i < 10000000; ++i) {
for (const point1 of points) {
for (const point2 of points) {
result += point1.distance(point2);
}
}
}
return result;
}

for (let i = 1; i <= 5; ++i) {
console.time("test " + i);
test();
console.timeEnd("test " + i);
}
</script>

``````

``````test 1: 598.794921875ms
test 2: 599.18115234375ms
test 3: 600.410888671875ms
test 4: 608.98388671875ms
test 5: 605.36376953125ms

``````

``````function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.distance = function (other) {
var dx = Math.abs(this.x - other.x);
var dy = Math.abs(this.y - other.y);
return dx + dy;
}

``````

`点(Point)`类处于`测试(test)`函数内部时，性能会有差异，其根本原因在于`类(class)`这个字面变量被多次执行。在上面的例子里，类正好被定义了5次。而当类处于`测试(test)`函数外部时，定义只执行一次。每执行一次`类(class)`定义，就会生成一个新的原型对象，它带有这个类的所有方法。此外，还产生了一个与`类(class)`相对应的新构造(constructor)函数，那个原型对象就成了这个构造函数的`"原型(prototype)"`属性。