简单分析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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
layui选项卡效果实现代码
May 19 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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 smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
jquery select选中的一个小问题
2009/10/11 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
vuex入门最详细整理
2020/03/04 Javascript
python基本语法练习实例
2017/09/19 Python
分享vim python缩进等一些配置
2018/07/02 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
团员个人的自我评价
2013/12/02 职场文书
怎样写好自我鉴定
2013/12/04 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
大学生村官演讲稿
2014/04/25 职场文书
2015年班组建设工作总结
2015/05/13 职场文书