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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 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
php中神奇的fastcgi_finish_request
2011/05/02 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
解决vue attr取不到属性值的问题
2018/09/18 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Python实现爬取并分析电商评论
2020/06/19 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
C有"按引用传递"吗
2016/09/06 面试题
工商管理专业学生的自我评价
2013/10/01 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
员工辞职信范文
2015/03/02 职场文书
结婚十年感言
2015/07/31 职场文书
消防安全主题班会
2015/08/12 职场文书
初中生活随笔
2015/08/15 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
python中的random模块和相关函数详解
2022/04/22 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android