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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
node.js超时timeout详解
Nov 26 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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
MySQL中create table语句的基本语法是
2007/01/15 PHP
php中的数组操作函数整理
2008/08/18 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
javascript eval函数深入认识
2009/02/21 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python+opencv实现阈值分割
2018/12/26 Python
python读取各种文件数据方法解析
2018/12/29 Python
python利用faker库批量生成测试数据
2020/10/15 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
Django自带的用户验证系统实现
2020/12/18 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
护士年终个人总结
2015/02/13 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
应急管理工作总结2015
2015/05/04 职场文书
甲午风云观后感
2015/06/02 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
zabbix配置nginx监控的实现
2022/05/25 Servers
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL
详解CSS3浏览器兼容
2022/12/24 HTML / CSS