js构造函数创建对象是否加new问题


Posted in Javascript onJanuary 22, 2018

今天看到这样一道题:

填写"TO DO"处的内容让下面代码支持a.name = "name1"; b.name = "name2";

function Obj(name){
// TO DO
}
obj. /* TO DO */ = "name2";
var a = Obj("name1");
var b = new Obj;

 

问题1:new操作符做了些什么呢?

创建一个新对象;

将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象) ;

执行构造函数中的代码(为这个新对象添加属性) ;

返回新对象。

问题2:不加new操作符直接执行构造函数会发生什呢?

function Obj(name){
this.name = name;
console.log(this); // 严格模式下是undefined 非严格模式下是window对象
}
var a = Obj("name1");
console.log(a); // 结果 => undefined

哦,原来只是当作正常的函数调用来执行,Obj没有返回值,故a是undefined。

两者区别总结

使用new操作符创建对象,并且构造函数没有返回值或者返回为基本数据类型,那么返回该对象,如下例:

function Obj(name){
this.name = name;
}
var b = new Obj;
console.log(b); // Obj { name: undefined }
function Obj(name){
this.name = name;
return 'chic';
}
var b = new Obj;
console.log(b); // 同上

如果构造函数返回一个引用类型:

function Obj(name){
this.name = name;
return {};
}
var b = new Obj;
console.log(b); // {}

总结

对于不加new来执行构造函数来说,返回值就是构造函数的执行结果;对于加new关键字来执行构造函数而言,如果return的是基本数据类型,那么忽视掉该return值,如果返回的是一个引用类型,那么返回该引用类型。

那么问题答案你有了吗?

参考答案 :

function Obj(name){
this.name = name;
return this;
}
Obj.prototype.name = "name2";
var a = Obj("name1");
var b = new Obj;

以上就是我们给大家整理的js构造函数创建对象是否加new问题的全部内容,大家阅读后还有疑问可以在下方留言区讨论,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
react MPA 多页配置详解
Oct 18 Javascript
JS实现分页导航效果
Feb 19 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 #Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 #Javascript
Angular17之Angular自定义指令详解
Jan 21 #Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 #Javascript
详解node.js中的npm和webpack配置方法
Jan 21 #Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 #jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
javascript 中的继承实例详解
2017/05/05 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
python实现分页效果
2017/10/25 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
倡议书格式
2014/04/14 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
小学远程教育工作总结
2015/08/13 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL