We Keep Coding

Are we declaring a function as a method on a variable?

I have been learning JS on my own and completed an 8 hour course on the basics. Now I am following another course where the lecturer, as it seems to me, is creating a function using dot notation. I am not sure if this is what is happening and I am having a hard time understanding exactly what it is doing.
function Person(fName, lName) {
this.firstName = fName
this.lastName = lName
}
const person1 = new Person("Bruce", "Wayne")
const person2 = new Person("Bat", "Man")
person1.getFullName = function () {
return this.firstName + ' ' + this.lastName
}
console.log(person1.getFullName())
The part I am confused about is:
person1.getFullName = function () {
return this.firstName + ' ' + this.lastName
}
I see in the Person() function we are creating an object called person1 using "this" and a key to pass in parameters as values for those keys. However it looks to me like there is a function being assigned to the person1 object and what I am assuming is the name of the function, looks like a method on the person1 object using dot notation. Can anyone explain how this works?

The line
person1.getFullName = ...
is a normal assignment statement. It assigns the value on the right hand side to the property getFullName of the object in person1. If the property doesn't exist yet it will be created.
Functions are values (objects) like any other in JavaScript and thus they can be used everywhere were a value is expected.
So yes, person1.getFullName will contain a function and it can be called like any other function: person1.getFullName().

Objects have properties.
Properties have values.
Functions are a value.
If the value of a property is a function then we call that a method.
That's all there is to it.

function Person(fName, lName) {
this.firstName = fName
this.lastName = lName
}
const person1 = new Person("Bruce", "Wayne")
const person2 = new Person("Bat", "Man")
person1.getFullName = function () {
return this.firstName + ' ' + this.lastName
}
console.log(person1.getFullName())
Basically a new property called getFullName is created for the object person1. This new property is defined to return the first name and the lastname of the person1 object. So when you call console.log(person1.getFullName()) this will print the firstname and the lastname of the person1.

Is there a way to define a prototype property with a reference to another property?

Let's say a simple prototype is defined:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName
this.fullName = first + " " + last;
}
Now, I want to add a new property down the road called nickName. (but I don't want to use a method, that's already well documented)
Person.prototype.nickName = (what to put here to have firstName + first letter of lastName)
I used:
Person.prototype = {
get nickName(){
return this.firstName+ this.lastName.charAt(0);
}
};
But it doesn't work for already created Persons.
I just want to know if there is a way to do it, besides including it in the initial definition.

You can just add a new method to the prototype:
Person.prototype.nickname = function() {
return this.firstName + this.lastName.charAt(0);
}

Using Prototype of function constructor add new function

I want to check my idea is correct or not?
Codes:
function Person(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
Person.prototype.getFullName = function () {
return this.firstname + ' ' + this.lastname;
}
var john = new Person('Melo','Tang');
I call the code in the following picture "function constructor".
function Person(firstname, lastname) {
this.firstname = firstname;
this.lastname = lastname;
}
When the program run to this line
var john = new Person('Melo','Tang');
JS will use prototype chain to add the getFullName function in the "function constructor" Object and new a empty Object like following picture am I right?

I don't really understand what your diagram or the arrows or their colors are supposed to represent.
When the program runs to this line
var john = new Person('Melo','Tang');
What happens here is exactly that a new object is constructed via the Person constructor, with Person.prototype as its prototype. Other than being used as the prototype for the new object, Person.prototype is not examined or consulted, nor is anything done with the methods on it at this time. The prototype is consulted only when looking up properties and methods, such as when calling john.getFullName().
For clarity, I would avoid the term "function constructor object". Just call it a "constructor (function)".

properties on javascript protoype verses on object what's the difference? [duplicate]

This question already has answers here:
Use of 'prototype' vs. 'this' in JavaScript?
(15 answers)
Closed 6 years ago.
Take this example:
var personPrototype = {
firstName: '',
lastName: '',
getFullname: function() {
return this.firstName + ' : ' + this.lastName;
}
}
Person = {
};
function newPerson(firstName, lastName) {
var Person = function(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Person.prototype = personPrototype;
return new Person(firstName, lastName);
}
var p1 = newPerson('someone', 'else');
var p2 = newPerson('john', 'doe');
console.log(p1.getFullname());
console.log(p2.getFullname());
Moving the firstName and lastName from the personPrototype to the Person yields the same results. Does that mean that there is no difference between the two, or am I overlooking something?

The difference between properties put directly on an object and properties put on the prototype of an object is quite significant. The prototype is shared by all instances of an object. Properties defined in the object (as in within a constructor function) will be defined on each instance.
I suspect that you are getting confused when defining your Person object. The Person in the global scope is being overridden by your constructor function inside newPerson and is never used. You don't need to define your properties at all outside of your constructor/method functions unless you have a specific reason to share a value between all instances of the object.
As for why defining the properties in the prototype makes no difference: it's the prototype chain. When you define firstName et al in personPrototype and then also in the constructor function it is overridden. So calling getFullName falls back to personPrototype and then looks for lastName on the current instance of Person thus picking up the value passed when you call new Person(firstName, lastName).

Javascript Object prototype and Object.create method [duplicate]

This question already has answers here:
Benefits of using `Object.create` for inheritance
(4 answers)
Closed 7 years ago.
what is the difference between Person.prototype and Object.create(Person.prototype) ? Could I use each of them?
function Person(name) {
this.name = name;
}
Person.prototype.copy = function() {
return new this.constructor(this.name);
};
// define the Student class
function Student(name) {
Person.call(this, name);
}
// inherit Person
Student.prototype = Person.prototype;
//Student.prototype = Object.create(Person.prototype);

It is better to use Student.prototype = Object.create(Person.prototype) instead of Student.prototype = Person.prototype;
the reason being in the later case both prototype share a common object. So wen we add a new method in Student prototype , person prototype will also be accessed to that property. eg:-
Student.prototype = Person.prototype
Student.prototype.test = function(){ alert('in student');};
var person = new Person();
person.test();
this will alert 'in student'