简单分析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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
一文了解Vue中的nextTick
May 06 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获取当前url的具体方法全面解析
2013/11/26 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
对python中的装包与解包实例详解
2019/08/24 Python
python实现canny边缘检测
2020/09/14 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
企业管理培训感言
2014/01/27 职场文书
会计专业求职信范文
2014/03/16 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
Python 文字识别
2022/05/11 Python