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 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
使用python实现滑动验证码功能
2019/08/05 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
python程序输出无内容的解决方式
2020/04/09 Python
python中format函数如何使用
2020/06/22 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
检察院起诉书
2015/05/20 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS