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 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
手机端转换rem适应
Apr 01 Javascript
浅谈struts1 & jquery form 文件异步上传
May 25 jQuery
JS实现身份证输入框的输入效果
Aug 21 Javascript
vue项目中axios使用详解
Feb 07 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
Vue.js的模板语法详解
Feb 16 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 JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python线程指南详细介绍
2017/01/05 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python使用递归的方式建立二叉树
2019/07/03 Python
Python 切分数组实例解析
2019/11/07 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python3监控疫情的完整代码
2020/02/20 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
应届大专生自荐书
2014/06/16 职场文书
干部作风建设工作总结
2014/10/29 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
运动会通讯稿600字
2015/07/20 职场文书