简单分析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 相关文章推荐
javascript 当前日期转化为中文的实现代码
May 13 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
jQuery聚合函数实例
May 21 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
Postman内建变量常用方法实例解析
Jul 28 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 APP微信提现接口代码
2018/09/30 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
7个JS基础知识总结
2014/03/05 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
js中开关变量使用实例
2017/02/24 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
微信小程序 支付后台java实现实例
2017/05/09 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
vue router demo详解
2017/10/13 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Cpy和Python的效率对比
2015/03/20 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python实现一组典型数据格式转换
2018/12/15 Python
python+opencv实现阈值分割
2018/12/26 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
农民工创业典型事迹
2014/01/25 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
2014年党务公开工作总结
2014/12/09 职场文书