- 浏览: 175877 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
mncc:
太好了!!!Mark一下!不过貌似那个冒泡的还少个右下角吧? ...
Google Maps 图标地址收藏 -
ivorytower:
去年5月捡了命回来,现在不评论那些豆腐渣工程……
汶川地震留给我们什么?单单建什么地震纪念馆是没有用的 -
lgx2351:
wtusmchen 写道blog写的不错啊,以后多过来学习:) ...
js学习笔记2-函数 -
wtusmchen:
blog写的不错啊,以后多过来学习:)
js学习笔记2-函数
3. 构造函数、类和原型
总述:
对象是我们很熟悉的,常在程序中用它。那么,如何来区分一个对象与另一个对象的区别呢?类就做到了这点,对象是类的一个实例。
Js中的类与java的类不太一样,但是它构造函数和原型来来支持类。
3.1构造函数
我们在程序里使用对象时常常先new一个object,然后再给这个object赋属性,然后再使用这个object来实现我们想要的功能。很经常的,new一个无参数的object,我们这样写:
var o = {};
其实它的实现与下面的代码是一样的:
var o = new object();
在后面的写法中,new 后面的object()就是一个构造函数,就像在程序里我们常常自定义构造函数,设置它的prototype,再new一样。那么什么是构造函数呢?
构造函数是设计来和new一起使用的函数。new后,就把新的对象作为this关键字的值来传递了。
构造函数的作用是什么呢?它是初始化一个新创建的对象,设置在使用这个对象之前的所有属性。
可以定义自己的构造函数(常用),只需要编写一个为this添加属性的函数就可以了。如下的例子:
function Rectangle(w,h){ this.w = w; this.h = h; } var rec1 = new Rectangle(1,1);//var rec1 = {w:1,h:1} var rec1 = new Rectangle(2,2);//var rec2 = {w:2,h:2}
以上代码注意:
1、 注释里的效果也是一样的。那么我们为什么还要定义构造函数呢?构造函数方便你new多个对象,而注释里的写法是只需要使用一次这样的对象。
2、 从上面的代码可以看出:通过定义一个函数(构造函数),其实就定义了对象的一个类。
3、 上述类new的对象,都保证了初始化了w和h的值。根据传入构造函数的w和h的数值的不同,可以得到不同w和h值的对象,但这些对象都有相同的属性(如计算面积的方法都相同等)。
3.2原型与继承
在上面代码的例子中,我们如果要计算rec1这个对象的面积,需要这样做:
rec1.area = function(){ return this.w * this.h } var a = rec1.area();
在上面这种情况下,如果rec2也要得到它的面积,也要定义一个它自己的area函数值。其实,所有的rectangle对象的计算面积的方法是一样的,我们可以把这个方法写在构造函数里。如下:
function Rectangle(w,h){ this.w = w; this.h = h; this.area = function(){this.w*this.h} }
这时候用这个新的构造函数后new的对象就可以直接用rec1.area()来得到它的面积了。
但是这里引出了一个问题,什么问题呢?
如果用上面的构造函数的放,每new一个矩行对象,都会初始化三个属性,这三个属性中除了w和h是每个对象不同的,area属性却是每个对象都指向同一个函数functiion。
这就引出了原型。可以把area方法放在这个类的原型对象里。
1、原型对象的任何属性,都表现为以它为原型的对象的属性。这句话比较难理解,好好理解一下,其实它说的是js中的对象都从它的原型里继承属性。
2、当我们new一个对象时,其实在内部也设置了这个对象的原型,这个对象的原型就是它的构造函数的prototype的值。
3、所有的函数都有一个prototype属性。也就是你定义一个函数后,prototype就被自动创建和初始化了。
4、增加给原型的任何属性,都会成为被构造函数初始化的对象的属性。
如上面的例子中,我们可以这样写:
function Rectangle(w,h){ this.w = w; this.h = h; } Rectangle.prototype={ area:function(){ return this.w * this.h } }
上面的代码中,w和h在每个对象实例中都不同;把area属性放在原型里说明了:原型对象与构造函数相关,并且用构造函数new出来的每个实例对象都从原型那里继承了一份相同的一组属性。
这也说明了,原型对象是放置方法和其它不变属性的理想的地方。
原型的概念也就引出了继承这个概念。
使用原型有两个好处:
1、 使用原型可以减少每new一个对象所占有的内存,因为new的不同的对象可以同时继承原型的不同的属性。
2、 即使是对象创建之后才增加到原型中的方法,对象也继承它。这就说明:可以为已有的类添加新的方法。
第二点常用,比如某个类是别人写好的,或是内建的,你需要扩展它,就可以增加一个这个类的prototype的属性。(但是对于内建类,最好不要这么做,因为你扩展了,所有的这个类的实例都会因此而多个属性)
3.3 继承的属性的读和写
我们知道:每个类都有原型对象,原型对象带有一组属性,这组属性可以被这个类的所有多个实例所继承。所以,在读一个类的属性和写一个类的属性时,需要执行一种不对称。也就是当读一个o的p属性时,会先到o中看是否有p的属性,如果没有,则到原型中去看。但当写一个o的p属性值时,并不用原型。为什么呢?因为如果用原型的话,会改变整个类对象的p的值。
因此,属性继承只在读取属性值时发生,而在写入属性值时不发生。因此,如果我们设置了o的p的值,而当这个p是从原型那里继承来的时,其实o会直接在自身创建出一个p属性。这样,当读取p属性值时,就不需要到原型中去找,只需要读取出自身的p属性的值就好了。这就好像o的属性p“遮盖”或“隐藏”了原型对象中的属性p。例子如下:
function Circle(x,y,r){ this.x = x; this.y = y; this.r = r; } Circle.prototype={ pi :3.1415926, area:funciton(){ return this.pi*this.r*this.r } } var c1 = new Circle(1,1,1); var c2 = new Circle(2,2,2); // c1.area();//area并不在c1中,从原型中去找,就好像这是c1自身的属性一样。这种写法我们在程序中很常用。 c1.pi = 4;//设置pi的值,pi在原型中,并不在c1自身的属性中,它把作为c1的一个自身的新属性来创建。改变原型的属性值,这种情况比较少,我们一般去读取它。 var a= c1.pi*c1.r*c1.r//这时候,pi和r都在c1自身内有。 var a= c2.pi*c2.r*c2.r//这时候,pi在c2的原型里去读,r都在c2自身读取。 因为原形属性是一个类的所有对象共享的属性,所以原型成为定义方法的理想场所。
3.4 Js中模拟类:
我们知道,对象是包含各种具有名字的数据片断的数据结构,也可以包含对这些数据片断进行操作的方法。对象把相关的值和方法组织到一起,这样增强了代码了模块性和可复用性,使得编程更加容易。
Js中的对象可以有任意多的属性,且属性可以动态地添加,但java的对象就不是这样,java中的每一个对象都有组预定义的属性,这些属性并不能动态地添加的。
在java的类中,确切地指定了字段,及方法的同时,会有一个类方法名,但是js不会有一个正式的类名,它只是通过构造函数和原型来模拟类。
Js和java的类都可以有多个对象,一个对象就是类的一个实例。
一个java类的类成员有实例属性、实例方法、类属性、类方法。下面分别来说明:
实例属性:
每个对象都拥有它的实例属性的一份拷贝,实例属性都是通过对象来访问。如:
r1.w
在Retangle类中,每个Retangle对象都有一个w属性指定了它的宽度。
默认情况下,js的任何对象属性都是一个实例属性。然而为了真实地模拟面象对象的类,我们说实例属性是由构造函数创建和初始化的属性。
实例方法:
实例方法在特定的对象上被调用。如:
r1.eara()
实例方法里通过this来引用调用它的对象。我们千万不要理解成实例方法是每个对象都有一份自己的私有拷贝,实例属性是每个对象都有有一份自己的私有拷贝,但实例方法却相反,这是每个对象所共享的。我们一般把实例方法放在构造函数的原型上来定义,通过这种方式,这样,通过这个构造函数实例化的对象都共享和继承了这个方法。
类属性:
类属性是与一个类自身相关的属性,而不是和这个类的每个实例相关的属性。类属性通过自身来调用。
不管创建了多少份这个类的实例,类属性只有一份。类属性本质上是全局的。
在js里,我们通过定义构造函数的自身的一个属性来定义类属性。
类方法:
类方法是与一个类自身相关,而不是与类的实例相关的方法。类方法通过自身来调用。
要定义一个类方法,只需要把这个相应的函数定义成为构造函数的一个属性就可以了。
类方法的this并不指向类的任何具体的实例,而是引用构造函数自身。
代码例子如下:
functinn Circle(x,y,r){ //这里的x,y,r都是实例属性 this.x = x; this.y = y; this.r = r; } //这里的pi是类属性 Circle.pi = 3.1415 Circle.prototype={ //area()方法是实例方法 area:function(){ return Circle.pi * this.r*this.r } } //max()方法是个类方法,传入a和b两个类实例进行比较,并征对某个具体的实例 Circle.max = function(a,b){ if(a.r>b.r) return a; else return b; }
发表评论
-
在一个定时器里频繁发ajax请求
2011-04-11 10:07 1771在一个定时器里频繁发ajax请求,最好设置一个全局变量,当请求 ... -
前台开发总结
2011-01-12 10:35 8081、如果在频繁地发送ajax请求,最好在前面的请求发送完成返回 ... -
TD中长串英文字母不能自动换行而汉字却可以自动换行
2010-12-23 10:06 1961例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaa ... -
Google Maps 图标地址收藏
2010-11-27 10:46 2874Google Maps 图标 - ... -
js乱码
2010-05-30 16:08 01)在同一个工程下没有问题,可是如果跨工程的话,且引入的js有 ... -
ajax请求提供接口的讨论
2009-12-26 15:33 1069要提供一个查询某点周边的最近设施的功能给同事,在gis端的实现 ... -
ie8与ie6取form的讨论
2009-12-16 10:49 1405多frames下,在ie6下通过frames[i]为取得某个f ... -
把一个jsp分为两个div布局记录
2009-12-15 16:41 5629一个jsp页面想分成左右两块分开显示两块内容。这种效果很不错, ... -
js取整数四舍五入
2009-11-21 22:08 3447http://blog.csdn.net/Feiin/arch ... -
读“javascript权威指南”笔记(更新中。。。)
2009-11-14 13:00 0第一章: 第二章: 第三章: 第四章: 第五章: 第 ... -
grid拖动列头改变列宽
2009-10-21 17:19 1600grid中,当某一单元格的内容很多时,要能够拖动grid标题行 ... -
js常用功能-drag功能总结
2009-09-18 13:50 1237在做web开发中,拖动一个元素是很常见的功能,特别是对于浮动层 ... -
常用功能-tip相关知识总结
2009-09-18 08:48 1277在应用开中很常用的功能是tip,比如鼠标放在某个需要说明的元素 ... -
js学习笔记4-事件和事件处理
2009-09-16 22:18 10331. 总述: 本章将讲三种完全不同的不兼容的事件处理模型 ... -
构造结果集实现类似grid显示
2009-09-16 20:24 913在做应用开发中,最经常的操作是到后台数据库去获取数据,在前台用 ... -
grid里用右键来实现功能菜单
2009-09-15 20:22 1275在自定义grid中,如果一个grid的列很多,窗口无法显示这么 ... -
gird分页时form与url参数的探讨
2009-09-05 22:35 1173大家可能很常用一个查 ... -
js学习笔记2-函数
2009-09-02 23:01 14372. 函数 2.1函数直接量函数直接量是用作表达式,而不是用作 ... -
下拉提示文本框
2009-08-24 18:46 1739文本框在当用户输入时,常常需要把相近的信息提示给用户,以方便用 ... -
js学习笔记1-对象和数组
2009-08-19 23:03 8891. 对象和数组 总述对象 ...
相关推荐
这篇学习笔记将带你探索JavaScript的核心概念,包括变量、数据类型、控制流、函数、对象和类等,这些都是构建复杂应用程序的基础。 首先,我们要了解JavaScript的基础语法。在JavaScript中,变量是存储数据的容器,...
在本节中,我们将深入探讨JavaScript的高级程序设计,特别是关注"第四章(js高级程序设计学习笔记)----2"的主题。这一章很可能涵盖了JavaScript的核心概念,包括原型链(Prototype Chaining)。通过阅读名为...
本学习笔记旨在帮助初学者快速掌握JavaScript的核心概念和技术,实现从入门到精通的过渡。 1. **基础语法** - 变量声明:JavaScript支持var、let和const关键字声明变量,理解它们的作用域和提升特性至关重要。 - ...
本学习笔记将深入探讨JavaScript的核心概念,包括变量、数据类型、操作符、控制流程、函数、对象、数组、原型链、闭包等,并结合实际示例,如my.js、order.js、login.js等文件,来讲解其在实际项目中的应用。...
这篇学习笔记主要涵盖了JavaScript的基础语法和客户端JavaScript的相关知识。 1. **JavaScript基本语法**: - **变量声明**:未声明的变量尝试读取时会产生错误,而写入未声明的变量会创建一个全局变量。 - **...
JavaScript是一种广泛应用...以上就是JavaScript学习笔记中的主要知识点,理解和掌握这些内容对于深入学习JavaScript至关重要。在实际编程中,还需要结合具体的场景灵活运用,并不断实践和探索更高级的特性和最佳实践。
Javascript 中的构造函数与其他语言相比也是不同的。任何通过关键字 new 调用的函数都可以当做构造函数。 在构造函数体内,this 指向新创建的对象。如果构造函数体内没有显示的 return 表达式,那么我们就默认返回 ...
- **构造函数与原型混合方式**:同时利用构造函数和原型链进行对象创建。 - **动态原型方式**:在对象实例化后设置`prototype`。 4. **构造函数与实例**: - 构造函数用于初始化新创建的对象,例如`Person`构造...
这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...
总结一下,JavaScript面向对象编程主要包括类的表示(通过构造函数)、对象的创建(对象工厂、构造函数、原型模式)以及继承的实现(原型链)。理解这些概念对于深入学习JavaScript和开发复杂的JavaScript应用至关...
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源,旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性,旨在构建一个...
### JavaScript基础教程笔记知识点 #### 一、JavaScript简介 - **定义**:JavaScript是一种轻量级的编程语言,主要用于Web浏览器中的网页交互控制。 - **发展历史**:1995年由Netscape公司的Brendan Eich设计并...
这份“JS学习笔记doc.rar”压缩包包含了一份详细的学习资料,旨在帮助初学者快速理解和掌握JavaScript的核心概念与实践技巧。 1. **基础语法**:JavaScript的基础包括变量声明(var、let、const)、数据类型(如...
### JavaScript学习笔记知识点详解 #### 第一章:CSS样式表 **1.1 什么是CSS** CSS(Cascading Style Sheets)即层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。它用于定义网页上的布局、颜色、...
本学习笔记将聚焦于与ES5的区别,帮助初学者快速掌握ES6的核心概念。** 1. **变量声明:let和const** - `let`替代了`var`进行块级作用域的变量声明,解决了`var`的变量提升和函数作用域问题。 - `const`用于声明...
根据提供的文件信息,可以看出这份“我的javascript学习笔记”主要涵盖了JavaScript中的几个关键概念和技术要点,包括正则表达式、AJAX以及一些JavaScript的核心语言特性。接下来将这些知识点进行详细的整理和解释。...
JavaScript,简称为JS,是一种广泛...以上只是JavaScript学习笔记的一部分,实际内容可能包括更多细节和实践案例。通过深入学习这些知识点,你可以逐步提升自己的JavaScript技能,为网页和网络应用开发打下坚实的基础。
本文实例讲述了JS学习笔记之原型链和利用原型实现继承。分享给大家供大家参考,具体如下: 原型链 原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的 实例对象中有__proto__,是...
9. **面向对象编程**:JS支持基于原型的面向对象,包括构造函数、原型链、继承等概念。 10. **JavaScript框架和库**:如jQuery简化了DOM操作,React、Vue、Angular等现代框架则帮助构建大型单页应用。 这些笔记...