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 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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
Yii2中简单的场景使用介绍
2017/06/02 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
javascript实现微信分享
2014/12/23 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
编写简单的Python程序来判断文本的语种
2015/04/07 Python
详解python中eval函数的作用
2019/10/22 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
教室标语大全
2014/06/21 职场文书
公司授权委托书范本
2014/09/18 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
校友回访母校寄语
2015/02/26 职场文书
2015年征兵工作总结
2015/07/23 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
python本地文件服务器实例教程
2021/05/02 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB