js核心基础之构造函数constructor用法实例分析


Posted in Javascript onMay 11, 2019

本文实例讲述了js核心基础之构造函数constructor用法。分享给大家供大家参考,具体如下:

在js中,可以利用构造函数来创建特定类型的对象,其中,有一些原生的构造函数,Object、Array、等等,所以,当type of Object时,返回的是function。此外,我们还可以创建自定义的构造函数,从而自定义对象的属性以及方法。

例如:

function Person(name,age,job) {
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=function () {
    alert(this.name);
  }
}
var person1=new Person('zhy',18,'SoftWare Engineer');
var person2=new Person('zhy2',19,'Doctor');

注意:要创建Person的新实例,必须使用new操作符。如果不使用new,则属性和方法都被添加给了window对象了。

这种方式调用构造函数实际上会经历一下4个步骤:

① 创建一个新对象;
② 将构造函数的作用域赋给新对象,因此,this就指向了这个新对象;
③ 执行构造函数中的代码,即为这个新对象添加属性、方法;
④ 返回新对象。

缺点:

在上述例子中,我们可以知道,每个实例都有一个sayName的方法,但是

console.log(person1.sayName==person2.sayName);//false

因为,每创建一个实例的时候,实际上所做的是下面这种:

function Person(name,age,job) {
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=new Function () {
    alert(this.name);
  }
}

所以,person1的sayName跟person2的sayName不是同一个实例。但是我们可以这样做:

function Person(name,age,job) {
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=sayName;
 }
function sayName(){
   alert(this.sayName);
}

这样一来,每个实例对象里面 的sayName函数指向的都是同一个函数。

可是问题又来了,如果对象有很多的函数要定义,那么就要定义很多个全局函数,没有封装性可言了,好在这些问题可以通过使用原型模式来解决。

本文参照《JavaScript高级程序编程》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
js核心基础之闭包的应用实例分析
May 11 #Javascript
vue下载excel的实现代码后台用post方法
May 10 #Javascript
微信小程序如何再次获取用户授权的方法
May 10 #Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 #Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 #Javascript
vue element中axios下载文件(后端Python)
May 10 #Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 #Javascript
You might like
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Python for i in range ()用法详解
2020/09/18 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
Linux内核产生并发的原因
2012/07/13 面试题
火山动力Java笔试题
2014/06/26 面试题
卫生系统先进事迹
2014/05/13 职场文书
服装发布会策划方案
2014/05/22 职场文书
公司活动总结范文
2014/07/01 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
理解python中装饰器的作用
2021/07/21 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle