韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理

来源：互联网发布：中国统计城市数据分析编辑：程序博客网时间：2024/04/30 22:20

文西马龙：http://blog.csdn.net/wenximalong/

在上一个博客中未完成的矩阵转置的问题：韩顺平_轻松搞定网页设计(html+css+javascript)_第28讲_js二维数组_js冒泡排序_二分查找_学习笔记_源代码图解_PPT文档整理
矩阵转置
转置后如下图所示：

demo1.html

<html><head><script language="javascript">var arr=[[2,4,6,8],[8,9,0,-1],[9,6,2,1]];//定义一个新的数组var arr2=[];//初始化，定下有多少行，先不考虑特殊情况（都是规规矩矩的矩阵，每一行的数据个数都是一致的）for(var i=0;i<arr[0].length;i++){arr2[i]=[];}//动态的添加数据//遍历旧数组for(var i=0;i<arr.length;i++){for(var j=0;j<arr[i].length;j++){//行列互换，arr2已经开辟空间了arr2[j][i]=arr[i][j];}}//成功！遍历 arr2数组就是一个转置数组for(var i=0;i<arr2.length;i++){for(var j=0;j<arr2[i].length;j++){document.writeln(arr2[i][j]+" ");}document.writeln("<br/>");}</script></head><body></body></html>

数组还有一种创建方法：javascript的内置对象Array，使用这种方式创建的数组还会有很多方法
===========
重点
javascript——面向对象
内容介绍
1.js面向（基于）对象编程—类（原型对象）与对象（实例）
2.js面向（基于）对象编程—构造方法和this

现在javascript框架大行其道
无论你是学习java，还是php或者c#都要对javascript要有深入的了解，现在的网页只要有动态效果就要用到javascript，javascript是必学内容，学习javascript的面向对象编程。

学习目标：
1.初步掌握js中的类（原形对象）和对象
2.什么是成员变量和成员方法
3.掌握构造方法的使用

js面向对象特征介绍
javascript是一种面向（基于）对象的动态脚本语言，是一种基于对象（Object）和事件驱动（EventDriven）并具有安全性能的脚本语言。他具有面向对象语言所特有的各种特性，比如封装、继承及多态等。但对于大多数人说，我们只把javascript作为一个函数式语言，只把他用于一些简单的前端数据输入验证及实现一些简单的页面动态效果等，我们没能完全把握动态语言的各种特性。在很多优秀的Ajax框架中，比如EXtJs、JQuery等，大量使用了javascript的面向对象特性，要使用好ext技术，javascript的高级特性，面向对象语言特性是我们必须完全把握的。
封装：比较简单，javascript只有私有和公有这两个封装方式
继承：不是通过关键字extends，而是通过对象冒充的方式来达到继承的效果
多态：javascript是天生的多态，它本身就无态，无态就是多态的一种体现，无招胜有招。

在学习本章前，我们有必要给大家明确几个概念，这样大家在后续学习中才不会犯晕：
①javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。
特别说明：基于对象也好，面向对象也好实际上都是一对象的概念来编写程序，从本质上并无区别，所以这两个概念在我们的课程中是一样的。
②因为javascript中没有class（类），所以有人把类也称为原型对象，因为这两个概念从在编程中发挥的作用看都是一个意思，为了统一叫法，我们这里就统一叫类。

澄清概念
js中基于对象 == js 面向对象
js 中没有类class，但是它取了一个新的名字叫原型对象，因此类==原型对象

js面向（基于）对象编程——类（原型匹配）与对象
为什么需要面向对象
引出一个问题：
张老头养了两只猫猫：一只名字叫小白，今年3岁，白色。还有一只叫小花，今年10岁，花色。请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄颜色。如果用户输入的小猫名字错误，则显示张老头没有这只猫猫。
猫有三个属性：名字，年龄，颜色
在没有学习面向对象之前，定义变量，用传统的方法去解决。
demo2.html

<html><head><script language="javascript">var cat1_name="小白";var cat1_age=3;var cat1_color="白色";var cat1_name="小花";var cat1_age=10;var cat1_color="花色";//每个猫都有很多的属性，然后如果有100只猫呢，管理起来不是很方便了。//既然不管哪一只猫都有这样的属性，为何不把共同的属性整理起来呢，做一个新的数据结构或数据类型</script></head><body></body></html>

解决传统方法中会遇到的问题，用新方法更容易解决问题，比对了传统方法，才能体会到新方法的好处。
★注意看注释中的内容。★
demo3.html

<html><head><script language="javascript">//解决方法，把猫的属性集中起来，创建一种新的数据类型（原型对象/类）//用面向对象的方法来解决问题//没有class，怎么定义原型对象或者类呢，用function//这里就是定义一个Cat类。是一个类还是函数，主要看你怎么去用它function Cat(){}//如果你这样用，很神奇，主要看你怎样用// Cat();//就是函数// var cat1=new Cat();//这就是类//这时Cat1就是一个对象（实例）//属性怎么给，javascript比较松散，可以动态的添加属性var cat1=new Cat();cat1.name="小白";cat1.age=3;cat1.color="白色";//从上面的代码我们可以看出//1.js中的对象的属性可以动态的添加//2.属性没有限制window.alert(cat1.name); //打印输出小白//没有定义的会报undefinedwindow.alert(cat1.hobby);</script></head><body></body></html>

js面向（基于）对象
计算机语言的发展是向接近人的思维方式演变的，这是一个大趋势。js引入的面向对象的思想。js不是纯面向对象的，我们可以认为它是基于面向对象的。

汇编语言 [面向机器]
c语言 [面向过程]
java语言 [面向对象]
js [支持面向对象]

1.创建一个对象实例
2.实例化一个对象
3.把对象实例化
以上三种说法是同一个意思，不要迷糊

类（原型对象）和对象（实例）的区别和联系
通过上面的案例和讲解我们可以看出：
①类（原型对象）是抽象的，概念的，代表一类事物，比如人，猫...
②对象是具体的，实际的，代表一个具体事物
③类（原型对象）是对象实例的模版，对象实例是类的一个个体

类（原型对象）—如何自定义类（原型对象）和对象
1.工厂方法—使用new Object创建对象并添加相关属性
2.使用构造函数来定义类（原型对象）
3.使用prototype
4.构造函数及原型混合方式
5.动态原型方式

目前先讲2.使用构造函数来定义类（原型对象）
基本语法：
function 类名/原型对象名()
创建对象：
var 对象名=new 类名();

前面我们讲的类（原型对象）是非常粗略的，要透彻的掌握它，我们必须要了解原型对象的构成，为了让大家学的轻松一点，我们给大家看一个图：

对象的属性
对象的属性，一般是基本数据类型（数，字符串），也可是另外的对象。比如我们前面创建猫的对象的age就是猫对象的属性。

★对象—特别说明
★★1.在js中一切都是对象★★

function Person(){}var a=new Person();window.alert(a.constructor);//a对象实例的构造函数window.alert(typeof a);//a的类型是什么var b="1234";window.alert(b.constructor);//b对象实例的构造函数window.alert(typeof b);//b的类型是什么包括Person都是对象window.alert(Person.constructor);//Person的构造函数//再次说明了js中一切都是对象思考：如何判断一个对象实例是不是Person类型？if(a instanceof Person){ //如果啊这个实例就是Person这种类型，就会返回一个真，否则返回假window.alert("a是person");}或者if(a.constructor==Person){//a对象实例的构造函数就是Personwindow.alert("a是Person");}

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录

韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理

韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理