首页 > 代码库 > 浅析普通函数与构造函数

浅析普通函数与构造函数

2024-08-18 14:46:37   220人阅读

对于搞明白什么是普通函数与构造函数,首先我觉得我们应该对函数有一定的了解才行:

函数的作用就是封装一段可以重复执行的代码片段

 

那么为了区分这两个概念,我将它们作一个比较来说比较好:

 

第一点:从命名规范上来看(并不是主要区别)

  function personNum(){}  personNum();  //这是普通函数,它命名的规范一般采用驼峰命名法(首字母小写)

 

 Function PersonNum(){}  var p=new PersonNum()  p(); //这是构造函数,规范命名一般采用大驼峰命名法(首字母大写)

 

第二点:在于调用函数的方式:(最主要的区别)

 

还拿上面的例子来讲:

普通函数的调用一般是: 函数名称();

构造函数的调用: new 函数名();

 

第三点:在于函数内部this的指向问题

普通函数:this指向的是调用这个函数的对象,如果这个对象没有,那么默认指向window

构造函数:this指向的是新创建的对象

 

第四点:在于返回值

普通函数的返回值由return 决定

构造函数的返回值默认返回的是新创建的对象(注意:

  1.构造函数的返回值return+基本数据类型  //例:return true; 这种情况返回的还是构造             //函数所创建出来的实例

 2.构造函数的返回值return+对象   //例:return  {“a”:”哈哈”};  这种情况返回的就是这个对象

)

 

 

它们具体的调用过程为:

普通函数:直接执行函数内部的各种操作

         (this指向的是调用这个函数的对象,如果这个对象没有,那么默认指向window

         它的返回值由return决定)

构造函数:1.在构造函数的内部创建一个新对象

         2.给对象赋值,执行各种操作: this.c=”” , this.say=function(){}

         3.默认返回这个新创建的对象

可以通过下面这个例题练习一下:

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5     </head>
 6     <body>
 7     <script>
 8        function foo(){
 9            var f2=new foo2();  //这是一个构造函数,它的this是foo2{},f2={a:3}
10            console.log(f2);  //2.{a:3}
11            console.log(this); //3.window
12            return true;
13        }
14        function foo2(){
15            console.log(this);//1.foo2{}
16            this.age=30;
17            return{a:3};
18        }
19        var f1=foo(); //这是一个普通函数,它的this是window
20        console.log(f1); //普通函数的返回值由return决定 true
21     </script>
22     </body>
23 </html>

 

浅析普通函数与构造函数


联系
我们