简单分析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获取或设置当前窗口url参数的小例子
Oct 14 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
JavaScript数组操作详解
Feb 04 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
在JavaScript中如何使用宏详解
May 06 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内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
jsTree使用记录实例
2016/12/01 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
浅探express路由和中间件的实现
2019/09/30 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
Python常用库推荐
2016/12/04 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
护理专业推荐信
2013/11/07 职场文书
争论的故事教学反思
2014/02/06 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
就业协议书范本
2014/10/08 职场文书
幼儿园辞职信
2015/05/13 职场文书
汶川大地震感悟
2015/08/10 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS