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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
javascript连续赋值问题
Jul 08 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
理解javascript封装
Feb 23 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
JS轮播图的实现方法2
Aug 25 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
jquery 年会抽奖程序
2011/12/22 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
Python操作SQLite简明教程
2014/07/10 Python
python之wxPython应用实例
2014/09/28 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
解决python线程卡死的问题
2019/02/18 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python 实现简单的客户端认证
2020/07/29 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python GUI计算器的实现
2020/10/09 Python
汽车运用工程毕业生自荐信
2013/10/29 职场文书
八年级英语教学反思
2014/01/09 职场文书
协议书样本
2014/04/23 职场文书
教师党员自我评价2015
2015/03/04 职场文书