两个`一模一样`的object先后定义为什么会有巨大的性能差异？

发布于 2022-09-04 10:28:14 字数 3999 浏览 13 评论 0

先后定义两个带setter和getter的对象, 然后在node v7.3.0, 用benchmark.js测试

const builtInObject1 = (function (object) {
    let lastA = 1;
    return Object.defineProperties(object, {
        a:{
            get(){
                return lastA
            },
            set(newValue){
                lastA = newValue;
            }
        }
    })
})({});

const builtInObject2 = (function (object) {
    let lastA = 1;
    return Object.defineProperties(object, {
        a:{
            get(){
                return lastA
            },
            set(newValue){
                lastA = newValue;
            }
        }
    })
})({});

//补充es6的`get`和`set`属性定义方法
const builtInObject3 = (function () {
    let lastA = 1;
    return {
        get a(){
            return lastA
        },
        set a(value){
            lastA = value;
        }
    }
})();

const builtInObject4 = (function (object) {
    let last = 1;
    return Object.defineProperties(object, {
        b:{
            get(){
                return last
            },
            set(newValue){
                last = newValue;
            }
        }
    })
})({});

const builtInObject5 = (function (object) {
    let last = 1;
    return Object.defineProperties(object, {
        c:{
            get(){
                return last
            },
            set(newValue){
                last = newValue;
            }
        }
    })
})({});

(new Benchmark.Suite("object-assign-properties"))
    .add("#built-in object1.a getter and setter", function () {
        builtInObject1.a = builtInObject1.a + 1;
    })
    .add("#built-in object2.a getter and setter", function () {
        builtInObject2.a = builtInObject2.a + 1;
    })
    .add("#built-in object3.a es6 getter and setter", function () {
        builtInObject3.a = builtInObject3.a + 1;
    })
    .add("#built-in object4.b getter and setter", function () {
        builtInObject4.b = builtInObject4.b + 1;
    })
    .add("#built-in object5.c getter and setter", function () {
        builtInObject5.c = builtInObject5.c + 1;
    })
    .on('cycle', function(event) {
        console.log(String(event.target));
    })
    .on('complete', function() {
        console.log('Fastest is ' + this.filter('fastest').map('name'));
    })
    .run({ 'async': false });

结果

#built-in object1.a getter and setter x 80,459,419 ops/sec ±0.65% (88 runs sampled)
#built-in object2.a getter and setter x 3,967,313 ops/sec ±0.36% (91 runs sampled)
#built-in object3.a es6 getter and setter x 3,982,725 ops/sec ±0.51% (93 runs sampled)
#built-in object4.b getter and setter x 79,608,022 ops/sec ±4.06% (87 runs sampled)
#built-in object5.c getter and setter x 78,849,808 ops/sec ±0.82% (92 runs sampled)
Fastest is #built-in object1.a getter and setter

object1和object2的定义方式是一模一样的，但object1比object2和object3快十多倍!