javascript构造函数的调用方法和普通函数的调用方法

博客介绍了JavaScript中构造函数和普通函数的区别,指出二者唯一区别是调用方式。任何函数用new操作符调用就是构造函数,不用new操作符调用则和普通函数无异,且不存在定义构造函数的特殊语法。

构造函数和其它函数唯一的区别就是调用方式不同,但构造函数还是函数,不存在定义构造函数的特殊语法,任何函数都可以通过new操作符来调用,只要用new操作符来调用它就可以作构造函数;但是任何函数也可以不通过new 操作符来调用,这样就和普通的函数没有区别。

function Person(name,age,job){
				this.name=name;
				this.age=age;
				this.job=job;
				this.sayName=function(){
					console.log(this.name);
				};
			}
			//用new操作符来调用
			var person=new Person("jim",26,"software eng");
			person.sayName();
			console.log(person.name);
			
			//作为普通函数的调用方法
			Person("jack",31,"Doctor");
			window.sayName();
			console.log(window.name);
			//作为普通函数的调用方法2、用this指针来调用,因为这个时候this等于window
			Person("xiaofang",33,"yanyuan");
			this.sayName();
			console.log(this.name);
			//在另一个对象的作用域中调用
			var o=new Object();
			Person.call(o,"dada",25,"paopao");  //这里用了个回调内置函数call
			o.sayName();
### JavaScript 中 function 函数的封装与调用最佳实践 在 JavaScript 中,函数的封装与调用是开发中非常重要的部分。通过合理的封装,可以提高代码的可读性、复用性维护性。以下是关于 JavaScript 函数封装与调用的最佳实践: #### 1. **函数声明与定义** 函数可以通过多种方式定义,最常见的方式包括函数声明函数表达式。函数声明使用 `function` 关键字直接定义函数[^2],而函数表达式则是将函数赋值给一个变量。例如: ```javascript // 函数声明 function add(a, b) { return a + b; } // 函数表达式 const multiply = function(a, b) { return a * b; }; ``` #### 2. **模块化封装** 为了减少全局变量污染并增强代码的模块化,推荐使用立即执行函数表达式(IIFE)或 ES6 模块进行封装。IIFE 可以创建一个独立的作用域,避免变量泄露[^4]。 ```javascript // 使用 IIFE 封装 (function() { function privateFunction() { console.log("This is a private function"); } window.publicFunction = function() { privateFunction(); console.log("This is a public function"); }; })(); publicFunction(); // 调用公共函数 ``` #### 3. **参数处理** 在封装函数时,应考虑参数的默认值灵活性。ES6 引入了默认参数功能,简化了参数处理逻辑。 ```javascript function greet(name = "Guest") { console.log(`Hello, ${name}!`); } greet(); // 输出: Hello, Guest! greet("Alice"); // 输出: Hello, Alice! ``` #### 4. **返回值设计** 函数应明确其职责,并合理设计返回值。如果需要异步操作,建议使用 Promise 或 async/await 结构[^4]。 ```javascript // 使用 Promise 的封装示例 function fetchData(url) { return new Promise((resolve, reject) => { setTimeout(() => { if (url === "/success") { resolve("Data fetched successfully"); } else { reject("Failed to fetch data"); } }, 1000); }); } fetchData("/success") .then(data => console.log(data)) .catch(error => console.error(error)); ``` #### 5. **链式调用** 通过返回对象本身,可以实现链式调用,提升代码的简洁性可读性[^1]。 ```javascript class Calculator { constructor() { this.result = 0; } add(value) { this.result += value; return this; // 返回自身以支持链式调用 } subtract(value) { this.result -= value; return this; } getResult() { return this.result; } } const calc = new Calculator(); console.log(calc.add(5).subtract(2).getResult()); // 输出: 3 ``` #### 6. **动画函数封装** 对于复杂的动画效果,可以通过封装函数来简化操作逻辑[^3]。 ```javascript function animate(obj, target, duration = 30) { let start = obj.offsetLeft; let change = target - start; let startTime = null; function step(timestamp) { if (!startTime) startTime = timestamp; let progress = timestamp - startTime; obj.style.left = Math.min(start + (change * (progress / duration)), target) + "px"; if (progress < duration) { requestAnimationFrame(step); } } requestAnimationFrame(step); } animate(document.querySelector("#box"), 500); // 动画移动到 500px ``` #### 7. **错误处理** 在封装函数时,应考虑异常情况并提供适当的错误处理机制。 ```javascript function safeDivide(a, b) { if (b === 0) { throw new Error("Division by zero is not allowed"); } return a / b; } try { console.log(safeDivide(10, 0)); } catch (error) { console.error(error.message); } ``` ### 总结 JavaScript 函数的封装与调用需要结合实际需求选择合适的方式。通过模块化、参数处理、返回值设计等手段,可以显著提升代码的质量可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值