Prototypical Javascript setter function approach

Question

Prototypical Javascript setter function approach

Currently diving into Javascript. Encountering an issue when attempting to utilize setters in prototyping.

Error Message: TypeError: cir1.radiusToCircle is not a function

var Circle = function(radius){
    this._radius = radius;
}

//prototype

Circle.prototype ={
    set radiusToCircle(rad) { this._radius = rad; },
    get radiusFromCircle() { return this._radius;},

    get area() { return (Math.PI * (this._radius * this._radius));}
};

var cir1 = new Circle(5);

cir1.radiusToCircle(14);

In search of the missing link here...

Appreciate any guidance provided.

javascript prototype getter-setter setter

Answer 1

Answer №1

In order to utilize a setter, you must assign the property directly rather than passing it as a function argument. Check out the Setter MDN Documentation for more information.

circle1.setRadius = 14;

Answer 2

In order to utilize a setter, you must assign the property directly rather than passing it as a function argument. Check out the Setter MDN Documentation for more information.

circle1.setRadius = 14;

Answer 3

Answer №2

It's possible that your approach is effective, but without knowing the specific set/get commands you are utilizing and whether overloading the function is advisable, it's hard to say for sure.

Based on the documentation, it seems like the set/get functions will attach a callback that executes unrelated code when directly assigning the member variable. If this aligns with your intention, there may be no need for a prototype function.

var Circle = function(radius){
    this._radius = radius;
}

Circle.prototype.getRadiusToCircle = function() {
    return this._radius;
}

Circle.prototype.setRadiusToCircle = function(rad) {
    this._radius = rad;
}

Circle.prototype.overloadRadiusToCircle = function(rad) {
    if(rad != null) {
        this._radius = rad;
    } else {
        return rad;
    }
}

Circle.prototype.area = function() {
    return (Math.PI * (this._radius * this._radius));
}

For instance

var Circle = function(radius){
    this._radius = radius;
    this._area = Math.PI * (radius * radius);
}

Circle.prototype = {
    set _radius(radius) {
        this._area = Math.PI * (radius * radius);
    }   
}

Circle.prototype.getArea = function() {
    return _area;
}

Answer 4

It's possible that your approach is effective, but without knowing the specific set/get commands you are utilizing and whether overloading the function is advisable, it's hard to say for sure.

Based on the documentation, it seems like the set/get functions will attach a callback that executes unrelated code when directly assigning the member variable. If this aligns with your intention, there may be no need for a prototype function.

var Circle = function(radius){
    this._radius = radius;
}

Circle.prototype.getRadiusToCircle = function() {
    return this._radius;
}

Circle.prototype.setRadiusToCircle = function(rad) {
    this._radius = rad;
}

Circle.prototype.overloadRadiusToCircle = function(rad) {
    if(rad != null) {
        this._radius = rad;
    } else {
        return rad;
    }
}

Circle.prototype.area = function() {
    return (Math.PI * (this._radius * this._radius));
}

For instance

var Circle = function(radius){
    this._radius = radius;
    this._area = Math.PI * (radius * radius);
}

Circle.prototype = {
    set _radius(radius) {
        this._area = Math.PI * (radius * radius);
    }   
}

Circle.prototype.getArea = function() {
    return _area;
}

Prototypical Javascript setter function approach

Answer №1

Answer №2

Similar questions

Show the form when the button is clicked

Exploring Angular2: Understanding how to retrieve an object with an unknown key

What are the best methods to prevent infinity printing?

Creating a never-ending scroll feature on a static page in Next.js

Utilize AngularJS to loop through a list with ng-repeat

Signing up for event using react leaflet

Determine time without discerning the timezone of the device

Updating is not happening with ng-repeat trackBy in the case of one-time binding

Creating a highly innovative server infrastructure tailored for Dojo applications with exceptional features

I am looking to adjust/modulate my x-axis labels in c3 js

Having trouble with rendering prop values in Vue.js?

Performing a GET call within the configuration settings of AngularJS

Having trouble with CSS text-align right not functioning properly? Here's how you can fix it

Having trouble getting npm install to add any libraries? Wondering how to fix this issue?

Automatically updating the results section while executing SQL queries in PHP

Handling multiple patch requests using React and Redux when onBlur event occurs

Add a Bootstrap Popover to the Amazon website

Can you choose an option from a dropdown menu without relying on jQuery?

A guide on updating the value from post.map back to the initial state in a React JS application

Preventing Excessive Event Triggering in a PhoneGap - Jquerymobile Application