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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
JavaScript中string对象
Jun 12 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
详解React中的组件通信问题
Jul 31 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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 Undefined index报错的修复方法
2011/07/17 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
php实现头像上传预览功能
2017/04/27 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
javascript类型转换使用方法
2014/02/08 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JSONP基础知识详解
2017/03/19 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
python pdb调试方法分享
2014/01/21 Python
Python回调函数用法实例详解
2015/07/02 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
建筑安全员岗位职责
2014/03/13 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
旅游安全责任协议书
2016/03/22 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
基于PyQt5制作一个群发邮件工具
2022/04/08 Python