简单分析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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 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对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Python输出指定字符串的方法
2020/02/06 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
CAD制图人员的自荐信
2014/02/07 职场文书
搞笑征婚广告词
2014/03/17 职场文书
打架检讨书
2015/01/27 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang