Javascript OOP

507 views

Published on

Javascript OOP

Published in: Software, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
507
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript OOP

  1. 1. Javascript OOP Miao Siyu
  2. 2. the question Robot.instance.hello() // Hi, I am Miao
  3. 3. the question Robot = {instance:{hello: function(){alert('Hi, I am Miao')}}} Robot.instance.hello()
  4. 4. the question Robot : class Robot.instance: singleton of Robot Robot.instance.hello: class method
  5. 5. 1. class function Robot(){}
  6. 6. 2. instance variable function Robot(){ this.name = 'Miao'; }
  7. 7. what's this function Robot(){ this.name = 'Miao'; } Robot() * new Robot()
  8. 8. what's this var a = {name:'miao'} var say = function(){alert(this.name)} var name = 'miao2' a.say = say a.say() // miao say() // miao2 setTimeout(a.say, 0) // miao2**
  9. 9. 3. method function Robot(){ this.name = 'Miao'; } Robot.prototype.hello= function () { alert('Hi, I am '+this.name) } a = new Robot('miao') a.hello()
  10. 10. 3. method: why prototype function Robot(){ this.name = 'Miao'; } Robot.prototype.hello= function () { alert('Hi, I am '+this.name) } a = new Robot('miao') a.hasOwnProperty('hello') a.hasOwnProperty('name') 1000 Robot, 1000 name, one hello function
  11. 11. prototype & constructor function Robot(){} r = new Robot() r.constructor.prototype Robot.prototype.constructor __proto__: non standard
  12. 12. 4. class function/ property first-class function function Robot(){ this.name = 'Miao'; } Robot.hello= function(){alert('Robot')} Robot.size = {height:20, width:15}
  13. 13. 5. closure & self-executed function var instance = new ( function Robot(name){ this.name =name; })('miao'); var instance = (function (name){ return {name: name}; })('miao'); (function($){ ... })(jquery);
  14. 14. 5. closure & self-executed function var nextId = (function(){ var id = 0; return function(){ return id++ } })();
  15. 15. 5. closure & self-executed function function Robot(){this.name = 'miao'} Robot.getInstance= (function(){ var _instance; return function(){ if(!_instance)_instance= new Robot(); return _instance; } })(); r1 = Robot.getInstance() r2 = Robot.getInstance() r1 === r2
  16. 16. 6. getter & setter function Robot(name){ this.name= name; } Robot.prototype = { get name(){ console.log ('getter', this._name); return this._name; }, set name(name){ console.log ('setter', this._name, name); this._name = name ; } } ;
  17. 17. 6. getter & setter function Robot(name){ this.name= name; Object.defineProperty(this, 'type', {value: 'Robot', writable: false, enumerable: false, configurable: false}); // get / set can be defined }
  18. 18. 6. getter & setter function Robot(name){ this.name= name; } Robot.prototype.hello = function(){alert('Hi, I am '+this.name)} Robot.__defineGetter__('instance', (function(){ var _instance; return function () { if (!_instance) _instance = new Robot('miao'); return _instance; } })());
  19. 19. **: bind / call / apply var a = {name:'miao'} var say = function(){alert(this.name)} var name = 'miao2' setTimeout(a.say.bind(a), 0) // miao function funca(a,b,c){alert(a+b+c)} funcb = funca.bind(null, 1)
  20. 20. **: bind / call / apply function b() {console.log(arguments);arguments.sort()} b(2,1,3) // error sort= Array.prototype.sort function b() {console.log(arguments);console.log(sort.call(arguments))} b(2,1,3) // 1,2,3
  21. 21. *: force new function Robot(name){ if(!(this instanceof Robot)){ return new Robot(name) }else{ this.name= name; } } Robot('miao') new Robot('miao')
  22. 22. array function a = [1,3,2] some: var flag = a.some(function(item,i){if(item>1){return true}}); forEach: a.forEach(function(item,i){console.log(item)}); reduce: a.reduce(function(item, sum, i){return item+sum;}, 0) sort: a.sort(function(itema,itemb){return itemb-itema}) map: a.map(function(item,i){return item*item}); filter: a.filter(function(item,i){return item>1}) Splice: indexOf: Array.prototype.indexOf = function(){...}
  23. 23. extend class function A() {this.name='a'} function B(){this.type='b'} B.prototype.constructor= A b = new B() // B {type: "b", name: "a"} b instanceof B b instanceof A a = new A() B.prototype.fb = function(){alert('B.fb')} B.prototype.fa = function(){alert('B.fa')} A.prototype.fa = function(){alert('A.fa')} // a: {name: "a", fa: function} // b: {type: "b", name: "a", fb: function, fa: function}
  24. 24. clone object function clone(obj) { if (null == obj || "object" != typeof obj) return obj; var copy = obj.constructor(); for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr]; } return copy; }
  25. 25. clone object if (!Object.create) { Object.create = function (o) { var F= function () { }; F.prototype = o; return new F(); } ; }

×