Member Avatar for haranaboy 
<html>
<head>
	
	<script type="text/javascript">
			
		function test (){
//refer tst to a new Objy object.
			var tst = new Objy();
			alert(tst.display());
		}
		
		function Objy(){
			try{
				this.prototype.display= function() {
					this.text="yoyo";
				};
			}
			catch (err){
				alert (err);
			}
		}
	</script>
</head>
<body onload="Javascript: test()">
	<div id="display" >
	
	</div>

</body>

</html>

Hi,

I'm basically experimenting with javascript's object and classes. Can someone figure out why it's giving me this error? "TypeError:Cannot set property 'display' of undefined".

It works if it was just like this (if there's no method for the Objy class):

function test (){
			var tst = new Objy();
			alert(tst.text);
		}
	function Objy(){
			this.text="yoyo";
		}

As soon as I add the

this.prototype.display=function(){
}

according to the exception thrown it says "TypeError:Cannot set property 'display' of undefined"

Is my syntax wrong or am i suppose to declare or define display? (I don't know if you're suppose to define a method head):confused:

  • 2 Contributors
  • 2 Replies
  • 139 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by haranaboy
Member Avatar for Airshow

Haranaboy,

Level 1:
How to write a Constructor function with methods added internally and externally.

function Objy() {//Constructor.
	this.text = '';
	//This adds method .setText to Objy
	this.setText = function(x) {
		this.text = x;
	};
}

//This adds another method, .display, to Objy
Objy.prototype.display = function() {
	//A method added in this way also has access to Objy's this.text
	alert("display: " + this.text);
};

//This is legal javascript but does not add a method that is inherited by each of the constructor's instances. It is not particularly useful in most circumstances.
Objy.show = function() {
	alert("show: (works)" + this.text);
};

//Now, let's demonstrate that
//tst.setText() and tst.display() work
//but tst.show() does not work
window.onload = function() {
	var tst = new Objy();

	tst.setText("yoyo");//will work
	//**********************
	try {
		tst.display();//will work
	}
	catch(e) {
		alert("display: failed");
	}
	//**********************
	try {
		tst.show();//will not work
	}
	catch(e) {
		alert("show: failed");//this will execute
	}
	//**********************
};

Level 2:
Understanding that internally and externally added methods are not the same.
Constructors can have private, public and privileged members without using keywords "Private", "Public" or "Privileged", as would be necessary in some other languages.

function Objy() {//Constructor.
	this.text = '';//Public property
	var data = 0;//Private variable

	//Now, we add three Privileged methods, which can
	//all access private variables and public properties
	this.setText = function(x) {
		this.text = x;
	};
	this.setData = function(x) {
		data = x;
	};
	this.displayData = function() {
		alert("displayData: " + data);
	};
}

//As before, we add public method, .display, to Objy
//This time, .display is multifaceted.
Objy.prototype.display = function() {
	//We can access public property .text
	alert("display (this.text): " + this.text);
	//But whatever we try, we can't access the private variable data
	alert("display (this.data): " + this.data);//will give "undefined"
	alert("display (data): " + data);//will throw an error
};

//Now, let's demonstrate the differences between privileged and public methods
window.onload = function() {
	var tst = new Objy();

	tst.setText("yoyo");//will work
	tst.setData(999);//will work
	//**********************
	try {
		tst.display();//will partially work
	}
	catch(e) {
		alert("display: failed");
	}
	//**********************
	try {
		tst.displayData();//will work. Privileged methods can access private members
	}
	catch(e) {
		alert("displayData: failed");
	}
	//**********************
};

NOTE: You can also have private methods but no private method is included in this example.

Airshow

Edited by Airshow because: n/a
commented: Thanks for a detailed example. +2
Member Avatar for haranaboy

Awesome! Thank you for a detailed example.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.