JavaScript

JavaScript

JavaScript

freecodecamp

JavaScript

JavaScript

duck

let duck = { name: "Aflac", numLegs: 2 };

duck
name Aflac numLegs 2

let duck = { name: "Aflac", numLegs: 2 }; console.log(duck.name);

duck
name
Aflac

method

duck

let duck = { name: "Aflac", numLegs: 2, sayName: function() {return "The name of this duck is " + duck.name + ".";} }; duck.sayName();

sayName
duck
duck.name
name

this

duck
return
duck.name
name

sayName: function() {return "The name of this duck is " + duck.name + ".";}

this

let duck = { name: "Aflac", numLegs: 2, sayName: function() {return "The name of this duck is " + this.name + ".";} };

this
this
duck
mallard
this
duck

Constructors

function Bird() { this.name = "Albert"; this.color = "blue"; this.numLegs = 2; }

Bird
name color
numLegs
Albert blue 2

  • constructors

  • this
    this

Bird

function Bird() { this.name = "Albert"; this.color = "blue"; this.numLegs = 2; } let blueBird = new Bird();

this

new
JavaScript Bird
blueBird
new
this
blueBird
Bird

blueBird.name; blueBird.color; blueBird.numLegs;

blueBird.name = 'Elvira'; blueBird.name;

Bird
Bird
Birds
Albert

let swan = new Bird(); swan.name = "Carlos"; swan.color = "white";

Bird
Bird

function Bird(name, color) { this.name = name; this.color = color; this.numLegs = 2; }

Bird
let cardinal = new Bird("Bruce", "red");
Bird
name
color
Bruce red numLegs 2
cardinal

cardinal.name cardinal.color cardinal.numLegs

Bird
JavaScript

instanceof

instance JavaScript

instanceof
instanceof
true
false

let Bird = function(name, color) { this.name = name; this.color = color; this.numLegs = 2; } let crow = new Bird("Alexis", "black"); crow instanceof Bird;

instanceof
true

instanceof

let canary = { name: "Mildred", color: "Yellow", numLegs: 2 }; canary instanceof Bird;

instanceof
false

Bird
name
numLegs

function Bird(name) { this.name = name; this.numLegs = 2; } let duck = new Bird("Donald"); let canary = new Bird("Tweety");

name
numLegs
duck
canary
Bird
duck
ownProps

let ownProps = []; for (let property in duck) { if(duck.hasOwnProperty(property)) { ownProps.push(property); } } console.log(ownProps);

["name", "numLegs"]

Bird
numLegs
Bird
numLegs

Bird s
prototype
prototype
Bird
Bird prototype
numLegs

Bird.prototype.numLegs = 2;

Bird numLegs

console.log(duck.numLegs); console.log(canary.numLegs);

prototype
prototype
" "
duck
canary
prototype
Bird
Bird
Bird.prototype
JavaScript
prototype

:

prototype
prototype
prototype

