简单分析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中继承的三种方式
Oct 16 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
JS数组的常见用法实例
Feb 10 Javascript
js操作数组函数实例小结
Dec 10 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
js实现二级联动简单实例
Jan 11 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用header函数实现301跳转代码实例
2013/11/25 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python循环语句中else的用法总结
2016/09/11 Python
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
应届生骨科医生求职信
2013/10/31 职场文书
会计毕业生自我鉴定
2013/11/04 职场文书
车间统计员岗位职责
2014/01/05 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
进行数据处理的6个 Python 代码块分享
2022/04/06 Python