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 相关文章推荐
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 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学习笔记之三 数据库基本操作
2011/01/17 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
javascript arguments使用示例
2014/12/16 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
web打印小结
2017/01/11 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
请求时token过期自动刷新token操作
2020/09/11 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
Python实现的批量下载RFC文档
2015/03/10 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
模具专业毕业推荐信
2014/03/08 职场文书
空乘英文求职信
2014/04/13 职场文书
疾病捐款倡议书
2014/05/13 职场文书
品牌推广策划方案
2014/05/28 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
小学教师求职信范文
2015/03/20 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
投标单位介绍信
2015/05/05 职场文书
部门主管竞聘书
2015/09/15 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android