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 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
javascript的数组和常用函数详解
May 09 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
微信小程序实现写入读取缓存详解
Aug 30 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
php实现网站留言板功能
2015/11/04 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
angular实现图片懒加载实例代码
2017/06/08 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python错误处理详解
2014/09/28 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
药学专业大学生个人的自我评价
2013/11/04 职场文书
银行类自荐信
2014/02/04 职场文书
单位承诺书格式
2014/05/21 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js