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键盘事件介绍
Jan 31 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
详解webpack+express多页站点开发
Dec 22 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 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 文件扩展名 获取函数
2009/06/03 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python进程间通信用法实例
2015/06/04 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
学校评语大全
2014/05/06 职场文书
幼儿生日活动方案
2014/08/27 职场文书
代领报检证委托书范本
2014/10/11 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
周一给客户的问候语
2015/11/10 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL