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 相关文章推荐
Javascript JSQL,SQL无处不在,
May 05 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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 n个不重复的随机数生成代码
2009/06/23 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
十一酒店活动方案
2014/02/20 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
2015年植树节活动总结
2015/02/06 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
信用卡工资证明范本
2015/06/19 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
关于做家务的心得体会
2016/01/23 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
vue递归实现树形组件
2022/07/15 Vue.js