Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Understand prototype

1,533 views

Published on

理解javascript prototype

Published in: Technology
  • Be the first to comment

Understand prototype

  1. 1. Alipay Inc Understand Prototype 颂赞 (http://qiqicartoon.com)
  2. 2. Alipay Inc• What is prototype?• How to inherit?• Simple Object• Defining a Class• Defining and Calling method in Class• Calling the SuperClass from SubClass• Overriding Method of SuperClass in SubClass• Calling Method of SuperClass from SubClass
  3. 3. Alipay Inc What is prototype? By ECMASCRIPT: Each constructor is a function that has a property named ―prototype that is used to implement prototype-based inheritance and shared properties.
  4. 4. Alipay Inc Prototype is prototype? Prototype contain: • Prototype property • Prototype object
  5. 5. Alipay Inc What is prototype? function User(){ //… } Prototype property User.prototype = { //methods… }; Prototype object
  6. 6. Alipay Inc What is prototype? Prototype object也是类成员的集合
  7. 7. Alipay Inc What is prototype? Array, Object, Number, Function, Null, Undefind function _arrayObj(){} Array.prototype = new _arrayObj(); console.log(Array.prototype.constructor) ;//Array,not Function var userName = ‘zhuiq’, companies = [‘alipay’,’alisoft’], friends = { ‘a’:{},’b’:{} }; userName.prototype = {};//? companies.prototype = {};//? friends.prototype = {};//? null.prototype //? undefined.prototype //?
  8. 8. Alipay Inc What is prototype?Javascript原始对象的prototype是只读的!只有函数对象才有prototype属性!
  9. 9. Alipay Inc What is prototype? methods • __defineGetter__ • __defineSetter__ • eval • hasOwnProperty • isPrototypeOf • valueOf Prototype • watch Object • unwatch • toString properties • toSource • propertyIsEnumerable • constructor • __noSuchMethod__ • __parent__ • __lookupGetter__ • __proto__ • __lookupSetter__ • __count__
  10. 10. Alipay Inc How to inherit?PHP: extendsJAVA: extendsRuby: <ASP: :Python: class subClassName(SuperClassName)C++: :Javascript: prototype
  11. 11. Alipay Inc How to inherit?
  12. 12. Alipay Inc How to inherit? var CF= function (){}, CFp = {CFP1:1,CFP2:2}; CF.prototype = CFp; CF.prototype.P1 = ‘P1’; CF.prototype.P2 = ‘P2’; var cf1 = new CF, cf2 = new CF, cf3 = new CF, cf4 = new CF, cf5 = new CF;
  13. 13. Alipay Inc Simple Object function User(){ this.firstName = ‘颂’; this.lastName = ‘赞’; } var user = {firstName:’zhu’,lastName:’qi’}; User.prototype = user; var userByConstructor = new User(); user userByConstructor firstName zhu firstName 颂 lastName qi lastName 赞 prototypeObject? [Object] prototypeObject:user prototype prototype constructor:Object constructor:Function
  14. 14. Alipay Inc function User(){ this.sex= ‘male’; } User.prototype = { getSex : function (){return this.sex;} }; function AlipayUser(){ this.sex = ‘female’; } function TaobaoUser(){} AlipayUser.prototype = new User; TaobaoUser.prototype = new User; AlipayUser.prototype.constructor = AlipayUser; TaobaoUser.prototype.constructor = TaobaoUser; var alipay_user = new AlipayUser (); var taobao_user = new TaobaoUser;
  15. 15. Alipay Inc User sex male prototypeObject: Object prototype constructor:Function TaobaoUser sex male prototypeObject: Object AlipayUser prototype sex female constructor:TaobaoUser prototypeObject: Object prototype constructor:AlipayUser
  16. 16. Alipay Inc console.log(alipay_user .constructor);//AlipayUser console.log(taobao_user .constructor);//TaobaoUser console.log(alipay_user instanceof AlipayUser );//true; console.log(taobao_user instanceof TaobaoUser);//true; console.log( taobao_user instanceof User && alipay_user instanceof User );//true
  17. 17. Alipay Inc Defining and Calling method in Class function TaobaoUser(cfg){ User.call(this,cfg); this.sex = ‘undefined’; this.instances = this.instances || []; this.instances.push(this); } TaobaoUser.getAllInstances = function (){ return this.instances; }; TaobaoUser.prototype = new User; TaobaoUser.prototype.setSex = function (sex){ this.sex = sex; return this; }; TaobaoUser.prototype.constructor = TaobaoUser; var user = new TaobaoUser(); user.setSex(‘female’).getSex();//female;
  18. 18. Alipay IncCalling method of SuperClass from SubClass User._getSelfSex_ = function (){ return this.sex || ‘This is User’s sex.’; }; TaobaoUser.getSex = function (){ var superSex = User.prototype.getSex(); return User._getSelfSex_() + ‘ ’ + this.sex; }; var user = new TaobaoUser; user.getSex(); // This is User’s sex undefined;
  19. 19. Alipay Inc Object Oriented Programming Goals • Encapsulation 实现类成员,方法的调用 • Polymorphism 实现在不同的类或对象中响应同样的方法或事件 • Inheritance 根据一个对象或类的行为来定义另一个对象或类的行为
  20. 20. Alipay Inc

×