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 相关文章推荐
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
js精度溢出解决方案
Dec 02 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
javascript连续赋值问题
Jul 08 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
vue实现登录拦截
Jun 29 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
OpenLayers实现图层切换控件
Sep 25 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-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
Python实现批量转换文件编码的方法
2015/07/28 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
小学科学教学反思
2014/01/26 职场文书
社区母亲节活动记录
2014/03/06 职场文书
先进党支部事迹材料
2014/12/24 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android