javascript基础之面向对象(上)

原创 2015年11月20日 10:24:57

       面向对象是一种设计思想也是一种设计模式。首先,我们要先知道对象到底是什么东东大笑

举一个简单的例子:

        一台电视机,它能干什么呢?起码它能放电视节目对吧,它上边有很多按钮,可以调音量、换台、开机什么的。但是为什么能放节目呢,它这个大盒子里边这些个电路啊什么的是怎么运行的呢?起码对于我们来说是不知道的,但是不知道我照样可以拿它来看电视、换台什么的,不影响我们的使用。这个电视就是个对象。

       对象可以理解为一个黑盒子,我不知道它里边的结构是什么,但是我可以拿来用。

       现在来讲讲工厂模式,顾名思义,工厂嘛。基本流程:引进原材料、加工、出场。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的高级面向对象基础

1、javascript包含:     ECMAscript:描述了JS的语法和基本对象(核心)、     DOM(文档对象模型:操作节点)、     BOM(浏览器对象模型:document,ale...
  • alvinfqz
  • alvinfqz
  • 2016年06月07日 00:07
  • 366

前端基础进阶(十):面向对象实战之封装拖拽对象

终于 前面几篇文章,我跟大家分享了JavaScript的一些基础知识,这篇文章,将会进入第一个实战环节:利用前面几章的所涉及到的知识,封装一个拖拽对象。为了能够帮助大家了解更多的方式与进行对...
  • Fuohua
  • Fuohua
  • 2017年04月28日 17:04
  • 253

深入javascript面向对象,js的原型链、继承

进阶面向对象——————————————————————–在JS源码中,系统对象也是基于原型的程序, 尽量不要去添加和修改系统对象的方法 包装对象——————————————————————–基本类型...
  • u014420383
  • u014420383
  • 2015年08月15日 08:57
  • 1257

设计模式-可复用面向对象软件的基础 [读书笔记]

1.将软件与设计模式比拟为城市与建筑模式,那么在面向对象的解决方案里,我们将对象和接口看成墙壁和门窗,模式的核心在于提供了相关问题的解决方案。   在软件设计中可能会遇到很多类似的问题,在每次遇到类似...
  • AnnaLoad
  • AnnaLoad
  • 2016年04月17日 10:26
  • 1631

《JavaScript面向对象精要》

这本书应该是 14 年(或15年)买的,那时人比较傻,看不明白,匆匆看了几十页就束之高阁了,但是一有点很确定,这是本好书。今天终于来到了这里,感觉过了一道坎。引用类型就是对象,对象就是引用类型类型分原...
  • wozaixiaoximen
  • wozaixiaoximen
  • 2017年01月08日 15:34
  • 406

JavaScript面向对象编程指南(第2版) 笔记

2.1 检查变量是否存在时,更好的选择是使用 typeof var result = ""; if (typeof somevar !== "undefined"){ return = "y...
  • xczuis
  • xczuis
  • 2015年09月26日 21:11
  • 1517

设计模式:可复用面向对象软件的基础 笔记

创建型设计模式:创建型模式抽象了实例化过程。它们帮助一个系统独立于如何创建、组合和表示它的那些对象。一个类创建型模式使用继承改变被实例化的类,而一个对象创建型  模式将实例化委托给另一个对象。 创建型...
  • PZ0605
  • PZ0605
  • 2014年12月24日 09:59
  • 628

好书整理系列之-设计模式:可复用面向对象软件的基础 3

第3章创建型模式创建型模式抽象了实例化过程。它们帮助一个系统独立于如何创建、组合和表示它的那些对象。一个类创建型模式使用继承改变被实例化的类,而一个对象创建型模式将实例化委托给另一个对象。随着系统演化...
  • coolstar
  • coolstar
  • 2001年08月16日 11:03
  • 2387

《javascript面向对象编程指南》

**第一章、引言 1.5 面向对象的程序设计常用概念 对象(名词):是指“事物”在程序设计语言中的表现形式。 这里的事物可以是任何东西,我们可以看到它们具有某些明确特征,能执行某些动作。 这些...
  • qq_29781223
  • qq_29781223
  • 2017年06月02日 15:57
  • 177

javascript中的面向对象,你了解多少?

Javascript 是面向对象开发的脚本语言,既然javascript是面向对象开发的,那么面向对象的前提:抽象,应该必须有,那么看看这个对象的创建,该如何抽象,然后封装呢?那么来看看javascr...
  • wangyongxia921
  • wangyongxia921
  • 2014年03月07日 21:13
  • 3089
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript基础之面向对象(上)
举报原因:
原因补充:

(最多只允许输入30个字)