javascript基础之面向对象(上)
2015-11-20 10:24
363 查看
面向对象是一种设计思想也是一种设计模式。首先,我们要先知道对象到底是什么东东
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/899229cfab2c02d614490485cabb781b.gif)
。
举一个简单的例子:
一台电视机,它能干什么呢?起码它能放电视节目对吧,它上边有很多按钮,可以调音量、换台、开机什么的。但是为什么能放节目呢,它这个大盒子里边这些个电路啊什么的是怎么运行的呢?起码对于我们来说是不知道的,但是不知道我照样可以拿它来看电视、换台什么的,不影响我们的使用。这个电视就是个对象。
对象可以理解为一个黑盒子,我不知道它里边的结构是什么,但是我可以拿来用。
现在来讲讲工厂模式,顾名思义,工厂嘛。基本流程:引进原材料、加工、出场。OK,看个工厂模式的代码:
代码块1:
我定义了一个“人”这么一个对象,它有属性:名字、年龄、性别,它有方法:说出自己的基本信息。
实例化以后,第一个弹出“李雷的年龄是14,性别是男”,第二个弹出“韩梅梅的年龄是15,性别是女”。
但是工厂模式这个实例化没有"new",似乎不符合对象的标准实例化。而且执行如下代码会返回“false”:
相当于实例多少个就生成多少个“info()”方法,极大的占用资源。
现在参考下边另一种写法:
代码块2:
这里用到了"this"关键字,请注意注释掉的代码是,被注释掉的代码相当于浏览器自己添加的,这样对比代码块1就很好理解了。
这样子“new”的问题解决了,但是alert返回还是false,说明资源占用的问题还在。
现在终于说到“prototype”了,prototype是什么呢?-----“原型”,大家都知道,但原型是个什么鬼呢?举个例子:
p标签的内容都会变成红色,所以,原型就是html里的class,原型就是html里的class,原型就是html里的class。重要的事情说三遍。
好比我html里边的class定义了一个样式,引用该class的标签就会拥有这个样式。原型--prototype也是一样的道理。
现在来看下边的代码:
代码块3:
这里属性用构造函数定义,方法用原型定义,现在alert返回的是true。这样子既解决了new的问题,又解决了资源占用的问题。这种方式通常称为混合方式,算是面向对象主流的写法,当然这里只是一个很简单的例子。
现在陈述一下简单的概念,对象就是类的实例化,什么是类,Array其实就是一个类,它有很多方法比如push()、pop()什么的,但是类本身不能调用属性和方法,比如Array.push('a');明显会报错,只有对类实例化以后称为对象才可以调用这些属性和方法,比如:
这样才正确。以最开始的电视机举例,电视就是家用电器的的示例,电视就是对象,而家用电器就是类。就这么简单。
后续会陈述一下,继承、封装、多重继承等一些概念。开个头先,多重继承就是一个孩子有多个爹。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/899229cfab2c02d614490485cabb781b.gif)
。
举一个简单的例子:
一台电视机,它能干什么呢?起码它能放电视节目对吧,它上边有很多按钮,可以调音量、换台、开机什么的。但是为什么能放节目呢,它这个大盒子里边这些个电路啊什么的是怎么运行的呢?起码对于我们来说是不知道的,但是不知道我照样可以拿它来看电视、换台什么的,不影响我们的使用。这个电视就是个对象。
对象可以理解为一个黑盒子,我不知道它里边的结构是什么,但是我可以拿来用。
现在来讲讲工厂模式,顾名思义,工厂嘛。基本流程:引进原材料、加工、出场。OK,看个工厂模式的代码:
代码块1:
function Person(name,age,sex){ var obj = new Object(); obj.name=name; obj.age=age; obj.sex=sex; obj.info=function(){ alert(name+"的年龄是"+age+",性别是"+sex); } return obj; }
var a = Person('李雷','14','男'); var b = Person('韩梅梅','15','女');
a.info();
b.info();
我定义了一个“人”这么一个对象,它有属性:名字、年龄、性别,它有方法:说出自己的基本信息。
实例化以后,第一个弹出“李雷的年龄是14,性别是男”,第二个弹出“韩梅梅的年龄是15,性别是女”。
但是工厂模式这个实例化没有"new",似乎不符合对象的标准实例化。而且执行如下代码会返回“false”:
<span style="white-space:pre"> </span>alert(a.info == b.info);
相当于实例多少个就生成多少个“info()”方法,极大的占用资源。
现在参考下边另一种写法:
代码块2:
function Person(name,age,sex){ /*var this = new Object();*/ this.name=name; this.age=age; this.sex=sex; this.info=function(){ alert(name+"的年龄是"+age+",性别是"+sex); } /*return this;*/ }
var a = new Person('李雷','14','男'); var b = new Person('韩梅梅','15','女');
a.info();
b.info();
alert(a.info == b.info);
这里用到了"this"关键字,请注意注释掉的代码是,被注释掉的代码相当于浏览器自己添加的,这样对比代码块1就很好理解了。
这样子“new”的问题解决了,但是alert返回还是false,说明资源占用的问题还在。
现在终于说到“prototype”了,prototype是什么呢?-----“原型”,大家都知道,但原型是个什么鬼呢?举个例子:
<p class="color">a</p> <p class="color">b</p> <p class="color">c</p> <p class="color">d</p> <style> .color{ color:red; } </style>
p标签的内容都会变成红色,所以,原型就是html里的class,原型就是html里的class,原型就是html里的class。重要的事情说三遍。
好比我html里边的class定义了一个样式,引用该class的标签就会拥有这个样式。原型--prototype也是一样的道理。
现在来看下边的代码:
代码块3:
function Person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; } Person.prototype.info=function(){ alert(name+"的年龄是"+this.age+",性别是"+this.sex); } var person1 = new Person('李雷','14','男'); var person2 = new Person('韩梅梅','15','女'); alert(person1.info == person2.info);
这里属性用构造函数定义,方法用原型定义,现在alert返回的是true。这样子既解决了new的问题,又解决了资源占用的问题。这种方式通常称为混合方式,算是面向对象主流的写法,当然这里只是一个很简单的例子。
现在陈述一下简单的概念,对象就是类的实例化,什么是类,Array其实就是一个类,它有很多方法比如push()、pop()什么的,但是类本身不能调用属性和方法,比如Array.push('a');明显会报错,只有对类实例化以后称为对象才可以调用这些属性和方法,比如:
var arr = new Array(); arr.push('a');
这样才正确。以最开始的电视机举例,电视就是家用电器的的示例,电视就是对象,而家用电器就是类。就这么简单。
后续会陈述一下,继承、封装、多重继承等一些概念。开个头先,多重继承就是一个孩子有多个爹。
相关文章推荐
- javascript:;与javascript:void(0)使用介绍
- JavaScript高级程序设计(第3版)中文在线阅读
- JSP页面<%@ ...%>是 什么意思
- 爬虫搜索基础篇(二)
- 跟我学习javascript创建对象(类)的8种方法
- jsp页面中,<%! %>的感叹号是干什么用的?
- javascript中数组方法小计
- 「大概可能也许是」目前最好的 JavaScript 异步方案 async/await
- 66、fastJson 解析json数据时,如果key值不同怎么处理?
- 跟我学习javascript的最新标准ES6
- Json.Net从4.0升级到7.0带来的问题
- C#中使用JSON.NET实现JSON、XML相互转换
- js编译与执行顺序
- 常规功能和模块自定义系统 (cfcmms)—018自定义grid方案(2)
- JSP:JSP中的EL表达式
- 详解JavaScript语言的基本语法要求
- JSP常用命令详解
- JSP:JSP动作标签
- 每天一篇javascript学习小结(面向对象编程)
- JSON数据格式