SlideShare a Scribd company logo
1 of 199
Download to read offline
Oop in java script
Oop in java script
Oop in java script
Oop in java script
Oop in java script
Oop in java script
{}
{}  1
'nelm.io'
  true
undefined
  null
{}
new Object();
{}
// v.s.
new Object();
(function (){
    var Object = function () {
        this.changed = true;
    }
    console.log(new Object());
}());

// {changed: true}
(function (){
    var Object = function () {
        this.changed = true;
    }
    console.log(new Object());
}());

// {changed: true}
(function (){
    var Object = function () {
        this.changed = true;
    }
    console.log(new Object());
}());

// {changed: true}
(function (){
    var Object = function () {
        this.changed = true;
    }
    console.log(new Object());
}());

// {changed: true}
(function (){
    var Object = function () {
        this.changed = true;
    }
    console.log(new Object());
}());

// {changed: true}
(function (){
    var Object = function () {
        this.changed = true;
    }
    console.log(new Object());
}());

// {changed: true}
{}
new Object();
var o = new Object(1);
console.log(o.constructor);

// function Number() { }
// new Number(1);
var o = new Object('1');
console.log(o.constructor);

// function String() { }
// new String('1');
var o = new Object(true);
console.log(o.constructor);

// function Boolean() { }
// new Boolean(true);
var a = {};
var b = new Object();
var c = Object();
var a = {};
var b = new Object();
var c = Object();
var a = {};
var b = new Object();
var c = Object();
new
new Object();
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

// {brand: 'Fiat'}
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

// {brand: 'Fiat'}
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

// {brand: 'Fiat'}
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

// {brand: 'Fiat'}
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar =        Car('Fiat');

// undefined
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar =        Car('Fiat');

// undefined
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

// {brand: 'Fiat'}
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

// {brand: 'Fiat'}
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
    console.log(
        this.constructor === Car
    );
    // true
};

myCar = new Car('Fiat');
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
    console.log(
        this.constructor === Car
    );
    // undefined
};

myCar =     Car('Fiat');
var Car, myCar;

Car = function (brand) {
    if (this.constructor !== Car) {
        return new Car(brand);
    }
    this.brand = brand;
};

myCar =     Car('Fiat');
var Car, myCar;

Car = function (brand) {
    if (this.constructor !== Car) {
        return new Car(brand);
    }
    this.brand = brand;
};

myCar = new Car('Fiat');
prototype
{}
prototype
var C = function () {};

console.log(C.prototype);

{
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};

console.log(C.prototype);

{
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};

console.log(C.prototype);

{
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};

console.log(C.prototype);

{
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};

console.log(C.prototype);

{
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};
C.prototype = {
   a: "A",
   b: "B",
   constructor: C
};

console.log(C.prototype);

{
    a: "A",
    b: "B",
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};
C.prototype = {
   a: "A",
   b: "B",
   constructor: C
};

console.log(C.prototype);

{
    a: "A",
    b: "B",
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};
C.prototype = {
   a: "A",
   b: "B",
   constructor: C // !!!
};

console.log(C.prototype);

{
    a: "A",
    b: "B",
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};
C.prototype = {
   a: "A",
   b: "B",
   constructor: C
};

console.log(C.prototype);

{
    a: "A",
    b: "B",
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};
C.prototype = {
   a: "A",
   b: "B",
   constructor: C
};

console.log(C.prototype);

{
    a: "A",
    b: "B",
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};
C.prototype = {
   a: "A",
   b: "B",
   constructor: C
};

console.log(C.prototype);

{
    a: "A",
    b: "B",
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};
C.prototype = {
   a: "A",
   b: "B",
   constructor: C
};

console.log(C.prototype);

{
    a: "A",
    b: "B",
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};



C.prototype.a = "A";
C.prototype.b = "B";



console.log(C.prototype);

{
    a: "A",
    b: "B",
    constructor: C,
    __proto__: Object.prototype
}
var C = function () {};



C.prototype.a = "A";
C.prototype.b = "B";



console.log(C.prototype);

{
    a: "A",
    b: "B",
    constructor: C,
    __proto__: Object.prototype
}
{}
prototype
property
  v.s.
attribute
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }
myCar.prototype; // undefined
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }
myCar.prototype; // undefined
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }
myCar.prototype; // undefined
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }
myCar.prototype; // undefined
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }
myCar.prototype; // undefined
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

myCar = new Car('Fiat');

Car.prototype; // { /* ... */ }
myCar.prototype; // undefined
property
  v.s.
attribute
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

Car.prototype.getBrand = function () {
    return this.brand;
};

myCar = new Car('Fiat');
myCar.brand;
myCar.getBrand();
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

Car.prototype.getBrand = function () {
    return this.brand;
};

myCar = new Car('Fiat');
myCar.brand;
myCar.getBrand();
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

Car.prototype.getBrand = function () {
    return this.brand;
};

myCar = new Car('Fiat');
myCar.brand;
myCar.getBrand();
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

Car.prototype.getBrand = function () {
    return this.brand;
};

myCar = new Car('Fiat');
myCar.brand;
myCar.getBrand();
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

Car.prototype.getBrand = function () {
    return this.brand;
};

myCar = new Car('Fiat');
myCar.brand;
myCar.getBrand();
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

Car.prototype.getBrand = function () {
    return this.brand;
};

myCar = new Car('Fiat');
myCar.brand;
myCar.getBrand();
Oop in java script
Oop in java script
var Car, myCar;

Car = function (brand) {
    this.brand = brand;
};

Car.prototype.getBrand = function () {
    return this.brand;
};

myCar = new Car('Fiat');
myCar.brand;
myCar.getBrand();
{}
prototype
inheritance
classical
inheritance
  modern
classical
inheritance
var Car, ItalianCar, myCar;

Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {};

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');
var Car, ItalianCar, myCar;

Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');
var Car, ItalianCar, myCar;

Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');
var Car, ItalianCar, myCar;

Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {};

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');
var Car, ItalianCar, myCar;

Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');
var Car, ItalianCar, myCar;

Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');
var Car, ItalianCar, myCar;

Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {};

inherit(ItalianCar, Car);

