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

最新推荐文章于 2023-01-16 14:45:42 发布

原创最新推荐文章于 2023-01-16 14:45:42 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了函数直接调用与使用new函数调用的区别，包括this指向、返回值类型等，并通过示例展示了不同数据类型的返回结果。

今天偶然发现一个关于数名( ) 和 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返回的对象而不是新创建的对象。