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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
原生js滑动轮播封装
Jul 31 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
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
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
学习ExtJS table布局
2009/10/08 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
实例解析Array和String方法
2016/12/14 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
简单讲解Python中的闭包
2015/08/11 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
办公室前台的岗位职责
2013/12/20 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
义诊活动总结
2015/02/04 职场文书
留学推荐信英文范文
2015/03/26 职场文书
医院合作意向书范本
2015/05/08 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js