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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 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查询网站的PR值
2013/10/30 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
php实现求相对时间函数
2015/06/15 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
Django实现发送邮件找回密码功能
2019/08/12 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
人口与计划生育责任书
2015/05/09 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
Python中字符串对象语法分享
2022/02/24 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers