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中构建ArrayList示例代码
Sep 17 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
JavaScript中跨域问题的深入理解
Mar 04 Javascript
浅谈JS的原型和原型链
Jun 04 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也可以?成Shell Script
2006/10/09 PHP
PHP 实用代码收集
2010/01/22 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
Javascript面向对象编程
2012/03/18 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
js实现微信分享代码
2020/10/11 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
python实现屏保计时器的示例代码
2018/08/08 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
pytorch 常用线性函数详解
2020/01/15 Python
python数字类型math库原理解析
2020/03/02 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
工作个人的自我评价
2014/01/14 职场文书
大学生创业事迹材料
2014/12/30 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
Python实现批量自动整理文件
2022/03/16 Python
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js