返回带有方法的对象的函数和带有方法的对象的变量之间有什么区别

时间:2019-03-15 17:30:05

标签: javascript function variables methods javascript-objects

因此,我对JavaScript的最佳编码实践不甚了解,但我希望能更好地理解应如何设计功能以允许从JavaScript文件外部调用它们。

采用以下示例。它们本质上都做相同的事情,但是一个存储在变量中,另一个存储在函数中。

var myVariable1 = {
	add1: function( that ){
		var number = parseInt( that.innerHTML, 10 );
		if( !isNaN( number )){
			document.getElementById( "variableResult" ).innerHTML = number + 1;
		}
	}
};
function myFunction(){
	var object = new Object();
	object.add1 = function( that ){
		var number = parseInt( that.innerHTML, 10 );
		if( !isNaN( number )){
			document.getElementById( "functionResult" ).innerHTML = number + 1;
		}
	}
	return object;
}
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Function or Variable</title>
	<script src="functionorvariable.js"></script>
</head>
<body>
	<main>
		<a onclick="myVariable1.add1( this )">4</a>
		<p id="variableResult"></p>
		<br>
		<br>
		<a onclick="window.myFunction().add1( this )">7</a>
		<p id="functionResult"></p>
	</main>
</body>
</html>

我的问题是,这里的真正区别是什么? 它们是否相同,只是其中一个的性能可能比另一个更好? 其中一个比另一个“好”吗?

我才刚刚开始理解在JavaScript中完成模块化设计的方法,因此如果这两种做法都不对,我深表歉意。

1 个答案:

答案 0 :(得分:1)

myFunction 创建一个对象,并在每次调用时返回该对象。这没有什么意义,因为对象不包含任何属性,而只是一个可能只是常规函数的函数。

myVariable1只是具有函数属性的对象。将类似功能组合在一个对象中而不污染全局范围(并保持事物的结构化)是很有意义的。