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();

    } ;

}