简单分析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 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
jQuery简单实现日历的方法
May 04 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
解决ant Design Search无法输入内容的问题
Oct 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实现文件安全下载
2006/10/09 PHP
图书管理程序(三)
2006/10/09 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Python实现汇率转换操作
2020/05/03 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
关于Java String的一道面试题
2013/09/29 面试题
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
保险专业大学生职业规划书
2014/03/03 职场文书
小班上学期评语
2014/05/05 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
放牛班的春天观后感
2015/06/01 职场文书
追悼会答谢词范文
2015/09/29 职场文书
银行培训心得体会范文
2016/01/09 职场文书