[removed] Do I need to put this.var for every variable in an object?

前端 未结 6 1328
太阳男子
太阳男子 2020-11-21 05:06

In C++, the language I\'m most comfortable with, usually one declares an object like this:

class foo
{
public:
    int bar;
    int getBar() { return bar; }
         


        
6条回答
  •  借酒劲吻你
    2020-11-21 05:45

    Explicitly saying this.foo means (as you've understood well) that you're interested about the property foo of the current object referenced by this. So if you use: this.foo = 'bar'; you're going to set the property foo of the current object referenced by this equals to bar.

    The this keyword in JavaScript doesn't always mean the same thing like in C++. Here I can give you an example:

    function Person(name) {
       this.name = name;
       console.log(this); //Developer {language: "js", name: "foo"} if called by Developer
    }
    
    function Developer(name, language) {
       this.language = language;
       Person.call(this, name);
    }
    
    var dev = new Developer('foo', 'js');
    

    In the example above we're calling the function Person with the context of the function Developer so this is referencing to the object which will be created by Developer. As you might see from the console.log result this is comes from Developer. With the first argument of the method call we specify the context with which the function will be called.

    If you don't use this simply the property you've created will be a local variable. As you might know JavaScript have functional scope so that's why the variable will be local, visible only for the function where it's declared (and of course all it's child functions which are declared inside the parent). Here is an example:

    function foo() {
        var bar = 'foobar';
        this.getBar = function () {
            return bar;
        }
    }
    
    var f = new foo();
    console.log(f.getBar());  //'foobar'
    

    This is true when you use the var keyword. This means that you're defining bar as local variable if you forget var unfortunately bar will became global.

    function foo() {
        bar = 'foobar';
        this.getBar = function () {
            return bar;
        }
    }
    
    var f = new foo();
    console.log(window.bar);  //'foobar'
    

    Exactly the local scope can help you to achieve privacy and encapsulation which are one of the greatest benefits of OOP.

    Real world example:

    function ShoppingCart() {
        var items = [];
    
        this.getPrice = function () {
           var total = 0;
           for (var i = 0; i < items.length; i += 1) {
              total += items[i].price;
           }
           return total;
        }
    
        this.addItem = function (item) {
            items.push(item);
        }
    
        this.checkOut = function () {
            var serializedItems = JSON.strigify(items);
            //send request to the server...
        }
    }
    
    var cart = new ShoppingCart();
    cart.addItem({ price: 10, type: 'T-shirt' });
    cart.addItem({ price: 20, type: 'Pants' });
    console.log(cart.getPrice()); //30
    

    One more example of the benefits of the JavaScript scope is the Module Pattern. In Module Pattern you can simulate privacy using the local functional scope of JavaScript. With this approach you can have both private properties and methods. Here is an example:

    var module = (function {
    
        var privateProperty = 42;
    
        function privateMethod() {
            console.log('I\'m private');
        }
        return {
    
           publicMethod: function () {
               console.log('I\'m public!');
               console.log('I\'ll call a private method!');
               privateMethod();
           },
    
           publicProperty: 1.68,
    
           getPrivateProperty: function () {
               return privateProperty;
           },
    
           usePublicProperty: function () {
               console.log('I\'ll get a public property...' + this.publicProperty);
           }
    
        }
    }());
    
    module.privateMethod(); //TypeError
    module.publicProperty(); //1.68
    module.usePublicProperty(); //I'll get a public property...1.68
    module.getPrivateProperty(); //42
    module.publicMethod(); 
    /*
     * I'm public!
     * I'll call a private method!
     * I'm private
     */
    

    There's a little strange syntax with the parentless wrapping the anonymous functions but forget it for the moment (it's just executing the function after it's being initialized). The functionality can be saw from the example of usage but the benefits are connected mainly of providing a simple public interface which does not engages you with all implementation details. For more detailed explanation of the pattern you can see the link I've put above.


    I hope that with this :-) information I helped you to understand few basic topics of JavaScript.

提交回复
热议问题