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 相关文章推荐
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
js+css3实现旋转效果
Jan 20 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 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+mysql一个名片库程序
2006/10/09 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
python django集成cas验证系统
2014/07/14 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
python 连续不等式语法糖实例
2020/04/15 Python
Keras loss函数剖析
2020/07/06 Python
ORACLE第二个十问
2013/12/14 面试题
linux面试题参考答案(5)
2016/11/05 面试题
平民服装店创业计划书
2014/01/17 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
八年级美术教学反思
2014/02/02 职场文书
四年级科学教学反思
2014/02/10 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
英文演讲稿
2014/05/15 职场文书
课例研修方案
2014/05/31 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL