Js:new Fun_name() & Fun_name()的区别

今天偶然发现一个关于数名( ) 和 new 函数名( )这两种方式挺有意思的区别:

function Fun_name() {
   this.attr = 'test';
   console.log(this);
   return this.attr;
}
var $ = function (id) { return document.getElementById(id); };
alert(new Fun_name());    //log->{attr:'test'}, alert->[object Object]
alert(Fun_name());    //log->{window}, alert->'test'

直接函数调用中的this指向window对象,返回字符串;而new函数的this指向函数的实例对象,返回函数实例对象

而.....

function Fun_name() {
   this.attr = {key : 'value'};
   return this.attr;
}
console.log(new Fun_name());    //{key: 'value'}
console.log(Fun_name());    //{key : 'value'}
直接函数调用 和 new函数返回的都是函数实例对象

继续测试了一下:

function Fun_name() {
   this.attr = [1,2,3];
   return this.attr;
}
console.log(new Fun_name());    //[1, 2, 3, has: function]
console.log(Fun_name());    //[1, 2, 3, has: function]
..........

function Fun_name() {
   this.attr = function() {};
   return this.attr;
}
console.log(new Fun_name());    //function () {}
console.log(Fun_name());    //function () {}


function Fun_name() {
   this.attr = NaN;
   return this.attr;
}
console.log(new Fun_name());    //Fun_name {attr: NaN}
console.log(Fun_name());    //NaN


function Fun_name() {
   this.attr = null;
   return this.attr;
}
console.log(new Fun_name());    //Fun_name {attr: null}
console.log(Fun_name());    //null

function Fun_name() {
   this.attr = undefined;
   return this.attr;
}
console.log(new Fun_name());    //Fun_name {attr: undefined}
console.log(Fun_name());    //undefined
只要函数返回值是合法(非undefined、null、NaN)的引用数据类型,new 函数名( ) 和 直接函数调用 返回的都是函数实例对象,返回其它类型时,new 函数名( ) 会返回函数实例对象,而直接函数调用直接返回结果。 结论:构造函数总是隐式返回this,也就是新构造的对象;而当显式return表达式返回一个自定义对象时,会影响构造函数返回的结果,此时通过new 函数名()返回的是return返回的对象而不是新创建的对象。



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值