Understand prototype
-
Upload
zhu-qi -
Category
Technology
-
view
722 -
download
0
description
Transcript of Understand prototype
![Page 2: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/2.jpg)
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
![Page 3: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/3.jpg)
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.
![Page 4: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/4.jpg)
Prototype is prototype?
Alipay Inc
• Prototype property• Prototype object
Prototype contain:
![Page 5: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/5.jpg)
What is prototype?
Alipay Inc
function User(){ //…}User.prototype = { //methods…};
Prototype property
Prototype object
![Page 6: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/6.jpg)
What is prototype?
Alipay Inc
Prototype object 也是类成员的集合
![Page 7: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/7.jpg)
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 //?
![Page 8: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/8.jpg)
What is prototype?Alipay Inc
Javascript原始对象的 prototype是只读的!只有函数对象才有 prototype属性!
![Page 9: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/9.jpg)
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__
![Page 10: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/10.jpg)
How to inherit?
Alipay Inc
PHP: extends
JAVA: extends
Ruby: <
ASP: :
Python: class subClassName(SuperClassName)
C++: :
Javascript: prototype
![Page 11: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/11.jpg)
How to inherit?
Alipay Inc
![Page 12: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/12.jpg)
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;
![Page 13: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/13.jpg)
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]
![Page 14: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/14.jpg)
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;
![Page 15: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/15.jpg)
Alipay Inc
User
sex male
prototypeprototypeObject: Object
constructor:Function
AlipayUser
sex female
prototypeprototypeObject: Object
constructor:AlipayUser
TaobaoUser
sex male
prototypeprototypeObject: Object
constructor:TaobaoUser
![Page 16: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/16.jpg)
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
![Page 17: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/17.jpg)
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;
![Page 18: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/18.jpg)
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;
![Page 19: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/19.jpg)
Object Oriented Programming Goals
Alipay Inc
• Encapsulation
• Polymorphism
• Inheritance
实现类成员,方法的调用
实现在不同的类或对象中响应同样的方法或事件
根据一个对象或类的行为来定义另一个对象或类的行为
![Page 20: Understand prototype](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7b03c4a7959c4688b458a/html5/thumbnails/20.jpg)
Alipay Inc