Understand Prototype

颂赞(http://qiqicartoon.com)

Alipay Inc

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