我不了解该程序的工作

Question

I am learning objects in JavaScript and I don't understand methods assigned as property to objects, when objects are defined through user-defined functions.

This is a code snippet from tutorial point.com/JavaScript

 <script type = "text/javascript"> function addPrice(amount) { with(this){ price = amount; } } function book(title, author) { this.title = title; this.author = author; this.price = 0; this.addPrice = addPrice; } </script> <script type = "text/javascript"> var myBook = new book("Perl", "Mohtashim"); myBook.addPrice(100); document.write("Book title is : " + myBook.title + "<br>"); document.write("Book author is : " + myBook.author + "<br>"); document.write("Book price is : " + myBook.price + "<br>"); </script> 

I want to know how the this.addPrice = addPrice is working and why if I remove the line no output is shown?

Answer 1

JS is pretty flexible language. In JS this:

 var obj = { name: "Raju Ritigya", sayHi: function() { console.log("hello, I'm " + this.name); } }; 

Is the same as this:

 var obj = {}; obj.name = "Raju Ritigya"; obj.sayHi = function() { console.log("hello, I'm " + this.name); }; 

Basically, there are two ways of adding properties and methods to an object in JS.

With that being said, your course is teaching you how to write "Classes", constructors and this in JS. IMO if you're just starting with JS, this is too complex to understand. JS doesn't support Classes natively and it tries to mimic them with prototype inheritance.

But anyway, here's my 0.02$ on what's going on there

In JS you have primitive types ( string, number, boolean, symbol, null, undefined ) and everything else is an object ( yes, array is an object, function is an object, object is an object ).

Primitive values are passed around by value and they are immutable, but objects are passed by reference ( a point in memory ) and they are mutable

 var foo = {}; var bar = {}; console.log(foo === bar) //false 

Even though foo and bar look the same, they point to different places in memory, hence for JS they are not the same!

 var foo = {}; var bar = foo; bar.name = "random name"; console.log(foo.name); // "random name" 

And now foo and bar point to the same reference and making changes to one of them reflect to the other one.

In JS every function needs to return something. If you don't explicitly put a return statement in your function it will return undefined and if you use new keyword in front of your function call, it will return a new object that will have that function as a constructor.

So, in conclusion, what's going on there is that you have a constructor ( book ) that's gonna return an object with 3 properties ( author, title, price ) and a method ( addPrice ). That method is a function (and as we already said, functions are objects in JS and can be easily passed around). It would be exactly the same if you wrote your constructor like this:

 function book(title, author) { this.title = title; this.author = author; this.price = 0; this.addPrice = function(amount) { this.price = amount }; } 

As @deceze mentioned, using with is highly discouraged.

By removing the this.addPrice = addPrice line, you don't add a method to your object but later on you try to call it on this line myBook.addPrice(100);

Your code breaks on that line and JS won't continue executing the rest of your program (you can open console tab in dev tools and see the error there).

Hope it helps, Cheers!