Created
October 4, 2012 17:48
-
-
Save shiawuen/3835226 to your computer and use it in GitHub Desktop.
this? this?? this!?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| </head> | |
| <body style="padding: 100px;background:#ccc;"> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //// | |
| // In normal day | |
| //// | |
| function example1(){ | |
| p('In normal day') | |
| p(dline) | |
| p('what is this?') | |
| p(line) | |
| p('this == window') | |
| p(this == window) | |
| p(line) | |
| p('this instanceof Window') | |
| p(this instanceof Window) | |
| } | |
| //// | |
| // In DOM event | |
| //// | |
| function example2(){ | |
| p('In DOM event') | |
| p(dline) | |
| on(document.body, 'click', function(event){ | |
| p('this == document.body') | |
| p( this == document.body ) | |
| }) | |
| } | |
| //// | |
| // In Object | |
| //// | |
| function example3(){ | |
| p('In Object') | |
| p(dline) | |
| var cat = { | |
| sound: 'Meow' | |
| , type: 'Cat' | |
| , makeSound: function(){ | |
| p(this.type + ' ' + this.sound); | |
| } | |
| }; | |
| var makeSound = cat.makeSound; | |
| var dog = { | |
| sound: 'Wuuuwoo~' | |
| , type: 'Dog' | |
| } | |
| dog.bark = makeSound; | |
| cat.makeSound() // = "Cat Meow" | |
| p(line) | |
| makeSound() // = "undefined undefined" | |
| p(line) | |
| dog.bark() // "Dog Wuuuwoo~" | |
| p(line) | |
| } | |
| //// | |
| // new?? | |
| //// | |
| function example4(){ | |
| p('new??') | |
| p(dline) | |
| var Person = function(){}; | |
| var p1 = Person(); | |
| var p2 = new Person; | |
| var p3 = new Person(); | |
| p('p1 instanceof Person') | |
| p( p1 instanceof Person ) | |
| p('p1 === window') | |
| p( p1 === window ) | |
| p('p1 === null') | |
| p( p1 === null ) | |
| p('p1 === undefined') | |
| p( p1 === undefined ) | |
| p(line) | |
| p('p2 instanceof Person') | |
| p( p2 instanceof Person ) | |
| p(line) | |
| p('p3 instanceof Person') | |
| p( p3 instanceof Person ) | |
| p(line) | |
| Person.prototype.jump = function(){ | |
| p('Jump!'); | |
| } | |
| } | |
| //// | |
| // Can I change this? | |
| //// | |
| function example5(){ | |
| p('Can I change this?') | |
| p(dline) | |
| var basic = { name: 'basic' }; | |
| var temp = { name: 'temp' }; | |
| var newObj = { name: 'OMG' } | |
| var whoami = function(){ p(this.name) }; | |
| var whoami2 = (function(obj){ | |
| return function(){ | |
| whoami.call(obj); | |
| } | |
| })(temp); | |
| basic.whoami = whoami; | |
| newObj.whoami = whoami2; | |
| p('basic') | |
| basic.whoami() | |
| p(line) | |
| p('temp before') | |
| whoami.call(temp) | |
| whoami.apply(temp) | |
| p('temp after') | |
| whoami() | |
| p(line) | |
| p('old this') | |
| whoami() | |
| p('new this') | |
| whoami2() | |
| whoami2() | |
| newObj.whoami() | |
| p(line) | |
| } | |
| //// | |
| // call? apply? | |
| //// | |
| function example6(){ | |
| var fn = function(arg1, arg2, arg3){ | |
| p(this.name), p(arg1), p(arg2), p(arg3); | |
| }; | |
| var call = { name: 'this1' }; | |
| var apply = { name: 'this2' }; | |
| var a1 = 'arg1'; | |
| var a2 = 'arg2'; | |
| var a3 = 'arg3'; | |
| p('fn()') | |
| fn(a1, a2, a3) | |
| p(line) | |
| p('fn.call()') | |
| fn.call(call, a1, a2, a3) | |
| p(line) | |
| p('fn.apply()') | |
| fn.apply(apply, [a1, a2, a3]) | |
| p(line) | |
| } | |
| //// | |
| // ensure this | |
| //// | |
| function example7(){ | |
| p('ensure this') | |
| p(dline) | |
| var Person = function(data){ | |
| if ( ! (this instanceof Person)) { | |
| return new Person(data); | |
| } | |
| this.name = data.name; | |
| }; | |
| Person.prototype.whoami = function(){ p(this.name) }; | |
| var p1 = Person({name: 'xiao ming'}); | |
| var p2 = new Person({name: 'xiao qiang'}); | |
| p('p1') | |
| p('p1 instanceof Person') | |
| p( p1 instanceof Person ) | |
| p1.whoami() | |
| p(line) | |
| p('p2') | |
| p('p2 instanceof Person') | |
| p( p2 instanceof Person ) | |
| p2.whoami() | |
| p(line) | |
| } | |
| //// | |
| // Function.prototype.bind | |
| // | |
| // NOTE: | |
| // This only available in ES5, | |
| // there is shim/workaround for older browsers | |
| //// | |
| function example8(){ | |
| p('Function.prototype.bind') | |
| p(dline) | |
| var whoami = function(){ p(this.name) }; | |
| var yasith = { name: 'xiao yasith' }; | |
| var asri = { name: 'xiao asri' }; | |
| var asriAlways = whoami.bind(asri); | |
| p('normal fn assign') | |
| yasith.whoami = whoami; | |
| yasith.whoami() | |
| p(line) | |
| p('binded fn assign') | |
| yasith.whoami = asriAlways; | |
| yasith.whoami() | |
| p(line) | |
| p('call fn independently') | |
| asriAlways() | |
| p(line) | |
| p('after many bind to asriAlways') | |
| asriAlways = asriAlways.bind(yasith) | |
| .bind(yasith) | |
| .bind(yasith) | |
| .bind(yasith) | |
| .bind(yasith); | |
| asriAlways() | |
| p(line) | |
| } | |
| /** | |
| * Some helpers | |
| */ | |
| function p(obj){ | |
| console.log(obj); | |
| } | |
| function on(elem, event, callback){ | |
| elem.addEventListener(event, callback, false); | |
| } | |
| var line = '----------------------------------------'; | |
| var dline = '========================================'; | |
| var slice = Array.prototype.slice; | |
| window.name = 'window'; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment