Hi….
When using Javascript as OOP mode deep functions (function in function) lose the “this” scope.
I found some solution for this problem…
Same problem i found when you call other class with callback, the callback function returns without “this” scope.
how the problem looks:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function scope_experiment() { this.test_var = "test"; this.level_one = function() { alert("Level One: " + this.test_var); function level_two() { alert("Level Two: " + this.test_var); } level_two(); } } var test_scope = new scope_experiment(); test_scope.level_one(); |
The output will be:
1) Level One: test
2) Level Two: undefined
And now…. The solution:
All what you need is to pass “this” to the deep function…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function scope_experiment() { this.test_var = "test"; this.level_one = function() { alert("Level One: " + this.test_var); function level_two(_this_scope) { // we use _this_scope as this alert("Level Two: " + _this_scope.test_var); } level_two(this); // we pass this to the function } } var test_scope = new scope_experiment(); test_scope.level_one(); |
The output will be:
1) Level One: test
2) Level Two: test
Mission Accomplished
Create Classes and Object in JavaScript & jQuery
There is few ways to create javascript object and use its as class.
In this artical i will you my favorite way to implement javascript classes.
I will combaine jQuery in this example.
First of all lets create basic object:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
init: function(options, target) {
this.options = $.extends({}, this.options, options);
this.$target = $(target);
this._draw();
},
options: {
width: 100,
height: 100,
},
_draw: function() {
this.$target.css({width: this.options.width,
height: this.options.height});
}
}
We create here basic class that have 2 functions and one object to store the options.
the init class gets user options and the target (like html div).
then we merge the default options with the user options using jQuery extends function and
store the target as jQuery instance as $target.
The _draw function manipulate the target – here we build the ui by user options.
To create an instance of the class we need to add some code to the (i use to put it on js heaer file).
2
3
4
5
6
7
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
Now lets create a instance of our class:
We need to add target div:
and than
2
garryTest.init({width: 150, height: 150}, $("#test_div"));
Have fun
Garry Lachman