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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 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 和 MYSQL
2006/10/09 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
js获取class的所有元素
2013/03/28 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python实现选择排序
2017/06/04 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Python logging模块原理解析及应用
2020/08/13 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
骨干教师培训制度
2014/01/13 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
安全承诺书范文
2014/03/26 职场文书
中介业务员岗位职责
2014/04/09 职场文书
机械专业技术员求职信
2014/06/14 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android