JavaScript for C#Developers Study(3)

Object-Oriented JavaScript

• Dynamic Objects
  • Creating dynamic object is very similar in c# and JavaScript

 

 

 

• • Both c# and JavaScript can add new properties dynamically

• In JavaScript, we use FUNCTION to define a class
  • when using keyword new to initialize a class function, the owner of this function is the newly created object

• • In a class function, function member can be declared as well

• • In a function class, keyword “this” declares public members, while keyword “var” declares private ones

• • An example of passing in an owner to a function

var my = my||{};
    
my.Product = function (selectedItem) {
        var self = this;
        self.id = ko.observable();
        self.salePrice = ko.observable();
        self.photo = ko.observable();
        self.model = ko.observable();
        self.category = ko.observable();
        self.description = ko.observable();
        self.rating = ko.observable();
        self.isSelected = ko.computed(function () {
            return selectedItem() === self;
        });
        //this.shortDescription = ko.observable();
        self.shortDesc = ko.computed(function () {
            return this.model() ? this.model().brand() + " " + this.model().name() : "";
        }, self),　　// passing self as owner of the function
        self.photoUrl = ko.computed(function () {
            return photoPath + this.photo();
        }, self);　　// passing self as owner of the function
    };

• • Just like c#, we should use Class Name to access static member of a class

 

• Go deeper for the keyword “new” applying to a constructor function
  • no return statement in constructor class (GOOD)

• • return non-object value in constructor class(GOOD)

• • return an object in constructor class (BAD)

• • return a function in constructor class (BAD)

 Run the code in jsFiddle

Conclusion:

1. 1. Must use keyword “new” to instantiate a constructor class
   2. Constructor class should not have a return statement

• Execution Context and Scope Chain

var name = "Microsoft";
function funcA() {
    var name = "Google";
    document.writeln(name + "</br>");
    return function() {
        name = "Facebook";
        document.writeln(name + "</br>");
    };
}

var funcB = funcA(); //Google
document.writeln(name + "</br>"); //Microsoft
funcB(); //Facebook

 

 

 

• A further example

var nameF = 'Facebook';
function funcA() {
  var nameM ='Microsoft';
  return function(){
    var name = 'Google';
    document.writeln(nameF +', '+ nameM +', ' + name+'</br>');
  };
}
var funcB = funcA();
funcB();

//output:   Facebook, Microsoft, Google

funcB can access nameM in funA scope, and nameF in Window scope