javascript - TypeScript class with property decorator acts as if static - Stack Overflow

admin管理员组

文章数量:1415458

I have written a class with a property decorator that sets a flag in the class when ever a decorated property is set. I also want to be able to copy from one instance of the class to another. The problem is that when I set the value of property on one object, the value of the property on another object changes too, as if the property were static. I am new to JavaScript and TypeScript. What did I miss?

Running the text code below will log:

Setting propNum from undefined to 0
testclass.ts:18 Setting propNum from 0 to 123
test.spec.ts:13 t1.propNum = 123
test.spec.ts:14 t2.propNum = 123

t1.propNum should still be zero

Decorator

//
// property decorator to set dirty flag automatically for any decorated property
//
function testProperty( target: any, key: string ) {

    // property value
    var _val = this[key];

    // property getter
    function getter() {
        return _val;
    };

    // property setter
    function setter( newVal ) {

        if ( _val != newVal ) {
            console.log( `Setting ${key} from ${_val} to ${newVal}` );
            _val = newVal;
            this._dirty = true;
        }
    };

    //
    // Delete original property and define new property with getter & setter
    //
    if ( delete this[key] ) {

        // Create new property with getter and setter
        Object.defineProperty( target, key, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true
        });
    }
}

Test Class

export class TestClass {

    private _dirty: boolean;

    @testProperty
    public propNum: number = 0;


    constructor() {
        this._dirty = false;
    }

    public copyFrom( tc: TestClass ) {
        this.propNum = tc.propNum;
    }
}

Test Code

describe( 'Copy Class Test', () => {

    it( 'Copy Test', () => {

        var t1 = new TestClass();
        var t2 = new TestClass();

        t2.propNum = 123;

        console.log( `t1.propNum = ${t1.propNum}` );
        console.log( `t2.propNum = ${t2.propNum}` );

        expect( t1.propNum ).toBe( 0 );

        t1.copyFrom( t2 );

        expect( t1.propNum ).toBe( 123 );
    });
});

I have written a class with a property decorator that sets a flag in the class when ever a decorated property is set. I also want to be able to copy from one instance of the class to another. The problem is that when I set the value of property on one object, the value of the property on another object changes too, as if the property were static. I am new to JavaScript and TypeScript. What did I miss?

Running the text code below will log:

Setting propNum from undefined to 0
testclass.ts:18 Setting propNum from 0 to 123
test.spec.ts:13 t1.propNum = 123
test.spec.ts:14 t2.propNum = 123

t1.propNum should still be zero

Decorator

//
// property decorator to set dirty flag automatically for any decorated property
//
function testProperty( target: any, key: string ) {

    // property value
    var _val = this[key];

    // property getter
    function getter() {
        return _val;
    };

    // property setter
    function setter( newVal ) {

        if ( _val != newVal ) {
            console.log( `Setting ${key} from ${_val} to ${newVal}` );
            _val = newVal;
            this._dirty = true;
        }
    };

    //
    // Delete original property and define new property with getter & setter
    //
    if ( delete this[key] ) {

        // Create new property with getter and setter
        Object.defineProperty( target, key, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true
        });
    }
}

Test Class

export class TestClass {

    private _dirty: boolean;

    @testProperty
    public propNum: number = 0;


    constructor() {
        this._dirty = false;
    }

    public copyFrom( tc: TestClass ) {
        this.propNum = tc.propNum;
    }
}

Test Code

describe( 'Copy Class Test', () => {

    it( 'Copy Test', () => {

        var t1 = new TestClass();
        var t2 = new TestClass();

        t2.propNum = 123;

        console.log( `t1.propNum = ${t1.propNum}` );
        console.log( `t2.propNum = ${t2.propNum}` );

        expect( t1.propNum ).toBe( 0 );

        t1.copyFrom( t2 );

        expect( t1.propNum ).toBe( 123 );
    });
});

• javascript
• properties
• typescript
• decorator

Share Improve this question Follow asked Feb 18, 2016 at 22:05 ArmbieArmbie 19722 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The main issue here is that the getter and setter are sharing the same variable instead of getting a value based on the instance.

It's basically the same as doing this:

function TestClass() {
}

var value;

Object.defineProperty(TestClass.prototype, "propNum", {
    get: function() { return value; },
    set: function(val) { value = val },
    enumerable: true,
    configurable: true
});

Which causes this to happen:

var a = new TestClass(), b = new TestClass();
a.propNum = 2;
a.propNum === b.propNum; // true, because they're both referencing the same variable

Second issue is that this[key] references a property on the global object.

What you probably want to do is something along these lines (untested code):

function testProperty( target: Object, key: string ) {
    const privateKey = "_" + key;

    function getter() {
        return this[privateKey];
    }

    function setter( newVal: any ) {
        if ( this[privateKey] != newVal ) {
            console.log( `Setting ${key} from ${this[privateKey]} to ${newVal}` );
            this[privateKey] = newVal;
            this._dirty = true;
        }
    }

    Object.defineProperty( target, key, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
    });
}

本文标签： javascriptTypeScript class with property decorator acts as if staticStack Overflow