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 相关文章推荐
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
浅谈js原生拖放
Nov 21 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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 session 错误
2009/05/21 PHP
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
Vue代码整洁之去重方法整理
2019/08/06 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
python基础教程之Hello World!
2014/08/29 Python
python计算圆周率pi的方法
2015/07/11 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python3 xpath和requests应用详解
2020/03/06 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
大学毕业感言一句话
2014/02/06 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
工程项目经理任命书
2014/06/05 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
求职导师推荐信范文
2015/03/27 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android