不错的JavaScript面向对象的简单入门介绍
- 博客分类:
- javascript
1) 如何创建对象:
1. 使用constructor,例如:
var obj = new Object() // var 可以省略
var obj = new Date()
2. 使用对象字面值(object literals),例如:
程序代码
var obj = "123" // 创建一个String对象
var obj = /^abc$/ //创建一个RegExp对象
更加复杂的情况是,我们可以直接生成一个自定义的只有属性的对象:
程序代码
var obj = {
name:"killercat",
home:"www.i170.com/user/killercat"
}
document.write(obj.name+"<br />")
document.write(obj.home)
结果:
killercat
www.i170.com/user/killercat
2) JavaScript中的属性:
str = "www.i170.com/user/killercat" // str 一个字符串对象的引用
document.write(str.length)
通过对象的引用加上"."再加上属性名,可以访问到这个属性,也可以修改这个属性,甚至是添加一个属性,比如:
var obj = new Object()
obj.name = "killercat" // 为对象直接添加一个属性
document.write(obj.name) // 访问对象的属性
obj.name = "kcat" // 修改对象的属性
document.write(obj.name)
枚举属性值:
使用 for ... in 语句可以枚举属性(具体来说就是枚举属性名),前面已经提到过,比如
for(ele in window){
document.write(ele+"<br />")
}
如何得到属性值?
obj = new Object()
obj.p1 = "a"
obj.p2 = "b"
obj.p3 = "c"
for(ele in obj)
document.write(obj.ele) // 这是新手可能犯的错误,obj.ele 的值是undefined
应该这样访问属性值:
document.write(eval("obj."+ele))
未定义的属性:
obj = new Object()
document.write(obj.name)
结果是:undefined
删除属性:
obj = new Object()
obj.name = "killercat"
delete obj.name
document.write(obj.name)
结果是:undefined
理解属性:
我们知道在Java,c++中,属性要么属于某个类(类属性或说是静态属性),要么属于对象,也就是说,同一个类的对象,一定有一样的属性,但是JavaScript不一样,同样是Object的对象,却可以有不同的属性。除了这类的属性,JavaScript中还有静态的属性(变量)。
3) Constructor
源于某些未知原因,有些人似乎不愿意在JavaScript提到classes这个词,取代的是"对象的类型(object types)",甚至有些人直接叫函数,于是可以看见这样的说法:“我们通过预先定义好的函数,产生了一个对象”。本文使用类,这个名词。
JavaScript 定义方法的方式和定义类的方式一模一样:
function User(name,sex){ // 定义了类 User
this.name = name;
this.sex = sex;
}
user = new User("kc","man")
document.write(user.name+"<br />"+user.sex)
contructor的作用就是在初始化属性(变量)
4) 方法
以下例子引用于<<__JavaScript: The Definitive Guide>>
function Rectangle_area( ) { return this.width * this.height; }
function Rectangle_perimeter( ) { return 2*this.width + 2*this.height; }
function Rectangle_set_size(w,h) { this.width = w; this.height = h; }
function Rectangle_enlarge( ) { this.width *= 2; this.height *= 2; }
function Rectangle_shrink( ) { this.width /= 2; this.height /= 2; }
function Rectangle(w, h)
{
this.width = w;
this.height = h;
this.area = Rectangle_area;
this.perimeter = Rectangle_perimeter;
this.set_size = Rectangle_set_size;
this.enlarge = Rectangle_enlarge;
this.shrink = Rectangle_shrink;
}
这种风格可能和Java,c++很不同。方法中的this表示调用它的对象的引用。
5) prototype
prototype是一个对象,每个类都包含一个prototype对象(注意,每个类一个,而不是每个对象一个)。
看看下面的例子:
function User(name)
{
this.name = name
}
User.prototype.name = "killercat" // 类名.prototype.属性(或方法)
user = new User("who"+"<br />")
document.write(user.name)
delete user.name
document.write(user.name)
再看一个例子:
function User(name)
{
}
User.prototype.name = "human"
user1 = new User()
user2 = new User()
document.write(user1.name+"<br />")
document.write(user2.name)
结果:
human
human
说明了,每个类一个prototype对象,而不是每个对象单独一个。
obj.x 这条语句的查找顺序是,先在obj中找x属性,假如没有,再进入obj对应的类中找prototype.x,对于方法来说,也一样。因此,不要出现这样的语句: user.prototype.name = "xxx" 必须是 user.name = "xxx" (prototype对象属于一个类,而不是一个对象)
类名.prototype.属性 // 相当于一个实例变量(属性),对方法也一样
类名.属性 // 相当于一个静态变量(属性),对方法也一样,调用的时候必须使用"类名.属性",不能使用"类对象.属性",因为它属于一个类,而不是一个对象。
例如:
function User(name)
{
this.name = name
}
User.type = "human"
user = new User("kc")
document.write(User.type + "<br />")
document.write(user.type)
结果:
human
undefined
另外,每个prototype都有一个constructor属性,默认用于保存constructor的定义,例如上面的user对象,调用:
user.constructor得到:
function User(name) { this.name = name; }
我们可以通过typeof,知道参数的类型,假如是对象,就返回"object",假如是方法就返回"function"
6) 利用prototype实现类间的继承,例如:
// 父类
function Circle(r){
this.r = r;
}
Circle.PI = 3.14;
Circle.prototype.getArea = function (){
return Circle.PI * this.r * this.r;
};
Circle.prototype.toString = function (){
if(( typeof this == "object") && (this.constructor == Circle)){
return "circle with a radius " + this.r ;
}
else{
return "unknown object";
}
};
Circle.max = function (c1,c2){
return c1.r >= c2.r ? c1 : c2;
};
// 子类
function ColorCircle(r,color){
this.r = r;
this.color = color;
}
ColorCircle.prototype = new Circle(0); // 保存父类的对象
ColorCircle.prototype.constructor = ColorCircle; // 为constructor 改名字
ColorCircle.prototype.toString = function(){
if(( typeof this == "object") && (this.constructor == ColorCircle)){
return this.color+" circle with a radius " + this.r ;
}
else{
return "unknown object";
}
}
ColorCircle.prototype.getColor = function(){
return this.color;
}
ColorCircle.prototype.setColor = function(color){
this.color = color;
}
也就是,使用prototype保存父类的对象,在构造子类的时候,父类对象同时被构造(因为prototype被构造)。也就是JavaScript继承其实就是让子类的prototype对象保存父类的对象。
发表评论
-
javascript中的this到底指什么?
2011-09-19 18:35 677JavaScript:this 是什么? 定义:this ... -
Javascript静态类数组与框架基本实现
2011-09-19 18:23 602先来讲讲静态类数组( ... -
JavaScript 常见对象类创建代码与优缺点分析
2011-09-19 17:32 681在Javascript中构建一个类有好几种方法: 1.Fa ... -
javascript实现面向对象类的功能书写技巧
2011-09-19 17:02 647学过java,c#,vb的都知道类的概念,而类具有继承、封装、 ... -
javascript来定义类的规范小结
2011-09-19 16:45 595javascript来定义类的规范小结使用javascript ... -
详解new function(){}和function(){}() 区别分析
2011-09-19 16:37 646情景一: var yx01 = new function() ... -
JS 面向对象的5钟写法
2011-09-19 16:23 616Java代码 复制代码 代码如下: //第1种写法 ... -
JavaScript 三种创建对象的方法
2011-09-19 15:32 589JavaScript中对象的创建有以下几种方式: (1)使 ... -
Javascript面向对象编程(三) 非构造函数的继承
2011-09-19 15:28 507这个系列的第一部分介绍了"封装",第二部分 ... -
Javascript面向对象编程(二) 构造函数的继承
2011-09-19 15:27 735这个系列的第一部分,主要介绍了如何"封装" ... -
JavaScript定义类或函数的几种方式小结
2011-09-19 10:14 553js中不论是定义类或者 ... -
Js构造函数&工厂函数
2011-09-19 09:58 1031//1,工厂函数&构造函数 //例1。 / ... -
js 实例化对像的各种写法
2011-09-19 09:48 1319/* 各种方式new实例化对象的测试比较 */ ... -
JS的构造函数
2011-09-19 09:05 8651 //构造函数 2 //使自 ... -
评论这张
2011-09-08 18:00 576JavaScript兼容性一直是Web ... -
javascript浏览器兼容的实现
2011-09-08 17:54 334javascript部分 1. document.form. ...
相关推荐
主要介绍了javascript面向对象快速入门实例,以一个简单实例分析了javascript面向对象的中对象的定义与使用技巧,需要的朋友可以参考下
JavaScript面向对象主要简单介绍,初级入门级别。
JavaScript是一门OOP,而有些人说,JavaScript是基于对象的。
这样,我们就得到了一个最简单的对象。 JavaScript字符串对象 对象的属性 其实我们之前在HTML DOM中已经就是在使用对象了。例如,我们知道,DOM节点有一些信息、例如nodeName、nodeType等,其实这些信息就是节点对象
PPT格式工,需要office2007才能打开,或者使用office2003兼容2007包,本课程分了两段,第一部分是javascript入门基础和中级教程,后面是高级,讲到了javascript的作用域链和原型链,以及javascript面向对象的继承...
封装 :javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装 ,所以首先我们先来简单介绍一下闭包,看下面这个例子: 代码如下:[removed] function myInfo(){ var name =”老鱼”,age =27;...
javascript是个入门门槛很低的语言,甚至一个从来没有接触过javascript的技术人员,几小时内就可以写出一个简单有用的程序代码。 但是如果因此你就下结论:javascript是门简单的语言。那你就大错特错了。想写出高...
简单但清晰 集中更好JavaScript 将JavaScript保留为JavaScript 特征 对象包装jQuery中的相似$(),但支持包装任何对象 模块Ruby模块启发 类和继承带上onExtend()和onInitialize()钩子等等 界面用于文档隐式...
11) JavaScript中面向对象的特性: a) 实例属性:在构造函数创建或初始化的属性。 b) 实例方法:在构造函数中把原型对象中的一个属性设为函数来实现。 c) 类属性:构造函数本身的属性。 d) 类方法:用合适的函数作为...
Chic Event是JavaScript的简单的面向对象的事件系统。 它建立在之上。 ! 注意:该项目不再被维护。 如果您有兴趣接管此仓库的维护,请与我联系。 当前版本: 0.0.1 自动构建状态: 节点支持: 0.6、0.8 浏览器...
挺不错滴一本书,无论是初学者还是开发人员都用得...第5章和第6章将介绍两个主要的抽象方式:函数式编程和面向对象编程。第7章给出了一些如何组织程序的指导。 提示:本PDF中仅有前3张内容,以供新手入门以及试读之用。
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]JavaScript面向对象的两种书写方法以及差别//www.jb51.net/article/13211.htmJavaScript 面向对象入门精简篇//www.jb51.net/article/17541.htm
7.5 JavaScript的内置对象 7.5.1 Math对象 7.5.2 Date对象--创建一个简单的日历 7.5.3 Error对象 7.5.4 其他内置对象 7.5.5 特殊的对象--全局对象与调用对象 7.6 总结 第8章 集合 ...
Python由荷兰数学和计算机科学研究学会的吉多·范罗苏姆于1990年代初设计,Python提供了高效的高级数据结构,还能简单有效地面向对象编程。Python语法和动态类型,以及解释型语言的本质,使它成为多数平台上写脚本和...
本身没有太难的东西,这个案例将js面向对象用的比较好,可以作为js面向对象的入门教程。 1. 创建基本对象,实现坦克简单的移动 1.1 如何在地图中绘制画布? 考虑到浏览器兼容的问题,我们用操作dom的方式来...
最适合初学者: 至少对一门诸如Ruby、Python、PHP或者Java这样面向对象的语言有一定的经验;对JavaScript处于初学阶段,并且完全是一个Node.js的新手。 如下服务器的start()函数扩展,以便将路由函数作为参数传递...
第3章 JavaScript面向对象技术 36 第4章 Ext JS框架 58 第5章 Ext JS开发模式 86 第6章 Ext JS布局 102 第7章 表单组件 125 第8章 表格组件 148 第9章 表格组件的扩充 170 第10章 树形组件 186 第11章 窗口组件 204 ...
17:PHP面向对象开发的学习(一) 18:PHP面向对象开发的学习(二) 19:PHP面向对象开发的学习(三) 20:PHP面向对象开发的学习(四) 21:PHP面向对象开发的学习(五) 22:PHP面向对象开发的学习(六) 23:PHP...