CODEWITHSUNDEEP
javascriptoopjavascript-objects
George J
George J

Reputation: 355

JavaScript OOP: Uncaught TypeError: is not a function

Have trouble with object creation. Console says that something wrong in the last line. Please tell how it should be, I more familar with Java, so this is little bit confusing for me.

var dog = {
        name:"Dog",
        age:"11",
        getName : function() {
            alert(this.name);       
        }
    }   

    function Dog(name, age) {
        this.name = name;
        this.age = age; 
    }

    var d1 = new Dog("Rex", 8);
    d1.getName();

Upvotes: 1

Views: 1009

Answers (3)

Walle Cyril
Walle Cyril

Reputation: 3247

Traditional OO in JavaScript 

function Dog(name, age) {
    this.name = name || "Dog";// if the name is not given, it defaults to "Dog"
    this.age = age || "11"; 
}

Dog.prototype.getName =  function() {
    alert(this.name); 
}

var d1 = new Dog("Rex", 8);
d1.getName();

More Explicit OO in JavaScript 

function createDog(name, age) {
    // create a new dog and return it
    var dog = {
        name: name || "Dog",// if the name is not given, it defaults to "Dog"
        age: age || "11"
    };
    return dog;
}

createDog.getName =  function(dog) {
    // explicit dog as 1st parameter
    alert(dog.name); 
}

//createDog is a normal function that returns something, no "new" needed
var d1 = createDog("Rex", 8);
createDog.getName(d1);

Upvotes: 1

kevin ternet
kevin ternet

Reputation: 4612

You can use class with syntaxic sugar to properly create objects in ES6.
In your exemple that would write like this :

'use strict';
class Dog{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  getName(){
    console.log(this.name);
  }
}

let doggy = new Dog("krypto", 125);
doggy.getName();

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

Your dog is just a simple Object literal,
that means that your getName is bound to it, not to your Dog class.

You can make that function a method of Dog instead:

/*var dog = {
  name:"Dog",
  age:"11",
  getName : function() {
    alert(this.name);       
  }
}*/ 

function Dog(name, age) {
  this.name = name;
  this.age = age; 
}

Dog.prototype.getName = function() {
  console.log( this.name );
}

var d1 = new Dog("Rex", 8);
d1.getName(); // "Rex"

Here's a variant that uses your settings "defaults"

function Dog() {
  this.name = "Dog"; // Default name
  this.age = 11;     // Default age
}

Dog.prototype.getName = function() {
  console.log( this.name );
}

var d1 = new Dog();
d1.name = "Rex";    // Override default name
d1.getName(); // "Rex"

Upvotes: 3

Related Questions