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 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 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的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
Js的MessageBox
2006/12/03 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python中的zip函数使用示例
2015/01/29 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
好好学习保证书
2015/02/26 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
教师读书活动心得体会
2016/01/14 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL