3 普通函数和构造函数的区别

JS构造函数与普通函数区别

最新推荐文章于 2022-11-02 00:21:14 发布

转载最新推荐文章于 2022-11-02 00:21:14 发布 · 279 阅读

前端面试题专栏收录该内容

12 篇文章

订阅专栏

本文详细对比了JavaScript中构造函数与普通函数的特点及使用差异，包括命名、调用方式、this指向及返回值等方面，并通过实例演示了两者的工作原理。

1 命名方式:

构造函数名称通常首字母要大些。

普通函数名称首字母要小写，使用驼峰命名方式。

2 调用方式:

构造函数需要使用new运算符调用，如果构造函数没有参数可以省略小括号，比如new Object。

普通函数的调用不需要new运算符，而且必须要有小括号。关于new的作用可以参阅js的new运算符的作用简单介绍一章节。

var p = new Person();
var p = Person();

function fn() { }

构造函数：1. new fn( )

2 .构造函数内部会创建一个新的对象，即f的实例

3. 函数内部的this指向新创建的f的实例

4. 默认的返回值是f的实例

普通函数：1. fn( )

2. 在调用函数的内部不会创建新的对象

3. 函数内部的this指向调用函数的对象（如果没有对象调用，默认是window）

4. 返回值由return语句决定

3 this的指向问题:

构造函数内部可以使用this关键字；普通函数内部不建议使用this，因为这时候this指向的是window全局对象，这样无意间就会为window添加了一些全局变量或函数

4 构造函数默认不用return返回值；普通函数一般都有return返回值

3.1 构造函数会默认返回this，也就是新的实例对象

3.2 普通函数如果没有return值的话，返回undefined

3.3 如果使用了return，那返回值会根据return值的类型而有所不同

看一个常见的面试题
复制代码

 1 <script>
 2     function foo() {
 3         var f2 = new foo2();
 4         console.log(f2);    //{a: 3}
 5         console.log(this); //window
 6         return true;
 7     }
 8     function foo2() {
 9         console.log(this); //foo2类型的对象 不是foo2函数
10 //        this.age = 30;
11         return {a: 3};
12     }
13     var f1 = foo();
14     console.log(f1); // true
15 </script>

JavaScript中的普通函数与构造函数

与普通函数相比，构造函数有以下明显特点

用new关键字调用 var prince=new Prince("charming",25);
函数内部可以使用this关键字
在构造函数内部，this指向的是构造出的新对象。用this定义的变量或函数/方法，就是实例变量或实例函数/方法。需要用实例才能访问到，不能用类型名访问。 prince.age;//25 Prince.age;//undefined
默认不用return返回值构造函数是不需要用return显式返回值的，默认会返回this，也就是新的实例对象。当然，也可以用return语句，返回值会根据return值的类型而有所不同，
函数命名建议首字母大写，与普通函数区分开。不是命名规范中的，但是建议这么写。

使用new关键字实例化的时候发生了什么？

以上文中的Prince()函数举个栗子：

第一步，创建一个空对象。 var prince={}
第二步，将构造函数Prince()中的this指向新创建的对象prince。
第三步，将prince的_proto_属性指向Prince函数的prototype，创建对象和原型间关系
第四步，执行构造函数Prince()内的代码。

构造函数有return值怎么办？

构造函数里没有显式调用return时，默认是返回this对象(这个时候，必须要使用new关键字来调用吧），也就是新创建的实例对象。当构造函数里调用return时，分两种情况：

return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。这种情况下，忽视return值，依然返回this对象。
return的是Object 这种情况下，不再返回this对象，而是返回return语句的返回值。

    function Person(name){
        this.name=name;
        return {name:"cherry"}
    }
    var person=new Person("sheila");
    person.name;//cherry
    person;//Object {name: "cherry"}

转载：https://segmentfault.com/a/1190000008615288