简单分析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语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
通过url查找a元素并点击
Apr 09 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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 Undefined index报错的修复方法
2011/07/17 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
2019/10/22 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
python图像常规操作
2017/11/11 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
wxPython色环电阻计算器
2019/11/18 Python
学习python需要有编程基础吗
2020/06/02 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
销售员态度差检讨书
2014/10/26 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
二年级数学教学反思
2016/02/16 职场文书
python​格式化字符串
2022/04/20 Python