Javascript OOP
description
Transcript of Javascript OOP
Javascript OOPMiao Siyu
the question
Robot.instance.hello()
// Hi, I am Miao
the question
Robot = {instance:{hello: function(){alert('Hi, I am Miao')}}}
Robot.instance.hello()
the question
Robot : classRobot.instance: singleton of RobotRobot.instance.hello: class method
1. class
function Robot(){}
2. instance variable
function Robot(){ this.name = 'Miao';}
what's this
function Robot(){ this.name = 'Miao';}
Robot() *
new Robot()
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**
3. method
function Robot(){ this.name = 'Miao';}
Robot.prototype.hello= function () { alert('Hi, I am '+this.name)}
a = new Robot('miao')a.hello()
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
prototype & constructor
function Robot(){}
r = new Robot()
r.constructor.prototype
Robot.prototype.constructor
__proto__: non standard
4. class function/ property
first-class function
function Robot(){ this.name = 'Miao';}
Robot.hello= function(){alert('Robot')}
Robot.size = {height:20, width:15}
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);
5. closure & self-executed function
var nextId = (function(){ var id = 0; return function(){ return id++ }})();
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
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 ; }} ;
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 }
6. getter & setterfunction 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;
}
})());
**: 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)
**: 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
*: force new
function Robot(name){if(!(this instanceof Robot)){return new Robot(name) }else{this.name= name; }}
Robot('miao')new Robot('miao')
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(){...}
extend class
function A() {this.name='a'}function B(){this.type='b'} B.prototype.constructor= Ab = new B() // B {type: "b", name: "a"}
b instanceof Bb 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}
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;
}
clone object
if (!Object.create) {
Object.create = function (o) {
var F= function () { };
F.prototype = o;
return new F();
} ;
}