Understand Prototype 颂颂 (http://qiqicartoon.com ) Alipay Inc
Jan 15, 2015
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
What is prototype?
Alipay Inc
By ECMASCRIPT: Each constructor is a function that has a property named ―prototype that is used to implement prototype-based inheritance and shared properties.
Prototype is prototype?
Alipay Inc
• Prototype property• Prototype object
Prototype contain:
What is prototype?
Alipay Inc
function User(){ //…}User.prototype = { //methods…};
Prototype property
Prototype object
What is prototype?
Alipay Inc
Prototype object 也是类成员的集合
What is prototype?Alipay Inc
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 //?
What is prototype?Alipay Inc
Javascript原始对象的 prototype是只读的!只有函数对象才有 prototype属性!
What is prototype?Alipay Inc
Prototype Object
methods• __defineGetter__• __defineSetter__• eval• hasOwnProperty• isPrototypeOf• valueOf• watch• unwatch• toString• toSource• propertyIsEnumerable• __noSuchMethod__• __lookupGetter__• __lookupSetter__
properties• constructor• __parent__• __proto__• __count__
How to inherit?
Alipay Inc
PHP: extends
JAVA: extends
Ruby: <
ASP: :
Python: class subClassName(SuperClassName)
C++: :
Javascript: prototype
How to inherit?
Alipay Inc
How to inherit?
Alipay Inc
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;
Simple Object
Alipay Inc
function User(){ this.firstName = ‘ 颂’ ; this.lastName = ‘ 赞’ ;}var user = {firstName:’zhu’,lastName:’qi’}; User.prototype = user; var userByConstructor = new User();
user
firstName zhu
lastName qi
prototypeprototypeObject?
constructor:Object
userByConstructor
firstName 颂lastName 赞
prototypeprototypeObject:user
constructor:Function
[Object]
Defining Class
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;
Alipay Inc
User
sex male
prototypeprototypeObject: Object
constructor:Function
AlipayUser
sex female
prototypeprototypeObject: Object
constructor:AlipayUser
TaobaoUser
sex male
prototypeprototypeObject: Object
constructor:TaobaoUser
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
Defining and Calling method in Class
Alipay Inc
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;
Calling method of SuperClass from SubClass
Alipay Inc
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;
Object Oriented Programming Goals
Alipay Inc
• Encapsulation
• Polymorphism
• Inheritance
实现类成员,方法的调用
实现在不同的类或对象中响应同样的方法或事件
根据一个对象或类的行为来定义另一个对象或类的行为
Alipay Inc