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中的window.open返回object的错误的解决方法
Aug 15 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
javascript实现智能手环时间显示
Sep 18 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
安装dbus-python的简要教程
2015/05/05 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
jupyter notebook 多行输出实例
2020/04/09 Python
自学python用什么系统好
2020/06/23 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
高一学生期末评语
2014/04/25 职场文书
户籍证明模板
2014/09/28 职场文书
会计简历自我评价
2015/03/10 职场文书
感动中国何玥观后感
2015/06/02 职场文书
实习单位鉴定意见
2015/06/04 职场文书
复活读书笔记
2015/06/29 职场文书