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 null undefined 空区别说明
Jun 13 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
常用jQuery代码分享
Jul 14 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
跟老齐学Python之Import 模块
2014/10/13 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
常用的10个Python实用小技巧
2020/08/10 Python
python的链表基础知识点
2020/09/13 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
英国电子专家:maplin
2019/09/04 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
成人教育自我鉴定
2013/11/01 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
C++程序员求职信
2014/05/07 职场文书
组织生活会发言材料
2014/12/15 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js