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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
Javascript实现单例模式
Jan 24 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 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
pdo中使用参数化查询sql
2011/08/11 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
Python中optparse模块使用浅析
2015/01/01 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
中医专业应届生求职信
2013/11/17 职场文书
入党自荐书范文
2014/03/09 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
2016情人节宣传语
2015/07/14 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
详解Python中的for循环
2022/04/30 Python