myCar = new ItalianCar('Fiat');
classical inheritance
1.   Default Pattern
2.   Rent-a-Constructor
3.   Rent and Set Prototype
4.   Share Prototype
5.   Temp. Constructor
classical inheritance
1.   Default Pattern
2.   Rent-a-Constructor
3.   Rent and Set Prototype
4.   Share Prototype
5.   Temp. Constructor
var inherit = function (Child, Parent) {
  Child.prototype = new Parent();
}
var inherit = function (Child, Parent) {
  Child.prototype = new Parent();
}
myCar = new ItalianCar();

myCar.getBrand();
// 'Homemade'
var inherit = function (Child, Parent) {
  Child.prototype = new Parent();
}
myCar = new ItalianCar();

myCar.getBrand();
// 'Homemade'
var inherit = function (Child, Parent) {
  Child.prototype = new Parent();
}
myCar = new ItalianCar();

myCar.getBrand();
// 'Homemade'
var inherit = function (Child, Parent) {
  Child.prototype = new Parent();
}
myCar = new ItalianCar();

myCar.getBrand();
// 'Homemade'
myCar.brand = "Fiat";
myCar.getBrand(); // 'Fiat'
myCar.getBrand();
// 'Fiat'
myCar = new ItalianCar();
myCar.brand = 'Fiat';
myCar = new ItalianCar('Fiat')
myCar = new ItalianCar('Fiat')
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;

Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {}

inherit(ItalianCar, Car);
// ItalianCar.prototype = new Car();
classical inheritance
1.   Default Pattern
2.   Rent-a-Constructor
3.   Rent and Set Prototype
4.   Share Prototype
5.   Temp. Constructor
ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand; // 'undefined'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand; // 'undefined'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand; // 'undefined'
Oop in java script
classical inheritance
1.   Default Pattern
2.   Rent-a-Constructor
3.   Rent and Set Prototype
4.   Share Prototype
5.   Temp. Constructor
ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();
ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();
ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();
ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand(); // 'Fiat'
delete myCar.brand;
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand(); // 'Fiat'
delete myCar.brand;
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand(); // 'Fiat'
delete myCar.brand;
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand(); // 'Fiat'
delete myCar.brand;
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand(); // 'Fiat'
delete myCar.brand;
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand(); // 'Fiat'
delete myCar.brand;
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand(); // 'Fiat'
delete myCar.brand;
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand(); // 'Fiat'
delete myCar.brand;
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}
ItalianCar.prototype = new Car();

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand(); // 'Fiat'
delete myCar.brand;
myCar.getBrand(); // 'Homemade'
var Car, ItalianCar, myCar;
Car = function (brand) {
  this.brand = brand || 'Homemade';
}
Car.prototype.getBrand = function () {
  return this.brand;
}

ItalianCar = function (brand) {
  Car.apply(this, [brand]);
}

myCar = new ItalianCar('Fiat');
myCar.brand; // 'Fiat';
myCar.getBrand; // 'undefined'
Oop in java script
classical inheritance
1.   Default Pattern
2.   Rent-a-Constructor
3.   Rent and Set Prototype
4.   Share Prototype
5.   Temp. Constructor
var inherit = function (Child, Parent) {
  Child.prototype = Parent.prototype;
}
Oop in java script
classical inheritance
1.   Default Pattern
2.   Rent-a-Constructor
3.   Rent and Set Prototype
4.   Share Prototype
5.   Temp. Constructor
var inherit = function (Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
}
var inherit = function (Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
}
var inherit = function (Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
}
var inherit = function (Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
}
var inherit = function (Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
}
Oop in java script
inherit(ItalianCar, Car);
myCar = new ItalianCar();
myCar.brand;    // undefined
myCar.getBrand; // function
inherit(ItalianCar, Car);
myCar = new ItalianCar();
myCar.brand;    // undefined
myCar.getBrand; // function
inherit(ItalianCar, Car);
myCar = new ItalianCar();
myCar.brand;    // undefined
myCar.getBrand; // function
inherit(ItalianCar, Car);
myCar = new ItalianCar();
myCar.brand;    // undefined
myCar.getBrand; // function
inherit(ItalianCar, Car);
myCar = new ItalianCar();
myCar.brand;    // undefined
myCar.getBrand; // function
inherit(ItalianCar, Car);
myCar = new ItalianCar();
myCar.brand;    // undefined
myCar.getBrand; // function
var inherit = function (Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.uber = Parent.prototype;
}
var inherit = function (Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.uber = Parent.prototype;
}
var inherit = function (Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.uber = Parent.prototype;
  Child.prototype.constructor = Child;
}
var inherit = function (Child, Parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.uber = Parent.prototype;
  Child.prototype.constructor = Child;
}
classical inheritance
1.   Default Pattern
2.   Rent-a-Constructor
3.   Rent and Set Prototype
4.   Share Prototype
5.   Temp. Constructor
classical inheritance
1.   Default Pattern



klass
2.   Rent-a-Constructor
3.   Rent and Set Prototype
4.   Share Prototype
5.   Temp. Constructor
var Parent = klass(
   null,
   {
     __construct: function () {},
     someMethod: function () {}
   }
);

var Child = klass(
   Parent,
   {
     __construct: function () {},
     childMethod: function () {}
   }
);
var Parent = klass(
   null,
   {
     __construct: function () {},
     someMethod: function () {}
   }
);

var Child = klass(
   Parent,
   {
     __construct: function () {},
     childMethod: function () {}
   }
);
var Parent = klass(
   null,
   {
     __construct: function () {},
     someMethod: function () {}
   }
);

var Child = klass(
   Parent,
   {
     __construct: function () {},
     childMethod: function () {}
   }
);
var Parent = klass(
   null,
   {
     __construct: function () {},
     someMethod: function () {}
   }
);

var Child = klass(
   Parent,
   {
     __construct: function () {},
     childMethod: function () {}
   }
);
var Parent = klass(
   null,
   {
     __construct: function () {},
     someMethod: function () {}
   }
);

var Child = klass(
   Parent,
   {
     __construct: function () {},
     childMethod: function () {}
   }
);
var Parent = klass(
   null,
   {
     __construct: function () {},
     someMethod: function () {}
   }
);

var Child = klass(
   Parent,
   {
     __construct: function () {},
     childMethod: function () {}
   }
);
var Parent = klass(
   null,
   {
     __construct: function () {},
     someMethod: function () {}
   }
);

