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基础 函数“重载” 详细介绍
Oct 25 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
php跨域调用json的例子
Nov 13 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
深入理解javaScript中的事件驱动
2013/05/21 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
js图片上传的封装代码
2017/08/01 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python translator使用实例
2008/09/06 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python实现最大优先队列
2019/08/29 Python
python pycharm的安装及其使用
2019/10/11 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
HTTP状态码详解
2021/03/18 杂记
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
2014年幼儿园植树节活动方案
2014/03/02 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
贷款担保书范文
2014/05/13 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技