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  THIS详解 面向对象
Mar 25 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
js密码强度检测
Jan 07 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
微信小程序实现原生步骤条
2019/07/25 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python 获取项目根路径的代码
2019/09/27 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
static关键字的用法
2013/10/07 面试题
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
初一英语教学反思
2014/01/11 职场文书
怀念母亲教学反思
2014/04/28 职场文书
工业设计专业自荐书
2014/06/05 职场文书
初三语文教学计划
2015/01/22 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
清明节主题班会
2015/08/14 职场文书
go xorm框架的使用
2021/05/22 Golang
浅谈MySQL user权限表
2021/06/18 MySQL
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
instantclient客户端 连接oracle数据库
2022/04/26 Oracle