JavaScript中调用一个函数使用new关键字和直接调用的区别

随着JavaScript的功能不止可以运行在客户端浏览器作为脚本,还是可以运行在服务器端的NodeJs,对于一个程序员,开发人员来说,不管是做前端,还是做后台,js的使用已经成为一个必备的能力,在此讨论一下js中调用一个函数使用new关键字和直接调用的区别,希望能带给新手一些帮助。也希望得到大神的指导。
[b]一 构造器模式:[/b]
先看一下代码:

function Person(name,age){
this.name=name;
this.age=age;
}
p1=Person('tom',20);
p2=new Person('mary',21);
console.log(p1);//undefined
console.log(p2);//Person {name: "mary", age: 21}
console.log(typeof p1);//undefined
console.log(typeof p2);//object

为什么会有以上差别呢?请看一下分析:
1.使用new则是将之当做构造函数来调用,会创建一个该类的实例对象,这个对象的type是这个函数名,中间使用this.propertyName=value会对该实例对象的属性赋值,并且无论有没有return,都会返回这个对象。

2.而如果是直接调用就是简单执行里面的代码,不会创建实例对象,this指向的调用环境下的this对象,如果是在全局中直接调用,就是window,没有默认返回值。

p1就是函数Person()执行的返回值,也就是undefined. 在函数执行过程中,属性被加到全局作用域或者Person方法所属的对象上了。执行以下代码,发现属性加在了window上:

console.log(window.name);//tom
console.log(window.age);//20

而p2是Person()的实例,Person {name: "mary", age: 21}

[b]二 工厂模式:[/b]
如果将Person函数构造为以下情况,结果会出现例外情况:

function Person(name,age){
var obj = new Object();
obj.name=name;
obj.age=age;
return obj;
}
p3=Person('jim',20);
console.log(p3);//Object {name: "jim", age: 20}
console.log(typeof p3);//object

这个就不需要加new,p3是一个Object,不是Person的实例。

Date();不加new返回当前时间,是一个字符串。加new的话,返回当前时间或者把参数格式化得到的时间,是一个Date对象。

String():不加new将参数格式化为字符串,加new则返回的是String对象。案例如下:

var str1=new String("abc");
var str2=String("abc");
console.log(str1);//String {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}
console.log(str2);//abc
console.log(typeof str1);//object
console.log(typeof str2);//string
str1.prop = 1;
console.log(str1.prop);//1
str2.prop = 1;
console.log(str2.prop);//undefined

Number类似于String。

总结以上内容有以下两点结论:
1. 直接调用函数的时候它叫“普通函数”,此时用全局对象window做上下文。
2. 用new关键字调用的时候它叫“构造函数”,此时用这个新生的对象做上下文。

限于个人能力,只能总结到这个程度,不喜勿喷!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值