简单分析javascript面向对象与原型


Posted in Javascript onMay 21, 2015

本文主要内容参考来自JavaScript高级程序设计,面向对象与原型章节:

1、工厂模式

ECMAScript 可以通过工厂模式来创建对象:

//工厂模式
function createObject(name, age) {
  var obj = new Object();                  //创建对象
  obj.name = name;                      //添加属性
  obj.age = age;
  obj.run = function () {                    //添加方法
    return this.name + this.age + '运行中...';
  };
  return obj;                            //返回对象引用
};
var obj1 = createObject('Lee', 100);          //创建第一个对象
var obj2 = createObject('Jack', 200);          //创建第二个对象
//alert(obj1.run());                          //打印第一个对象实例的run()方法
//alert(obj2.run());                          //打印第二个对象实例的run()方法

//alert(typeof obj1);
//alert(typeof obj2);
alert(obj1 instanceof Object); //true
alert(obj2 instanceof Object); //true

通过工厂模式创建的对象,解决了重复实例化问题,但对象识别问题无法解决(所有对象均是Object),因此要想解决对象识别问题,我们采用下面的构造函数。

2、构造函数

//构造函数创建
function Person(name,age){  //所有构造函数对象都是Object
  this.name=name;
  this.age=age;
  this.run=function(){
    return this.name+this.age+"ing...";
  };
};
var person1=new Person('zhu1',100);
var person2=new Person('zhu2',200);
alert(person1.run());
alert(person2.run());

alert(person1 instanceof Object); //ture
alert(typeof person2);         //Person
alert(person2 instanceof Person);  // true
var person3=new Object();
Person.call(person3,'zhu3',300);//对象冒充,person3是Object类型,冒充Person类型
alert(person3.run());

构造函数中this:代表当前作用域对象的引用,如果在全局范围this代表window对象,如果在构造函数体内,就代表当前构造函数所声明的对象。

构造函数方法,及解决了重复实例化问题,有解决了对象识别问题,对比跟工厂方法不同之处可知:

1.构造函数方法没有显示的创建对象(new Object());

2.直接将属性和方法值赋值给this;

3.没有return 语句;

4.但是使用构造函数创建必须使用new运算符;

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js 编程笔记 无名函数
Jun 28 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
node.js文件上传处理示例
Oct 27 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 #Javascript
js兼容火狐获取图片宽和高的方法
May 21 #Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 #Javascript
javascript去除空格方法小结
May 21 #Javascript
删除javascript所创建子节点的方法
May 21 #Javascript
png在IE6 下无法透明的解决方法汇总
May 21 #Javascript
javascript相关事件的几个概念
May 21 #Javascript
You might like
PHP 输出缓存详解
2009/06/20 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python中extend和append的区别讲解
2019/01/24 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
销售会计岗位职责
2014/03/15 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
微信搭讪开场白
2015/05/28 职场文书
纪录片信仰观后感
2015/06/08 职场文书
圣诞晚会主持词
2015/07/01 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android