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图片自动切换效果处理代码
May 07 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python按钮的响应事件详解
2019/03/04 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
教师评优事迹材料
2014/01/10 职场文书
医院总经理岗位职责
2014/02/04 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
函授生自我鉴定
2014/03/25 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
假面舞会策划方案
2014/05/29 职场文书
单位委托书
2014/10/15 职场文书
2014年保卫工作总结
2014/12/05 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
写给领导的感谢信
2015/01/22 职场文书
放牛班的春天观后感
2015/06/01 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python