var Child = klass(
   Parent,
   {
     __construct: function () {},
     childMethod: function () {}
   }
);
var Man = klass(
   null,
   {
     __construct: function (what) {
        console.log('man constructor');
        this.name = what;
     },
     getName: function () {
        return this.name;
     }
   }
);
var Man = klass(
   null,
   {
     __construct: function (what) {
        console.log('man constructor');
        this.name = what;
     },
     getName: function () {
        return this.name;
     }
   }
);
var Man = klass(
   null,
   {
     __construct: function (what) {
        console.log('man constructor');
        this.name = what;
     },
     getName: function () {
        return this.name;
     }
   }
);
var Man = klass(
   null,
   {
     __construct: function (what) {
        console.log('man constructor');
        this.name = what;
     },
     getName: function () {
        return this.name;
     }
   }
);
var Man = klass(
   null,
   {
     __construct: function (what) {
        console.log('man constructor');
        this.name = what;
     },
     getName: function () {
        return this.name;
     }
   }
);
var Man = klass(
   null,
   {
     __construct: function (what) {
        console.log('man constructor');
        this.name = what;
     },
     getName: function () {
        return this.name;
     }
   }
);
var Man = klass(
   null,
   {
     __construct: function (what) {
        console.log('man constructor');
        this.name = what;
     },
     getName: function () {
        return this.name;
     }
   }
);
var first = new Man('Adam');
// logs 'man constructor'
first.getName();
// 'Adam'
var first = new Man('Adam');
// logs 'man constructor'
first.getName();
// 'Adam'
var first = new Man('Adam');
// logs 'man constructor'
first.getName();
// 'Adam'
var first = new Man('Adam');
// logs 'man constructor'
first.getName();
// 'Adam'
var SuperMan = klass(
   Man,
   {
     __construct: function (what) {
        console.log('super man constructor');
     },
     getName: function () {
        var name = SuperMan.uber.getName.call(this);
        return 'I am ' + name;
     }
   }
);
var SuperMan = klass(
   Man,
   {
     __construct: function (what) {
        console.log('super man constructor');
     },
     getName: function () {
        var name = SuperMan.uber.getName.call(this);
        return 'I am ' + name;
     }
   }
);
var SuperMan = klass(
   Man,
   {
     __construct: function (what) {
        console.log('super man constructor');
     },
     getName: function () {
        var name = SuperMan.uber.getName.call(this);
        return 'I am ' + name;
     }
   }
);
var SuperMan = klass(
   Man,
   {
     __construct: function (what) {
        console.log('super man constructor');
     },
     getName: function () {
        var name = SuperMan.uber.getName.call(this);
        return 'I am ' + name;
     }
   }
);
var SuperMan = klass(
   Man,
   {
     __construct: function (what) {
        console.log('super man constructor');
     },
     getName: function () {
        var name = SuperMan.uber.getName.call(this);
        return 'I am ' + name;
     }
   }
);
var SuperMan = klass(
   Man,
   {
     __construct: function (what) {
        console.log('super man constructor');
     },
     getName: function () {
        var name = SuperMan.uber.getName.call(this);
        return 'I am ' + name;
     }
   }
);
var SuperMan = klass(
   Man,
   {
     __construct: function (what) {
        console.log('super man constructor');
     },
     getName: function () {
        var name = SuperMan.uber.getName.call(this);
        return 'I am ' + name;
     }
   }
);
var clark = new SuperMan('Clark Kent');
// logs 'man constructor'
// and 'super man constructor'
clark.getName();
// 'I am Clark Kent'
var clark = new SuperMan('Clark Kent');
// logs 'man constructor'
// and 'super man constructor'
clark.getName();
// 'I am Clark Kent'
var clark = new SuperMan('Clark Kent');
// logs 'man constructor'
// and 'super man constructor'
clark.getName();
// 'I am Clark Kent'
var clark = new SuperMan('Clark Kent');
// logs 'man constructor'
// and 'super man constructor'
clark.getName();
// 'I am Clark Kent'
var clark = new SuperMan('Clark Kent');
// logs 'man constructor'
// and 'super man constructor'
clark.getName();
// 'I am Clark Kent'
var klass = function (Parent, props) {
  var Child, F, i;

     Child = function () {
        if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
          Child.uber.__construct.apply(this, arguments);
        }
        if (Child.prototype.hasOwnProperty('__construct')) {
          Child.prototype.__construct.apply(this, arguments);
        }
     };

     Parent = Parent || Object;
     F = function () {};
     F.prototype = Parent.prototype;
     Child.prototype = new F();
     Child.uber = Parent.prototype;
     Child.prototype.constructor = Child;

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {
  var Child, F, i;

     Child = function () {
        if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
          Child.uber.__construct.apply(this, arguments);
        }
        if (Child.prototype.hasOwnProperty('__construct')) {
          Child.prototype.__construct.apply(this, arguments);
        }
     };

     Parent = Parent || Object;
     F = function () {};
     F.prototype = Parent.prototype;
     Child.prototype = new F();
     Child.uber = Parent.prototype;
     Child.prototype.constructor = Child;

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {
  var Child, F, i;

     Child = function () {
        if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
          Child.uber.__construct.apply(this, arguments);
        }
        if (Child.prototype.hasOwnProperty('__construct')) {
          Child.prototype.__construct.apply(this, arguments);
        }
     };

     Parent = Parent || Object;
     F = function () {};
     F.prototype = Parent.prototype;
     Child.prototype = new F();
     Child.uber = Parent.prototype;
     Child.prototype.constructor = Child;

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {
  var Child, F, i;

     Child = function () {
        if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
          Child.uber.__construct.apply(this, arguments);
        }
        if (Child.prototype.hasOwnProperty('__construct')) {
          Child.prototype.__construct.apply(this, arguments);
        }
     };

     Parent = Parent || Object;
     F = function () {};
     F.prototype = Parent.prototype;
     Child.prototype = new F();
     Child.uber = Parent.prototype;
     Child.prototype.constructor = Child;

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {
  var Child, F, i;

     Child = function () {
        if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
          Child.uber.__construct.apply(this, arguments);
        }
        if (Child.prototype.hasOwnProperty('__construct')) {
          Child.prototype.__construct.apply(this, arguments);
        }
     };

     Parent = Parent || Object;
     F = function () {};
     F.prototype = Parent.prototype;
     Child.prototype = new F();
     Child.uber = Parent.prototype;
     Child.prototype.constructor = Child;

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
Child = function () {
   if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
     Child.uber.__construct.apply(this, arguments);
   }
   if (Child.prototype.hasOwnProperty('__construct')) {
     Child.prototype.__construct.apply(this, arguments);
   }
};
Child = function () {
   if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
     Child.uber.__construct.apply(this, arguments);
   }
   if (Child.prototype.hasOwnProperty('__construct')) {
     Child.prototype.__construct.apply(this, arguments);
   }
};
Child = function () {
   if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
     Child.uber.__construct.apply(this, arguments);
   }
   if (Child.prototype.hasOwnProperty('__construct')) {
     Child.prototype.__construct.apply(this, arguments);
   }
};
Child = function () {
   if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
     Child.uber.__construct.apply(this, arguments);
   }
   if (Child.prototype.hasOwnProperty('__construct')) {
     Child.prototype.__construct.apply(this, arguments);
   }
};
Child = function () {
   if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
     Child.uber.__construct.apply(this, arguments);
   }
   if (Child.prototype.hasOwnProperty('__construct')) {
     Child.prototype.__construct.apply(this, arguments);
   }
};
Parent = Parent || Object;
F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.uber = Parent.prototype;
Child.prototype.constructor = Child;
Parent = Parent || Object;
F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.uber = Parent.prototype;
Child.prototype.constructor = Child;
Parent = Parent || Object;
F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.uber = Parent.prototype;
Child.prototype.constructor = Child;
Parent = Parent || Object;
F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.uber = Parent.prototype;
Child.prototype.constructor = Child;
Parent = Parent || Object;
F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.uber = Parent.prototype;
Child.prototype.constructor = Child;
Parent = Parent || Object;
F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.uber = Parent.prototype;
Child.prototype.constructor = Child;
var klass = function (Parent, props) {

     /* ... */

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {

     /* ... */

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {

     /* ... */

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {

     /* ... */

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {

     /* ... */

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {

     /* ... */

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
var klass = function (Parent, props) {
  var Child, F, i;

     Child = function () {
        if (Child.uber && Child.uber.hasOwnProperty('__construct')) {
          Child.uber.__construct.apply(this, arguments);
        }
        if (Child.prototype.hasOwnProperty('__construct')) {
          Child.prototype.__construct.apply(this, arguments);
        }
     };

     Parent = Parent || Object;
     F = function () {};
     F.prototype = Parent.prototype;
     Child.prototype = new F();
     Child.uber = Parent.prototype;
     Child.prototype.constructor = Child;

     for (i in props) {
       if (props.hasOwnProperty(i)) {
         Child.prototype[i] = props[i];
       }
     }

     return Child;
};
X

More Related Content

What's hot

Journey of a C# developer into Javascript
Journey of a C# developer into JavascriptJourney of a C# developer into Javascript
Journey of a C# developer into JavascriptMassimo Franciosa
 
C++ for Java Developers (SwedenCpp Meetup 2017)
C++ for Java Developers (SwedenCpp Meetup 2017)C++ for Java Developers (SwedenCpp Meetup 2017)
C++ for Java Developers (SwedenCpp Meetup 2017)Patricia Aas
 
Mca 2nd sem u-4 operator overloading
Mca 2nd  sem u-4 operator overloadingMca 2nd  sem u-4 operator overloading
Mca 2nd sem u-4 operator overloadingRai University
 
LinkedIn TBC JavaScript 100: Functions
 LinkedIn TBC JavaScript 100: Functions LinkedIn TBC JavaScript 100: Functions
LinkedIn TBC JavaScript 100: FunctionsAdam Crabtree
 
From Function1#apply to Kleisli
From Function1#apply to KleisliFrom Function1#apply to Kleisli
From Function1#apply to KleisliHermann Hueck
 
16717 functions in C++
16717 functions in C++16717 functions in C++
16717 functions in C++LPU
 
Pure virtual function and abstract class
Pure virtual function and abstract classPure virtual function and abstract class
Pure virtual function and abstract classAmit Trivedi
 
Computer notes - Reference Variables –II
Computer notes  - Reference Variables –IIComputer notes  - Reference Variables –II
Computer notes - Reference Variables –IIecomputernotes
 
Why should we use SIMPLE FACTORY pattern even when we have one class only?
Why should we use SIMPLE FACTORY pattern even when we have one class only?Why should we use SIMPLE FACTORY pattern even when we have one class only?
Why should we use SIMPLE FACTORY pattern even when we have one class only?Rafal Ksiazek
 
Monoids, Store, and Dependency Injection - Abstractions for Spark Streaming Jobs
Monoids, Store, and Dependency Injection - Abstractions for Spark Streaming JobsMonoids, Store, and Dependency Injection - Abstractions for Spark Streaming Jobs
Monoids, Store, and Dependency Injection - Abstractions for Spark Streaming JobsRyan Weald
 
the-lost-art-of-plpgsql
the-lost-art-of-plpgsqlthe-lost-art-of-plpgsql
the-lost-art-of-plpgsqlRobert Treat
 
computer notes - Data Structures - 18
computer notes - Data Structures - 18computer notes - Data Structures - 18
computer notes - Data Structures - 18ecomputernotes
 
Composing an App with Free Monads (using Cats)
Composing an App with Free Monads (using Cats)Composing an App with Free Monads (using Cats)
Composing an App with Free Monads (using Cats)Hermann Hueck
 
Use Applicative where applicable!
Use Applicative where applicable!Use Applicative where applicable!
Use Applicative where applicable!Hermann Hueck
 

What's hot (20)

C++ Functions
C++ FunctionsC++ Functions
C++ Functions
 
C++ functions
C++ functionsC++ functions
C++ functions
 
F[5]
F[5]F[5]
F[5]
 
Journey of a C# developer into Javascript
Journey of a C# developer into JavascriptJourney of a C# developer into Javascript
Journey of a C# developer into Javascript
 
Functions in c++
Functions in c++Functions in c++
Functions in c++
 
C++ for Java Developers (SwedenCpp Meetup 2017)
C++ for Java Developers (SwedenCpp Meetup 2017)C++ for Java Developers (SwedenCpp Meetup 2017)
C++ for Java Developers (SwedenCpp Meetup 2017)
 
Mca 2nd sem u-4 operator overloading
Mca 2nd  sem u-4 operator overloadingMca 2nd  sem u-4 operator overloading
Mca 2nd sem u-4 operator overloading
 
Function (rule in programming)
Function (rule in programming)Function (rule in programming)
Function (rule in programming)
 
LinkedIn TBC JavaScript 100: Functions
 LinkedIn TBC JavaScript 100: Functions LinkedIn TBC JavaScript 100: Functions
LinkedIn TBC JavaScript 100: Functions
 
From Function1#apply to Kleisli
From Function1#apply to KleisliFrom Function1#apply to Kleisli
From Function1#apply to Kleisli
 
Time for Functions
Time for FunctionsTime for Functions
Time for Functions
 
16717 functions in C++
16717 functions in C++16717 functions in C++
16717 functions in C++
 
Pure virtual function and abstract class
Pure virtual function and abstract classPure virtual function and abstract class
Pure virtual function and abstract class
 
Computer notes - Reference Variables –II
Computer notes  - Reference Variables –IIComputer notes  - Reference Variables –II
Computer notes - Reference Variables –II
 
Why should we use SIMPLE FACTORY pattern even when we have one class only?
Why should we use SIMPLE FACTORY pattern even when we have one class only?Why should we use SIMPLE FACTORY pattern even when we have one class only?
Why should we use SIMPLE FACTORY pattern even when we have one class only?
 
Monoids, Store, and Dependency Injection - Abstractions for Spark Streaming Jobs
Monoids, Store, and Dependency Injection - Abstractions for Spark Streaming JobsMonoids, Store, and Dependency Injection - Abstractions for Spark Streaming Jobs
Monoids, Store, and Dependency Injection - Abstractions for Spark Streaming Jobs
 
the-lost-art-of-plpgsql
the-lost-art-of-plpgsqlthe-lost-art-of-plpgsql
the-lost-art-of-plpgsql
 
computer notes - Data Structures - 18
computer notes - Data Structures - 18computer notes - Data Structures - 18
computer notes - Data Structures - 18
 
Composing an App with Free Monads (using Cats)
Composing an App with Free Monads (using Cats)Composing an App with Free Monads (using Cats)
Composing an App with Free Monads (using Cats)
 
Use Applicative where applicable!
Use Applicative where applicable!Use Applicative where applicable!
Use Applicative where applicable!
 

Similar to Oop in java script

#include iostream #include string#includeiomanip using.docx
#include iostream #include string#includeiomanip using.docx#include iostream #include string#includeiomanip using.docx
#include iostream #include string#includeiomanip using.docxajoy21
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript FunctionsColin DeCarlo
 
Graph QL tuuneling secure via tcp dump into socket
Graph QL tuuneling secure via tcp dump into socketGraph QL tuuneling secure via tcp dump into socket
Graph QL tuuneling secure via tcp dump into socketvikkuma0047
 
Classes and Objects In C# With Example
Classes and Objects In C# With ExampleClasses and Objects In C# With Example
Classes and Objects In C# With ExampleCheezy Code
 
Build Lightweight Web Module
Build Lightweight Web ModuleBuild Lightweight Web Module
Build Lightweight Web ModuleMorgan Cheng
 
Protocol-Oriented Programming in Swift
Protocol-Oriented Programming in SwiftProtocol-Oriented Programming in Swift
Protocol-Oriented Programming in SwiftOleksandr Stepanov
 
Design patterns in javascript
Design patterns in javascriptDesign patterns in javascript
Design patterns in javascriptAbimbola Idowu
 
#include iostream#include string#include iomanip#inclu.docx
#include iostream#include string#include iomanip#inclu.docx#include iostream#include string#include iomanip#inclu.docx
#include iostream#include string#include iomanip#inclu.docxmayank272369
 
Production.javapublic class Production {    Declaring instance.pdf
Production.javapublic class Production {    Declaring instance.pdfProduction.javapublic class Production {    Declaring instance.pdf
Production.javapublic class Production {    Declaring instance.pdfsooryasalini
 
Javascript 基础
Javascript 基础Javascript 基础
Javascript 基础Alipay
 
#include iostream #include string #include fstream std.docx
#include iostream #include string #include fstream  std.docx#include iostream #include string #include fstream  std.docx
#include iostream #include string #include fstream std.docxajoy21
 
Clean code in JavaScript
Clean code in JavaScriptClean code in JavaScript
Clean code in JavaScriptMathieu Breton
 
ECMAScript 6 Review
ECMAScript 6 ReviewECMAScript 6 Review
ECMAScript 6 ReviewSperasoft
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
Non Conventional Android Programming En
Non Conventional Android Programming EnNon Conventional Android Programming En
Non Conventional Android Programming Enguest9bcef2f
 

Similar to Oop in java script (20)

#include iostream #include string#includeiomanip using.docx
#include iostream #include string#includeiomanip using.docx#include iostream #include string#includeiomanip using.docx
#include iostream #include string#includeiomanip using.docx
 
JavaScript Core
JavaScript CoreJavaScript Core
JavaScript Core
 
JavaScript Functions
JavaScript FunctionsJavaScript Functions
JavaScript Functions
 
Graph QL tuuneling secure via tcp dump into socket
Graph QL tuuneling secure via tcp dump into socketGraph QL tuuneling secure via tcp dump into socket
Graph QL tuuneling secure via tcp dump into socket
 
Classes and Objects In C# With Example
Classes and Objects In C# With ExampleClasses and Objects In C# With Example
Classes and Objects In C# With Example
 
Build Lightweight Web Module
Build Lightweight Web ModuleBuild Lightweight Web Module
Build Lightweight Web Module
 
Protocol-Oriented Programming in Swift
Protocol-Oriented Programming in SwiftProtocol-Oriented Programming in Swift
Protocol-Oriented Programming in Swift
 
Java Script Best Practices
Java Script Best PracticesJava Script Best Practices
Java Script Best Practices
 
Design patterns in javascript
Design patterns in javascriptDesign patterns in javascript
Design patterns in javascript
 
Testing AngularJS
Testing AngularJSTesting AngularJS
Testing AngularJS
 
#include iostream#include string#include iomanip#inclu.docx
#include iostream#include string#include iomanip#inclu.docx#include iostream#include string#include iomanip#inclu.docx
#include iostream#include string#include iomanip#inclu.docx
 
Production.javapublic class Production {    Declaring instance.pdf
Production.javapublic class Production {    Declaring instance.pdfProduction.javapublic class Production {    Declaring instance.pdf
Production.javapublic class Production {    Declaring instance.pdf
 
Javascript 基础
Javascript 基础Javascript 基础
Javascript 基础
 
app.js.docx
app.js.docxapp.js.docx
app.js.docx
 
#include iostream #include string #include fstream std.docx
#include iostream #include string #include fstream  std.docx#include iostream #include string #include fstream  std.docx
#include iostream #include string #include fstream std.docx
 
Clean code in JavaScript
Clean code in JavaScriptClean code in JavaScript
Clean code in JavaScript
 
Say It With Javascript
Say It With JavascriptSay It With Javascript
Say It With Javascript
 
ECMAScript 6 Review
ECMAScript 6 ReviewECMAScript 6 Review
ECMAScript 6 Review
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
Non Conventional Android Programming En
Non Conventional Android Programming EnNon Conventional Android Programming En
Non Conventional Android Programming En
 

More from Pierre Spring

Responsive Web at Webtuesday
Responsive Web at WebtuesdayResponsive Web at Webtuesday
Responsive Web at WebtuesdayPierre Spring
 
Frontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler ForumFrontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler ForumPierre Spring
 
JSDay Italy - Backbone.js
JSDay Italy - Backbone.jsJSDay Italy - Backbone.js
JSDay Italy - Backbone.jsPierre Spring
 
JSGeneve - Backbone.js
JSGeneve - Backbone.jsJSGeneve - Backbone.js
JSGeneve - Backbone.jsPierre Spring
 
Introduction to Scrum
Introduction to ScrumIntroduction to Scrum
Introduction to ScrumPierre Spring
 
Varnish Lightning Talk
Varnish Lightning TalkVarnish Lightning Talk
Varnish Lightning TalkPierre Spring
 
Speedy App: Frontend Performance Considerations
Speedy App: Frontend Performance ConsiderationsSpeedy App: Frontend Performance Considerations
Speedy App: Frontend Performance ConsiderationsPierre Spring
 

More from Pierre Spring (7)

Responsive Web at Webtuesday
Responsive Web at WebtuesdayResponsive Web at Webtuesday
Responsive Web at Webtuesday
 
Frontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler ForumFrontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler Forum
 
JSDay Italy - Backbone.js
JSDay Italy - Backbone.jsJSDay Italy - Backbone.js
JSDay Italy - Backbone.js
 
JSGeneve - Backbone.js
JSGeneve - Backbone.jsJSGeneve - Backbone.js
JSGeneve - Backbone.js
 
Introduction to Scrum
Introduction to ScrumIntroduction to Scrum
Introduction to Scrum
 
Varnish Lightning Talk
Varnish Lightning TalkVarnish Lightning Talk
Varnish Lightning Talk
 
Speedy App: Frontend Performance Considerations
Speedy App: Frontend Performance ConsiderationsSpeedy App: Frontend Performance Considerations
Speedy App: Frontend Performance Considerations
 

Recently uploaded

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 

Recently uploaded (20)

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 

Oop in java script

  • 7. {}
  • 8. {} 1 'nelm.io' true undefined null
  • 9. {}
  • 12. (function (){ var Object = function () { this.changed = true; } console.log(new Object()); }()); // {changed: true}
  • 13. (function (){ var Object = function () { this.changed = true; } console.log(new Object()); }()); // {changed: true}
  • 14. (function (){ var Object = function () { this.changed = true; } console.log(new Object()); }()); // {changed: true}
  • 15. (function (){ var Object = function () { this.changed = true; } console.log(new Object()); }()); // {changed: true}
  • 16. (function (){ var Object = function () { this.changed = true; } console.log(new Object()); }()); // {changed: true}
  • 17. (function (){ var Object = function () { this.changed = true; } console.log(new Object()); }()); // {changed: true}
  • 19. var o = new Object(1); console.log(o.constructor); // function Number() { } // new Number(1);
  • 20. var o = new Object('1'); console.log(o.constructor); // function String() { } // new String('1');
  • 21. var o = new Object(true); console.log(o.constructor); // function Boolean() { } // new Boolean(true);
  • 22. var a = {}; var b = new Object(); var c = Object();
  • 23. var a = {}; var b = new Object(); var c = Object();
  • 24. var a = {}; var b = new Object(); var c = Object();
  • 25. new
  • 27. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); // {brand: 'Fiat'}
  • 28. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); // {brand: 'Fiat'}
  • 29. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); // {brand: 'Fiat'}
  • 30. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); // {brand: 'Fiat'}
  • 31. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = Car('Fiat'); // undefined
  • 32. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = Car('Fiat'); // undefined
  • 33. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); // {brand: 'Fiat'}
  • 34. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); // {brand: 'Fiat'}
  • 35. var Car, myCar; Car = function (brand) { this.brand = brand; console.log( this.constructor === Car ); // true }; myCar = new Car('Fiat');
  • 36. var Car, myCar; Car = function (brand) { this.brand = brand; console.log( this.constructor === Car ); // undefined }; myCar = Car('Fiat');
  • 37. var Car, myCar; Car = function (brand) { if (this.constructor !== Car) { return new Car(brand); } this.brand = brand; }; myCar = Car('Fiat');
  • 38. var Car, myCar; Car = function (brand) { if (this.constructor !== Car) { return new Car(brand); } this.brand = brand; }; myCar = new Car('Fiat');
  • 41. var C = function () {}; console.log(C.prototype); { constructor: C, __proto__: Object.prototype }
  • 42. var C = function () {}; console.log(C.prototype); { constructor: C, __proto__: Object.prototype }
  • 43. var C = function () {}; console.log(C.prototype); { constructor: C, __proto__: Object.prototype }
  • 44. var C = function () {}; console.log(C.prototype); { constructor: C, __proto__: Object.prototype }
  • 45. var C = function () {}; console.log(C.prototype); { constructor: C, __proto__: Object.prototype }
  • 46. var C = function () {}; C.prototype = { a: "A", b: "B", constructor: C }; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }
  • 47. var C = function () {}; C.prototype = { a: "A", b: "B", constructor: C }; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }
  • 48. var C = function () {}; C.prototype = { a: "A", b: "B", constructor: C // !!! }; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }
  • 49. var C = function () {}; C.prototype = { a: "A", b: "B", constructor: C }; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }
  • 50. var C = function () {}; C.prototype = { a: "A", b: "B", constructor: C }; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }
  • 51. var C = function () {}; C.prototype = { a: "A", b: "B", constructor: C }; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }
  • 52. var C = function () {}; C.prototype = { a: "A", b: "B", constructor: C }; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }
  • 53. var C = function () {}; C.prototype.a = "A"; C.prototype.b = "B"; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }
  • 54. var C = function () {}; C.prototype.a = "A"; C.prototype.b = "B"; console.log(C.prototype); { a: "A", b: "B", constructor: C, __proto__: Object.prototype }
  • 57. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); Car.prototype; // { /* ... */ } myCar.prototype; // undefined
  • 58. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); Car.prototype; // { /* ... */ } myCar.prototype; // undefined
  • 59. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); Car.prototype; // { /* ... */ } myCar.prototype; // undefined
  • 60. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); Car.prototype; // { /* ... */ } myCar.prototype; // undefined
  • 61. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); Car.prototype; // { /* ... */ } myCar.prototype; // undefined
  • 62. var Car, myCar; Car = function (brand) { this.brand = brand; }; myCar = new Car('Fiat'); Car.prototype; // { /* ... */ } myCar.prototype; // undefined
  • 64. var Car, myCar; Car = function (brand) { this.brand = brand; }; Car.prototype.getBrand = function () { return this.brand; }; myCar = new Car('Fiat'); myCar.brand; myCar.getBrand();
  • 65. var Car, myCar; Car = function (brand) { this.brand = brand; }; Car.prototype.getBrand = function () { return this.brand; }; myCar = new Car('Fiat'); myCar.brand; myCar.getBrand();
  • 66. var Car, myCar; Car = function (brand) { this.brand = brand; }; Car.prototype.getBrand = function () { return this.brand; }; myCar = new Car('Fiat'); myCar.brand; myCar.getBrand();
  • 67. var Car, myCar; Car = function (brand) { this.brand = brand; }; Car.prototype.getBrand = function () { return this.brand; }; myCar = new Car('Fiat'); myCar.brand; myCar.getBrand();
  • 68. var Car, myCar; Car = function (brand) { this.brand = brand; }; Car.prototype.getBrand = function () { return this.brand; }; myCar = new Car('Fiat'); myCar.brand; myCar.getBrand();
  • 69. var Car, myCar; Car = function (brand) { this.brand = brand; }; Car.prototype.getBrand = function () { return this.brand; }; myCar = new Car('Fiat'); myCar.brand; myCar.getBrand();
  • 72. var Car, myCar; Car = function (brand) { this.brand = brand; }; Car.prototype.getBrand = function () { return this.brand; }; myCar = new Car('Fiat'); myCar.brand; myCar.getBrand();
  • 77. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) {}; inherit(ItalianCar, Car); myCar = new ItalianCar('Fiat');
  • 78. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) {} inherit(ItalianCar, Car); myCar = new ItalianCar('Fiat');
  • 79. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) {} inherit(ItalianCar, Car); myCar = new ItalianCar('Fiat');
  • 80. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) {}; inherit(ItalianCar, Car); myCar = new ItalianCar('Fiat');
  • 81. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) {} inherit(ItalianCar, Car); myCar = new ItalianCar('Fiat');
  • 82. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) {} inherit(ItalianCar, Car); myCar = new ItalianCar('Fiat');
  • 83. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) {}; inherit(ItalianCar, Car); myCar = new ItalianCar('Fiat');
  • 84. classical inheritance 1. Default Pattern 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor
  • 85. classical inheritance 1. Default Pattern 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor
  • 86. var inherit = function (Child, Parent) { Child.prototype = new Parent(); }
  • 87. var inherit = function (Child, Parent) { Child.prototype = new Parent(); } myCar = new ItalianCar(); myCar.getBrand(); // 'Homemade'
  • 88. var inherit = function (Child, Parent) { Child.prototype = new Parent(); } myCar = new ItalianCar(); myCar.getBrand(); // 'Homemade'
  • 89. var inherit = function (Child, Parent) { Child.prototype = new Parent(); } myCar = new ItalianCar(); myCar.getBrand(); // 'Homemade'
  • 90. var inherit = function (Child, Parent) { Child.prototype = new Parent(); } myCar = new ItalianCar(); myCar.getBrand(); // 'Homemade'
  • 93. myCar = new ItalianCar(); myCar.brand = 'Fiat';
  • 94. myCar = new ItalianCar('Fiat')
  • 95. myCar = new ItalianCar('Fiat') myCar.getBrand(); // 'Homemade'
  • 96. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) {} inherit(ItalianCar, Car); // ItalianCar.prototype = new Car();
  • 97. classical inheritance 1. Default Pattern 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor
  • 98. ItalianCar = function (brand) { Car.apply(this, [brand]); }
  • 99. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat';
  • 100. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat';
  • 101. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat';
  • 102. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat';
  • 103. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat';
  • 104. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand; // 'undefined'
  • 105. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand; // 'undefined'
  • 106. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand; // 'undefined'
  • 108. classical inheritance 1. Default Pattern 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor
  • 109. ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car();
  • 110. ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car();
  • 111. ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car();
  • 112. ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car();
  • 113. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car(); myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand(); // 'Fiat' delete myCar.brand; myCar.getBrand(); // 'Homemade'
  • 114. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car(); myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand(); // 'Fiat' delete myCar.brand; myCar.getBrand(); // 'Homemade'
  • 115. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car(); myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand(); // 'Fiat' delete myCar.brand; myCar.getBrand(); // 'Homemade'
  • 116. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car(); myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand(); // 'Fiat' delete myCar.brand; myCar.getBrand(); // 'Homemade'
  • 117. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car(); myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand(); // 'Fiat' delete myCar.brand; myCar.getBrand(); // 'Homemade'
  • 118. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car(); myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand(); // 'Fiat' delete myCar.brand; myCar.getBrand(); // 'Homemade'
  • 119. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car(); myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand(); // 'Fiat' delete myCar.brand; myCar.getBrand(); // 'Homemade'
  • 120. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car(); myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand(); // 'Fiat' delete myCar.brand; myCar.getBrand(); // 'Homemade'
  • 121. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } ItalianCar.prototype = new Car(); myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand(); // 'Fiat' delete myCar.brand; myCar.getBrand(); // 'Homemade'
  • 122. var Car, ItalianCar, myCar; Car = function (brand) { this.brand = brand || 'Homemade'; } Car.prototype.getBrand = function () { return this.brand; } ItalianCar = function (brand) { Car.apply(this, [brand]); } myCar = new ItalianCar('Fiat'); myCar.brand; // 'Fiat'; myCar.getBrand; // 'undefined'
  • 124. classical inheritance 1. Default Pattern 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor
  • 125. var inherit = function (Child, Parent) { Child.prototype = Parent.prototype; }
  • 127. classical inheritance 1. Default Pattern 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor
  • 128. var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); }
  • 129. var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); }
  • 130. var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); }
  • 131. var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); }
  • 132. var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); }
  • 134. inherit(ItalianCar, Car); myCar = new ItalianCar(); myCar.brand; // undefined myCar.getBrand; // function
  • 135. inherit(ItalianCar, Car); myCar = new ItalianCar(); myCar.brand; // undefined myCar.getBrand; // function
  • 136. inherit(ItalianCar, Car); myCar = new ItalianCar(); myCar.brand; // undefined myCar.getBrand; // function
  • 137. inherit(ItalianCar, Car); myCar = new ItalianCar(); myCar.brand; // undefined myCar.getBrand; // function
  • 138. inherit(ItalianCar, Car); myCar = new ItalianCar(); myCar.brand; // undefined myCar.getBrand; // function
  • 139. inherit(ItalianCar, Car); myCar = new ItalianCar(); myCar.brand; // undefined myCar.getBrand; // function
  • 140. var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; }
  • 141. var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; }
  • 142. var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; }
  • 143. var inherit = function (Child, Parent) { var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; }
  • 144. classical inheritance 1. Default Pattern 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor
  • 145. classical inheritance 1. Default Pattern klass 2. Rent-a-Constructor 3. Rent and Set Prototype 4. Share Prototype 5. Temp. Constructor
  • 146. var Parent = klass( null, { __construct: function () {}, someMethod: function () {} } ); var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} } );
  • 147. var Parent = klass( null, { __construct: function () {}, someMethod: function () {} } ); var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} } );
  • 148. var Parent = klass( null, { __construct: function () {}, someMethod: function () {} } ); var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} } );
  • 149. var Parent = klass( null, { __construct: function () {}, someMethod: function () {} } ); var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} } );
  • 150. var Parent = klass( null, { __construct: function () {}, someMethod: function () {} } ); var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} } );
  • 151. var Parent = klass( null, { __construct: function () {}, someMethod: function () {} } ); var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} } );
  • 152. var Parent = klass( null, { __construct: function () {}, someMethod: function () {} } ); var Child = klass( Parent, { __construct: function () {}, childMethod: function () {} } );
  • 153. var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } } );
  • 154. var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } } );
  • 155. var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } } );
  • 156. var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } } );
  • 157. var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } } );
  • 158. var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } } );
  • 159. var Man = klass( null, { __construct: function (what) { console.log('man constructor'); this.name = what; }, getName: function () { return this.name; } } );
  • 160. var first = new Man('Adam'); // logs 'man constructor' first.getName(); // 'Adam'
  • 161. var first = new Man('Adam'); // logs 'man constructor' first.getName(); // 'Adam'
  • 162. var first = new Man('Adam'); // logs 'man constructor' first.getName(); // 'Adam'
  • 163. var first = new Man('Adam'); // logs 'man constructor' first.getName(); // 'Adam'
  • 164. var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } } );
  • 165. var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } } );
  • 166. var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } } );
  • 167. var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } } );
  • 168. var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } } );
  • 169. var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } } );
  • 170. var SuperMan = klass( Man, { __construct: function (what) { console.log('super man constructor'); }, getName: function () { var name = SuperMan.uber.getName.call(this); return 'I am ' + name; } } );
  • 171. var clark = new SuperMan('Clark Kent'); // logs 'man constructor' // and 'super man constructor' clark.getName(); // 'I am Clark Kent'
  • 172. var clark = new SuperMan('Clark Kent'); // logs 'man constructor' // and 'super man constructor' clark.getName(); // 'I am Clark Kent'
  • 173. var clark = new SuperMan('Clark Kent'); // logs 'man constructor' // and 'super man constructor' clark.getName(); // 'I am Clark Kent'
  • 174. var clark = new SuperMan('Clark Kent'); // logs 'man constructor' // and 'super man constructor' clark.getName(); // 'I am Clark Kent'
  • 175. var clark = new SuperMan('Clark Kent'); // logs 'man constructor' // and 'super man constructor' clark.getName(); // 'I am Clark Kent'
  • 176. var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 177. var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 178. var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 179. var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 180. var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 181. Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };
  • 182. Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };
  • 183. Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };
  • 184. Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };
  • 185. Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } };
  • 186. Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;
  • 187. Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;
  • 188. Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;
  • 189. Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;
  • 190. Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;
  • 191. Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child;
  • 192. var klass = function (Parent, props) { /* ... */ for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 193. var klass = function (Parent, props) { /* ... */ for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 194. var klass = function (Parent, props) { /* ... */ for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 195. var klass = function (Parent, props) { /* ... */ for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 196. var klass = function (Parent, props) { /* ... */ for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 197. var klass = function (Parent, props) { /* ... */ for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 198. var klass = function (Parent, props) { var Child, F, i; Child = function () { if (Child.uber && Child.uber.hasOwnProperty('__construct')) { Child.uber.__construct.apply(this, arguments); } if (Child.prototype.hasOwnProperty('__construct')) { Child.prototype.__construct.apply(this, arguments); } }; Parent = Parent || Object; F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.uber = Parent.prototype; Child.prototype.constructor = Child; for (i in props) { if (props.hasOwnProperty(i)) { Child.prototype[i] = props[i]; } } return Child; };
  • 199. X