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字符串连接性能问题有争议
Jan 12 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
React实现todolist功能
Dec 28 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
php过滤html标记属性类用法实例
2014/09/23 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python在每个字符后添加空格的实例
2018/05/07 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
班长自荐书范文
2014/02/11 职场文书
求职简历自我评价范例
2014/03/12 职场文书
学雷锋倡议书
2015/01/19 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers