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 相关文章推荐
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
node 标准输入流和输出流代码实例
Sep 19 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数据库连接
2006/10/09 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
导游个人求职信
2014/04/25 职场文书
12岁生日演讲稿
2014/05/14 职场文书
小学入学感言
2015/08/01 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL