JavaScript创建对象方法实例小结


Posted in Javascript onSeptember 03, 2018

本文实例讲述了JavaScript创建对象方法。分享给大家供大家参考,具体如下:

最简单的方式就是创建一个Object对象,并为其添加属性和方法。

//示例代码
var person=new Object()
person.name="yumi"
person.age=18
person.job="coder"
person.sayName=function(){
  alert(this.name)
}
person.sayName()//输出yumi

这种方式使用同一个接口创建多个对象,会出现大量重复代码。

1.工厂模式

JavaScript中无法创建类,我们可以用函数来封装以特定接口创建对象的细节。

//示例代码
function createPerson(name,age,job){
  var o=new Object();
  o.name=name;
  o.age=age;
  o.job=job;
  o.sayName=function(){
    alert(this.name)
  };
  return o;
}
var person1=createPerson("yumi",18,"coder");
var person2=createPerson("echo",21,"player");
person1.sayName();//输出yumi
person2.sayName();//输出echo

工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别问题,即怎样知道一个对象的类型。

2.构造函数模式

可以创建自定义的构**造函数,从而定义自定义对象类型的属性和方法。

//示例代码
function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=function(){
    alert(name);
  }
}
var person1=new Person("yumi",18,"coder");
var person2=new Person("echo",21,"player");
person1.sayName();//输出yumi
person2.sayName();//输出echo

创建出的对象既是Object的实例,也是Person的实例,也就是说将来我们可以将它的实例标识为特定类型,这也是优于工厂模式的地方。但是构造函数模式也有缺点,即就是每实例化一个对象,对象方法都会创建一遍,我们可以按如下方法稍加改进:

//示例代码
function Person(name,age,job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayName=sayName;
}
function sayName(){
  alert(name);
}
var person1=new Person("yumi",18,"coder");
var person2=new Person("echo",21,"player");
person1.sayName();
person2.sayName();

将函数拿到构造函数外部,构造函数内部将sayName属性设成全局sayName函数(一般单独的函数名存放的是指向该函数的指针,而函数名加括号为该函数的执行结果)。但这样做,暴露出的问题是:全局作用域中定义的函数只能被某一个对象调用,不符合全局定义了。而且,如果某个对象有很多方法,这些方法都定义在全局作用域的话,也就没什么封装性可言了。

3.原型模式

前面我们说了,构造函数模式的缺点是属性或方法在构造函数作用域中只能被某个对象调用,想想我们在其他面向对象语言中的处理方式,是将公用的属性方法定义在父类中,然后通过继承父类调用。但是JavaScript中不存在类、继承这些概念,而是通过原型链实现“继承”。

下面就是我们要说的原型模式:

//示例代码
function Person(){
  Person.prototype.name"yumi";
  Person.prototype.age=18;
  Person.prototype.job=coder;
  Person.prototype.sayName=function(){
    alert(name);
  }
}
var person1=new Person();
var person2=new Person();
person1.sayName();  //"yumi"
person2.sayName();  //"yumi"
alert(person1.sayName==person2.sayName);  //true

无论什么时候,只要创建了一个新函数,就会为该函数创建一个prototype属性。默认情况下,所有prototype属性都会自动获得一个constructor(构造函数)属性。这个属性包含一个指向prototype属性所在函数的指针。也就是说,Person可以理解为一个类(实际是个函数),Person.prototype指向原型(原型中定义的方法或属性可以被对象调用,相当于一个共享区域),然后Person.prototype.constructor又指向了Person。实例化的对象有一个内部属性可以指向Person.prototype,但是不能指向构造函数constructor,跟其无关。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 #Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 #Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 #Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 #Javascript
详解vue-cli下ESlint 配置说明
Sep 03 #Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 #Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 #Javascript
You might like
PHP4.04简明安装
2006/10/09 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
用 JSON 处理缓存
2007/04/27 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
对python文件读写的缓冲行为详解
2019/02/13 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
python集合能干吗
2020/07/19 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
高一英语教学反思
2014/01/22 职场文书
主题婚礼策划方案
2014/02/10 职场文书
《春天来了》教学反思
2014/04/07 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
电视新闻稿
2015/07/17 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers