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 相关文章推荐
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 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
php 常用类汇总 推荐收藏
2010/05/13 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php HTML无刷新提交表单
2016/04/05 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
Stop SQL Server
2007/06/21 Javascript
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
python__name__原理及用法详解
2019/11/02 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
中学生班主任评语
2014/01/30 职场文书
工商管理专业自荐信
2014/06/03 职场文书
建筑安全标语
2014/06/07 职场文书
心灵捕手观后感
2015/06/02 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
Python基础之进程详解
2021/05/21 Python
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
MySQL 数据表操作
2022/05/04 MySQL
浅谈Redis的事件驱动模型
2022/05/30 Redis