function Bird(name) { this.name = name; //own property } Bird.prototype.numLegs = 2;//prototype property let duck = new Bird("Donald");

duck
prototype
ownProps
prototypeProps

let ownProps = []; let prototypeProps = []; for (let property in duck) { if(duck.hasOwnProperty(property)) { ownProps.push(property); } else { prototypeProps.push(property); } } console.log(ownProps); console.log(prototypeProps);

console.log(ownProps)
["name"]
console.log(prototypeProps)
["numLegs"]

duck
constructor

let duck = new Bird(); let beagle = new Dog(); console.log(duck.constructor === Bird); console.log(beagle.constructor === Dog);

console.log
true

constructor
constructor

function joinBirdFraternity(candidate) { if (candidate.constructor === Bird) { return true; } else { return false; } }

constructor instanceof

prototype

Bird.prototype.numLegs = 2;

Bird.prototype.eat = function() { console.log("nom nom nom"); } Bird.prototype.describe = function() { console.log("My name is " + this.name); }

prototype

Bird.prototype = { numLegs: 2, eat: function() { console.log("nom nom nom"); }, describe: function() { console.log("My name is " + this.name); } };

constructor

duck.constructor === Bird; duck.constructor === Object; duck instanceof Bird;

false
true
true

constructor

Bird.prototype = { constructor: Bird, numLegs: 2, eat: function() { console.log("nom nom nom"); }, describe: function() { console.log("My name is " + this.name); } };

prototype
Bird
duck

function Bird(name) { this.name = name; } let duck = new Bird("Donald");

duck
Bird
prototype
isPrototypeOf

Bird.prototype.isPrototypeOf(duck);

true

JavaScript

prototype
prototype

function Bird(name) { this.name = name; } typeof Bird.prototype;

prototype
prototype
prototype
Bird.prototype
prototype
Object.prototype

Object.prototype.isPrototypeOf(Bird.prototype);

hasOwnProperty

let duck = new Bird("Donald"); duck.hasOwnProperty("name");

hasOwnProperty
Object.prototype
Bird.prototype
duck
prototype
prototype
Bird
duck
supertype
duck
subtype
Object
Bird
duck
supertype
Object
JavaScript
supertype
hasOwnProperty

Don't Repeat Yourself DRY

Bird
Dog
describe

Bird.prototype = { constructor: Bird, describe: function() { console.log("My name is " + this.name); } }; Dog.prototype = { constructor: Dog, describe: function() { console.log("My name is " + this.name); } };

describe
DRY
Animal
supertype

function Animal() { }; Animal.prototype = { constructor: Animal, describe: function() { console.log("My name is " + this.name); } };

Animal
describe
Bird
Dog

Animal
supertype

function Animal() { } Animal.prototype.eat = function() { console.log("nom nom nom"); };

Bird
Dog
Animal's
supertype
Animal
new

let animal = new Animal();

new

let animal = Object.create(Animal.prototype);

Object.create(obj)
obj
prototype
prototype
animal
prototype
Animal's
prototype
animal
Animal

animal.eat(); animal instanceof Animal;

instanceof
true

Animal
Animal

prototype
Bird
Animal

Bird.prototype = Object.create(Animal.prototype);

prototype
Bird
Animal

let duck = new Bird("Donald"); duck.eat();

duck
Animal
eat

prototype
constructor

function Bird() { } Bird.prototype = Object.create(Animal.prototype); let duck = new Bird(); duck.constructor

duck
Bird
Bird
Animal
Bird's
constructor
Bird

Bird.prototype.constructor = Bird; duck.constructor

prototype

Bird
Animal
prototype

function Animal() { } Animal.prototype.eat = function() { console.log("nom nom nom"); }; function Bird() { } Bird.prototype = Object.create(Animal.prototype); Bird.prototype.constructor = Bird;

Animal
Bird
Bird
fly()
Bird's
prototype

Bird.prototype.fly = function() { console.log("I'm flying!"); };

Bird
eat()
fly()

let duck = new Bird(); duck.eat(); duck.fly();

duck.eat()
nom nom nom
duck.fly()
I'm flying!

prototype

ChildObject.prototype = Object.create(ParentObject.prototype);

ChildObject
prototype

ChildObject.prototype.methodName = function() {...};

-

ChildObject.prototype
Bird
Animal
eat()

function Animal() { } Animal.prototype.eat = function() { return "nom nom nom"; }; function Bird() { } Bird.prototype = Object.create(Animal.prototype); Bird.prototype.eat = function() { return "peck peck peck"; };

let duck = new Bird();
duck.eat()
JavaScript
duck s
prototype

  1. duck
    =>
    eat()
  2. Bird
    =>
    eat()
    =>
  3. Animal
    =>
    eat()
    JavaScript
  4. Object
    =>
    JavaScript

Mixin

Bird
Airplane
Bird
Airplane

mixins mixin

let flyMixin = function(obj) { obj.fly = function() { console.log("Flying, wooosh!"); } };

flyMixin
fly

let bird = { name: "Donald", numLegs: 2 }; let plane = { model: "777", numPassengers: 524 }; flyMixin(bird); flyMixin(plane)

flyMixin
bird
plane
fly
bird
plane

bird.fly(); plane.fly();

Flying, wooosh!
.fly()

mixin
fly
bird
plane

bird name bird

bird.name = "Duffy";

bird
name

function Bird() { let hatchedEgg = 10; this.getHatchedEggCount = function() { return hatchedEgg; }; } let ducky = new Bird(); ducky.getHatchedEggCount();

getHatchedEggCount
hatchedEgg
hatchedEgg
getHatchedEggCount
JavaScript
closure

IIFE

JavaScript

(function () { console.log("Chirp, chirp!"); })();

Chirp, chirp!
immediately invoked function expression) IIFE

IIFE

IIFE module mixin

function flyMixin(obj) { obj.fly = function() { console.log("Flying, wooosh!"); }; }

mixin

let motionModule = (function () { return { flyMixin: function(obj) { obj.fly = function() { console.log("Flying, wooosh!"); }; } } })();

IIFE

motionModule
mixin module

motionModule.flyMixin(duck); duck.fly();