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判断录入的日期是否合法
Jan 08 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
JS原生瀑布流效果实现
Apr 26 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绘图技术
2013/07/03 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php实现httpRequest的方法
2015/03/13 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
python中base64加密解密方法实例分析
2015/05/16 Python
python正则中最短匹配实现代码
2018/01/16 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
三维科技面试题
2013/07/27 面试题
小学生成绩单评语
2014/12/31 职场文书
庆七一活动简报
2015/07/20 职场文书
改进工作作风心得体会
2016/01/23 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis