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模仿msgbox提示效果代码
Jun 10 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
一分钟理解js闭包
May 04 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 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
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
np.random.seed() 的使用详解
2020/01/14 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
opencv实现图像平移效果
2021/03/24 Python
网络教育自我鉴定
2013/11/01 职场文书
工地门卫岗位职责
2013/12/30 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
村官个人总结范文
2015/03/03 职场文书
导游词之无锡唐城
2019/12/12 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
如何利用python创作字符画
2022/06/25 Python