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 相关文章推荐
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
ES6中new Function()语法及应用实例分析
Feb 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采集相关教程之一 CURL函数库
2010/02/15 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
js对象基础实例分析
2015/01/13 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
python中assert用法实例分析
2015/04/30 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python日志模块logging基本用法分析
2018/08/23 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
黄金酒广告词
2014/03/21 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
同学聚会策划方案
2014/06/06 职场文书
2014年城管工作总结
2014/11/20 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
余世维讲座观后感
2015/06/11 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
python在package下继续嵌套一个package
2022/04/14 Python