When is it necessary to pass object as argument in a function in javascript?

Question

if I don't want to use 'this' as an object and directly write the function without passing 'this' as an object and directly write this.src="" in the function why would that not work??

<body>
<script type="text/javascript">
  function picture(yolo){
    yolo.src="3Nail.jpg";
  }

  function normal(yolo) {
    yolo.src="4Nail.jpg";
  }
</script>

 <img onmouseover="picture(this)" onmouseout="normal(this)" src="1nail.jpg" alt="n1"/>
<img onmouseover="picture(this)" onmouseout="normal(this)" src="2nail.jpg" alt="n2"/>

The this keyword just means something different when it's in a different scope. That's why it doesn't work. — Bergi
– Bergi, Commented Apr 18, 2016 at 22:51
Hey, am calling these functions using onmouseover event handler — Dheeraj
– Dheeraj, Commented Apr 18, 2016 at 22:54
Well, you can use it, but it doesn't refer to the same thing as this in the event handler. Check out the MDN docs on the this keyword — Bergi
– Bergi, Commented Apr 18, 2016 at 22:55

Travis J · Accepted Answer · 2016-04-18 23:01:04Z

2

As the functions are not associated with event handlers, their this references the global window object. In order to avoid having to use the variable yolo as an argument, you can supply the this binding to the functions by calling them with this as the context using call as shown below.

js

  function picture(){
    this.src="3Nail.jpg";
  }

  function normal() {
    this.src="4Nail.jpg";
  }

html

<img onmouseover="picture.call(this)" onmouseout="normal.call(this)" src="1nail.jpg" alt="n1"/>
<img onmouseover="picture.call(this)" onmouseout="normal.call(this)" src="2nail.jpg" alt="n2"/>

answered Apr 18, 2016 at 23:01

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dheeraj Over a year ago

Thanks a ton! .call is really helpful

Thomas · Accepted Answer · 2016-04-18 22:58:27Z

1

Inside the img tag, this refers to that specific img element. Here, inside the function, this would be window. In general, the this inside a function refers to the object the function belongs to.

Thus, if you were to call the function without passing that element from the img tag, the function would have no way of knowing which element it should update. Of course, you can use query selectors inside the function to grab what you need -- but that only works if you always want to update the same element(s).

answered Apr 18, 2016 at 22:58

Thomas

4292 silver badges10 bronze badges

Collectives™ on Stack Overflow

When is it necessary to pass object as argument in a function in javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related