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数据显示插件整合实现代码
Oct 24 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
js实现div色块碰撞
Jan 16 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
js通过canvas生成图片缩略图
Oct 02 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
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入门速成教程
2007/03/19 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
python运行时间的几种方法
2016/06/17 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python IDLE入门简介
2017/12/08 Python
Python 元类实例解析
2018/04/04 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
Pytorch 实现权重初始化
2019/12/31 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书