简单分析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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 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 mysql数据库操作分页类
2008/06/04 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python模拟三级菜单效果
2017/09/11 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python collections模块使用方法详解
2019/08/28 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
如何在python中判断变量的类型
2020/07/29 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
局域网定义和特性
2016/01/23 面试题
个人实用的自我评价范文
2013/11/23 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
个人先进材料范文
2014/12/30 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
城南旧事读书笔记
2015/06/29 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