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 相关文章推荐
js showModalDialog参数的使用详解
Jan 07 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
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 注册时输入信息验证器的实现详解
2013/07/05 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python解析xml文件实例分析
2015/05/27 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
Python 随机按键模拟2小时
2020/12/30 Python
酒店员工职业生涯规划
2014/02/25 职场文书
安全保证书
2015/01/16 职场文书
工作会议通知
2015/04/15 职场文书