Explain this of JavaScript

1. this
othree@JSDC

3. this
• ‘the object’ it belongs in OOP

4. C++
class Box {
public:
Box(double l=2.0, double b=2.0, double h=2.0) {
this->length = l;
this->breadth = b;
this->height = h;
}
double Volume() {
return length * breadth * height;
}
int compare(Box box) {
return this->Volume() > box.Volume();
}
private:
double length;
double breadth;
double height;
};

5. Continued..
int main(void)
{
Box Box1(3.3, 1.2, 1.5);
Box Box2(8.5, 6.0, 2.0);
cout << Box1.Volume() << endl; // 3.3*1.2*1.5 = 5.94
cout << Box2.Volume() << endl; // 8.5*6.0*2.0 = 102
return 0;
}

6. this
• Context in JavaScript
• Can mean the object also

7. JavaScript
var Box = function Box (l, b, h) {
this.length = l;
this.breadth = b;
this.height = h;
};
Box.prototype.Volume = function () {
return this.length * this.breadth * this.height;
};
Box.prototype.compare = function (box) {
return this.Volume() > box.Volume();
};

8. this in Function
• Context
• Depends on how you call the function

9. 3 Way to Call Function
var big = function () {/*...*/};
var foo = {
small: function () {/*...*/}
};
big(); // 1. this: window object
foo.small(); // 2. this: foo
var small = foo.small;
small();

10. 3 Way to Call Function
var big = function () {/*...*/};
var foo = {
small: function () {/*...*/}
};
big(); // 1. this: window object
foo.small(); // 2. this: foo
var small = foo.small;
small(); // 3. this: window object

11. Borrowing Method
var foo = {
small: function () {
this;
}
};
var bar = {};
foo.small(); // this: foo
bar.borrowedSmall = foo.small;
bar.borrowedSmall(); // this: bar

12. this in Global Scope
• Root object

13. Root Object
• `window` in browsers
• Root object in other environment

14. to Support Both
(function () {
root = this;
//blah....
}());

15. Strict Mode
• No more global context

16. Don’t Forget `new`
function Foobar() {
"use strict";
this.a = 'foo';
this.b = 'bar';
}
var foobar1 = Foobar();
// Cannot set property 'a' of undefined
var foobar2 = new Foobar();
// this: new empty object

17. One More Way to Call
Function

18. apply/call
var foo = {};
function foobar(v1, v2) {
this.bar1 = v1;
this.bar2 = v2;
}
foobar.call(foo, v1, v2); // this: foo
foobar.apply(foo, [v1, v2]); // this: foo

19. bind
var foo = {};
var otherFoo = {};
function setBar(v1, v2) {
this.bar1 = v1;
this.bar2 = v2;
}
var fooSetBar = setBar.bind(foo);
fooSetBar(1, 2); // this: foo
otherFoo.foobar = fooSetBar;
otherFoo.foobar(3, 4); // this: foo

20. ProtectYour Method
• Bind context and function together

21. $.proxy/_.bind
• Use apply to implement bind

22. Implement Bind
var bind = function (func, context) {
return function () {
func.apply(context, arguments);
};
};

23. Solve Event Handler
• Use apply to assign context
• JavaScript Libraries did it for you

24. this in Event Handler
// W3C Dom
aElement.addEventListener('click', function () {
this; // aElement
}, false);
// old IE
aElement.attachEvent('onclick', function () {
this; // window
});

25. Callback Function
function Foobar (input) {
this.prefix = input;
}
Foobar.prototype.echo = function (result) {
return this.prefix + result;
};
fb = new Foobar();
$.get('/info', function (result) {
fb.echo(result);
});

26. Reduce One Stack
function Foobar (input) {
this.prefix = input;
}
Foobar.prototype.echo = function (result) {
return this.prefix + result;
};
fb = new Foobar();
$.get('/info', fb.echo); // this.prefix is 'undefined'

27. Use bind
function Foobar (input) {
this.prefix = input;
this.echo = this.echo.bind(this); // Protect method
}
Foobar.prototype.echo = function (result) {
return this.prefix + result;
};
fb = new Foobar();
$.get('/info', fb.echo);

28. Cons
• Performance is bad
• Old browser don’t support

29. Performance
http://jsperf.com/bind-vs-closure-setup/10

30. Pros
• Clearer code

31. Use _.bind
function Foobar (input) {
this.prefix = input;
this.echo = _.bind(this.echo, this);
// function, context
}
function Foobar (input) {
this.prefix = input;
_.bindAll(this);
// context
}
http://underscorejs.org/#bind

32. Use $.proxy
function Foobar (input) {
this.prefix = input;
this.echo = $.proxy(this.echo, this);
// function, context
}
function Foobar (input) {
this.prefix = input;
this.echo = $.proxy(this, 'echo');
// context, method name
}
http://api.jquery.com/jQuery.proxy/

33. Bind by Need
fb = new Foobar();
$.get('/info', $.proxy(fb, 'echo'));
$.get('/info', $.proxy(fb.echo, fb));
$.get('/info', $.bind(fb.echo, fb));

34. http://www.flickr.com/photos/othree/8544069132/

35. Avoid Using this

