js new一个函数和直接调用函数的区别

第一种情况(无返回值)

function Person(name){
    this.name=name;
    this.sayName=function(){
        console.log(this.name);
    };
}
const a = Person('张三');//执行了Person('张三'),但是没有返回值
//a=执行后的Person('张三')=无返回值=undefined
const b = new Person('李四');//新建了一个Person('李四')对象
a.sayName();//报错
b.sayName();//李四
window.sayName();//张三

为什么会出现这种情况?

  • 如果声明时没有new,其实就是简单的函数调用并赋值,如果函数也没有返回值,那么函数调用并没有什么意义,也就是说声明的a=undefined,然后执行了Person('张三'),但是是属于window对象,所以执行window.sayName()能输出张三
  • 如果声明时有new,具体发生如下
    1.创建一个继承自构造函数原型的新对象,也就是创建一个新的内存空间,然后让该内存空间的__ proto__指向构造函数的prototype。(继承构造函数的原型链)
    2.将构造函数中的this指向刚创建的内存空间
    对象的__ proto__属性能够访问到原型,IE下则没有暴露出相应的属性
    3.使用指定的参数执行构造函数中的代码
    因此相当于新建了一个Person对象,所以执行b就是我们想要的结果

第二种情况(有返回值)

//返回数值类型
function Person1(name)  {  
    this.name = name;  
    return this.name;  
}  
var a1= new Person1('张三');   //新建了一个Object 对象,它有一个name 属性,并且返回一个字符串test 
var b1 = Person1('李四');    // 函数Test()属于Function对象,返回"test"字符串,所以test2单纯是一个字符串  
console.log(a1)//Object
console.log(b1)//李四
console.log(a1.name)//张三
console.log(b1.name)//undefined

//返回引用类型
function Person2(name)  {  
    this.name = name;  
    return [1,2,3];  
}  
var a2= new Person2('张三');   //新建了一个Object 对象,它有一个name 属性,并且返回一个字符串test 
var b2 = Person2('李四');    // 函数Test()属于Function对象,返回"test"字符串,所以test2单纯是一个字符串  
console.log(a2)//[1,2,3]
console.log(b2)//[1,2,3]
console.log(a2==b2)//false

还是分两种情况:

  • 如果没有new,但是函数有返回值,那么就会把返回值赋值给a
  • 如果有new:
    1.函数返回值为常规意义上的数值类型(Number、String、Boolean)时,new函数将会返回一个该函数的实例对象
    2.函数返回一个引用类型(Object、Array、Function)时,则new函数与直接调用函数产生的结果相同,执行构造函数之后把引用类型返回
    下面是chrome浏览器控制台输出的效果


    Chrome控制台
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容