JS使用new操作符创建对象的方法分析


Posted in Javascript onMay 30, 2019

本文实例讲述了JS使用new操作符创建对象的方法。分享给大家供大家参考,具体如下:

在编写js代码时,我们有时会需要使用函数来模拟java中的类,并用它来产生对象,在定义了一个构造函数之后我们需要使用new操作符来调用调用函数才能得到我们想要的对象。例如:

<script>
function Constructor(name){
this.name = name
}
var person1 = Constructor("张三");//undefined
var person2 = new Constructor("张三");//得到一个对象{name:"张三"}
console.log(person1);
console.log(person2);
</script>

运行结果:

JS使用new操作符创建对象的方法分析

如果我们不使用new操作符调用函数,就只会简单的执行函数,并把函数的返回值赋给person1,所以上面的例子中person1的值是undefined,.

如果我们使用new操作符调用构造函数,做了哪些事情呢?

1.构造函数没有返回值

使用new操作符调用函数,会隐式的创建一个对象(我们这里称这个对象为obj),这个对象obj是连接到构造函数的原型上的,即obj会继承构造函数原型上的属性方法,并且构造函数中的this也被绑定到了这个对象上,执行完成后这个对象会被作为返回值返回。

2.构造函数有返回值(这种情况比较少,至少我没用过)

new出来的值由返回值的prototype而定

例如:

function Constructor(name){
this.name = name
return this.name;
}
var person = new Constructor("123");//Constructor {name: "123"};Object,因为基本类型的prototype都是Object
function Constructor(name){
this.name = name
return new String(this.name);
}
var person = new Constructor("123");//String {0: "1", 1: "2", 2: "3", length: 3, [[PrimitiveValue]]: "123"},
console.log(person);

运行结果:

JS使用new操作符创建对象的方法分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
生成二维码方法汇总
Dec 26 Javascript
js操作滚动条事件实例
Jan 29 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 #Javascript
简述pm2常用命令集合及配置文件说明
May 30 #Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 #Javascript
浅谈Vue的响应式原理
May 30 #Javascript
vue实现固定位置显示功能
May 30 #Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 #Javascript
JS使用cookie保存用户登录信息操作示例
May 30 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
杏林同学录(四)
2006/10/09 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
jQuery插件开发基础简单介绍
2013/01/07 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
公司培训欢迎词
2014/01/10 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
质量主管工作职责
2014/09/26 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
会议营销主持词
2015/07/03 职场文书
医学会议开幕词
2016/03/03 职场文书
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android