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 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
Layui点击图片弹框预览的实现方法
Sep 16 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
利用Python爬取可用的代理IP
2016/08/18 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
个人债务授权委托书
2014/10/17 职场文书
学习普通话的体会
2014/11/07 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