36. Closure
var isIE = true;
function foobar() {
if (!isIE) {
// access isIE is possible because of closure
return;
}
// blah...
};

37. that/self
function Foobar(input) {
var that = this; // that or self
this.prefix = input;
this.echo = function (result) {
return that.prefix + result;
// that is accessible because of closure
};
}
fb = new Foobar('res: ');
$.get('/info', fb.echo);

38. CoffeeScript Fat Arrow
Foobar = (input) ->
@prefix = input
@echo = (result) => @prefix + result
fb = new Foobar('res: ')
$.get('/info', fb.echo)

39. CoffeeScript Fat Arrow
Foobar = (input) ->
@prefix = input
@echo = (result) => @prefix + result
fb = new Foobar('res: ')
$.get('/info', fb.echo)

40. Compile to JS
var Foobar, fb;
Foobar = function(input) {
var _this = this;
this.prefix = input;
return this.echo = function(result) {
return _this.prefix + result;
};
};
fb = new Foobar('res: ');
$.get('/info', fb.echo);

41. Compile to JS
var Foobar, fb;
Foobar = function(input) {
var _this = this;
this.prefix = input;
return this.echo = function(result) {
return _this.prefix + result;
};
};
fb = new Foobar('res: ');
$.get('/info', fb.echo);

42. Compile to JS
var Foobar, fb;
Foobar = function(input) {
var _this = this;
this.prefix = input;
return this.echo = function(result) {
return _this.prefix + result;
};
};
fb = new Foobar('res: ');
$.get('/info', fb.echo);

43. LiveScript use ~>

44. Pros
• No more this issue, context free
• Reduce one call stack
• No call/apply, no impact on performance
• Encapsulation

45. Cons
• Can’t use this tip on normal constructor

46. How about AMD
• Define modules can return constructor,
function, array, primitive data
• Define a singleton module on most cases
• Always have data on module

47. AMD Singleton Module
define('foobar', function () {
return {
init: function (prefix) {
this.prefix = prefix;
}
echo: function (input) {
return this.prefix + input;
}
};
});

48. Cons
• Function can be borrowed
• Not doing on right `this` you expect

49. Avoid Use this
define('foobar', function () {
var self = {};
return {
init: function (prefix) {
self.prefix = prefix;
}
echo: function (input) {
return self.prefix + input;
}
};
});

50. Constructors?
• Use bind to protect methods if necessary

51. Constructor Without
this
function Person(birth, gender) {
var person = {
birth: (birth || '1970/01/01'),
gender: (gender || 'M')
};
return {
getBirth: function () {
return person.birth;
},
getGender: function () {
return person.gender;
}
};
}

52. to new or not to new
var p1 = Person('2013/01/02');
p1.getBirth(); // "2013/01/02"
var p2 = new Person('2000/01/02', 'F');
p2.getBirth(); // "2000/01/02"
p1.getBirth(); // "2013/01/02"

53. Cons
• No prototype inheritance
• More memory usage for methods

54. Backbone Model
define(function (require) {
return Backbone.Model.extend(
initialize: function (attrs) {
return _.bindAll(this);
},
toITEM: function () {
return this.toJSON();
},
toConfig: function () {
return {
name: this.get('name'),
package_name: this.get('package_name')
};
}
);
});

55. Who Use this Tip
• jQuery.Deferred
• jQuery.Callbacks

56. Deferred Chaining
var firstDfd = $.Deferred(),
secondDfd = $.Deferred(),
thirdDfd = $.Deferred();
firstDfd.done(secondDfd.resolve);
secondDfd.done(thirdDfd.resolve);
firstDfd.resolve(); // All Deferred object resolved here

57. Callbacks
https://github.com/jquery/jquery/blob/master/src/deferred.js
// promise[ done | fail | progress ] = list.add
promise[ tuple[1] ] = list.add;
// skip...
// deferred[ resolve | reject | notify ]
deferred[ tuple[0] ] = function() {
deferred[ tuple[0] + "With" ]
(this === deferred ? promise : this, arguments);
return this;
};
deferred[ tuple[0] + "With" ] = list.fireWith;

58. Callbacks
https://github.com/jquery/jquery/blob/master/src/deferred.js
// promise[ done | fail | progress ] = list.add
promise[ tuple[1] ] = list.add;
// skip...
// deferred[ resolve | reject | notify ]
deferred[ tuple[0] ] = function() {
deferred[ tuple[0] + "With" ]
(this === deferred ? promise : this, arguments);
return this;
};
deferred[ tuple[0] + "With" ] = list.fireWith;

59. Actually Are
promise['done'] = resolveCallbacks.add;
promise['fail'] = rejectCallbacks.add;
promise['progress'] = notifyCallbacks.add;
// skip...
deferred["resolveWith"] = resolveCallbacks.fireWith;
deferred["rejectWith"] = rejectCallbacks.fireWith;
deferred["notifyWith"] = notifyCallbacks.fireWith;

60. Summary
• Understand `this`
• Understand how not to use `this`
• Use `this` carefully if necessary

61. Trade-Off
• ‘Not use this’ requires more memory on
methods definition and not easy to
inheritance object
• Benefit is you can write more clear, simple
code

62. References

63. https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this

64. Questions?
http://www.flickr.com/photos/roman/5610736/