JavaScript OOP面向对象编程技术(教程+视频)(1)

风舞烟:中国科技大学计算机专业,微软认证解决方案专家,10多年软件行业从业经验,参与过数百万的企业级ERP系统以及银行系统项目设计,在大数据处理、富客户端技术、项目管理等方面有着深刻的理解和实战经验,先后担任过国内某知名企业的CTO以及国内知名IT高端培训机构教学总监,某知名在线网站资深签约金牌讲师,主编过BF-TECH系列的 .NET、J2EE、 Android等品牌就业课程,共达2000多课时,课程总时长超10万分钟,可谓IT在线视频教育第一人,现任某知名在线网站产品研发总监,对软件系统架构、企业解决方案,前端H5移动开发及IT在线教育行业有着卓越的见解和远识。

一、JS OOP面向对象编程基础入门

第一部分、视频教程

视频播放地址:

01.跟风舞烟学JS OOP(1)_用定义函数的方式定义类

02.跟风舞烟学JS OOP(2)_使用new操作符获得类的实例

03.跟风舞烟学JS OOP(3)_动态添加修改JS对象属性和方法

04.跟风舞烟学JS OOP(4)_使用方括号引用对象的属性和方法

05.跟风舞烟学JS OOP(5)_使用大括号语法创建无类型对象

06.跟风舞烟学JS OOP(6)_prototype原型对象

全部教程涉及代码下载:

代码

第二部分、文字教程

1.1、用定义函数的方式定义类

在面向对象的思想中,最核心的概念之一就是类。一个类表示了具有相似性质的一类事物的抽象,通过实例化一个类,可以获得属于该类的一个实例,即对象。

在JavaScript中定义一个类的方法如下:

function class1(){

//类成员的定义及构造函数

}

这里class1既是一个函数也是一个类。可以将它理解为类的构造函数,负责初始化工作。

1.2、使用new操作符获得一个类的实例

在前面介绍基本对象时,已经用过new操作符,例如:new Date();

表示创建一个日期对象,而Date就是表示日期的类,只是这个类是由JavaScript内部提供的,而不是由用户定义的。

new操作符不仅对内部类有效,对用户定义的类也同样有效,对于上节定义的class1,也可以用new来获取一个实例:

function class1(){

//类成员的定义及构造函数

}

var obj1=new class1();

抛开类的概念,从代码的形式上来看,class1就是一个函数,那么是不是所有的函数都可以用new来操作呢?是的,在JavaScript中,函数和类就是一个概念,当对一个函数进行new操作时,就会返回一个对象。如果这个函数中没有初始化类成员,那就会返回一个空的对象。例如:

//定义一个hello函数

function hello(){

alert("hello");

}

//通过new一个函数获得一个对象

var obj=new hello();

alert(typeof(obj));

从运行结果看,执行了hello函数,同时obj也获得了一个对象的引用。当new一个函数时,这个函数就是所代表类的构造函数,其中的代码被看作为了初始化一个对象。用于表示类的函数也称为构造器。

1.3、使用方括号([ ])引用对象的属性和方法

在JavaScript中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法)很简单,如:

对象名.属性(方法)名

还可以用方括号的形式来引用:

对象名["属性(方法)名"]

注意,这里的方法名和属性名是一个字符串,不是原先点(?)号后面的标识符,例如:

var arr=new Array();

//为数组添加一个元素

arr["push"]("abc");

//获得数组的长度

var len=arr["length"];

//输出数组的长度

alert(len);

图6.1显示了执行的结果。

由此可见,上面的代码等价于:

var arr=new Array();

//为数组添加一个元素

arr.push("abc");

//获得数组的长度

var len=arr.length;

//输出数组的长度

alert(len);

这种引用属性(方法)的方式和数组类似,体现了JavaScript对象就是一组属性(方法)的集合这个性质。

这种用法适合不确定具体要引用哪个属性(方法)的情况,例如:一个对象用于表示用户资料,用一个字符串表示要使用的那个属性,就可以用这种方式来引用:

//定义了一个User类,包括两个成员age和sex,并指定了初始值。

function User(){

this.age=21;

this.sex="male";

}

//创建user对象

var user=new User();

//根据下拉列表框显示用户的信息

function show(slt){

if(slt.selectedIndex!=0){

alert(user[slt.value]);

}

}

//-->

在这段代码中,使用一个下拉列表框让用户选择查看哪个信息,每个选项的value就表示用户对象的属性名称。这时如果不采用方括号的形式,可使用如下代码来实现:

function show(slt){

if(slt.selectedIndex!=0){

if(slt.value=="age")alert(user.age);

if(slt.value=="sex")alert(user.sex);

}

}

而使用方括号语法,则只需写为:

alert(user[slt.value]);

方括号语法像一种参数语法,可用一个变量来表示引用对象的哪个属性。如果不采用这种方法,又不想用条件判断,可以使用eval函数:

alert(eval("user."+slt.value));

这里利用eval函数的性质,执行了一段动态生成的代码,并返回了结果。

实际上,在前面讲述document的集合对象时,就有类似方括号的用法,比如引用页面中一个名为“theForm”的表单对象,以前的用法是:

document.forms["theForm"];

也可以改写为:

document.forms.theForm;

forms对象是一个内部对象,和自定义对象不同的是,它还可以用索引来引用其中的一个属性。

1.4、动态添加、修改、删除对象的属性和方法

上一节介绍了如何引用一个对象的属性和方法,现在介绍如何为一个对象添加、修改或者删除属性和方法。其他语言中,对象一旦生成,就不可更改,要为一个对象添加、修改成员必须要在对应的类中修改,并重新实例化,程序也必须重新编译。JavaScript提供了灵活的机制来修改对象的行为,可以动态添加、修改、删除属性和方法。例如:先用类Object来创建一个空对象user:

var user=new Object();

1.添加属性

这时user对象没有任何属性和方法,可以为它动态的添加属性,例如:

user.name="jack";

user.age=21;

user.sex="male";

通过上述语句,user对象具有了三个属性:name、age和sex。下面输出这三个语句:

alert(user.name);

alert(user.age);

alert(user.sex);

由代码运行效果可知,三个属性已经完全属于user对象了。

2.添加方法

添加方法的过程和添加属性类似:

user.alert=function(){

alert("my name is:"+this.name);

}

这就为user对象添加了一个方法“alert”,通过执行它,弹出一个对话框显示自己的名字:

user.alert();

图6.2显示了执行的结果。

3.修改属性和方法

修改一个属性和方法的过程就是用新的属性替换旧的属性,例如:

user.name="tom";

user.alert=function(){

alert("hello,"+this.name);

}

这样就修改了user对象name属性的值和alert方法,它从显示“my name is”对话框变为了显示“hello”对话框。

4.删除属性和方法

删除一个属性和方法的过程也很简单,就是将其置为undefined:

user.name=undefined;

user.alert=undefined;

这样就删除了name属性和alert方法。

在添加、修改或者删除属性时,和引用属性相同,也可以采用方括号([])语法:

user["name"]="tom";

使用这种方式还有一个特点,可以使用非标识符字符串作为属性名称,例如标识符中不允许以数字开头或者出现空格,但在方括号([])语法中却可以使用:

user["my name"]="tom";

需要注意,在使用这种非标识符作为名称的属性时,仍然要用方括号语法来引用:

alert(user["my name"]);

而不能写为:

alert(user.my name);

事实上,JavaScript中的每个对象都是动态可变的,这给编程带来了灵活性,也和其他语言产生了区别。

1.5、使用大括号({ })语法创建无类型对象

传统的面向对象语言中,每个对象都会对应到一个类。上一节讲this指针时提到,JavaScript中的对象其实就是属性(方法)的一个集合,并没有严格意义上类的概念。所以它提供了一种简单的方式来创建对象,即大括号({})语法:

{

property1:statement,

property2:statement2,

…,

propertyN:statmentN

}

通过大括号括住多个属性或方法及其定义(这些属性或方法用逗号隔开),来实现对象的定义,这段代码就直接定义个了具有n个属性或方法的对象,其中属性名和其定义之间用冒号(:)隔开。例如:

var obj={};//定义了一个空对象

var user={

name:"jack",//定义了name属性,初始化为jack

favoriteColor:["red","green","black","white"],//定义了颜色喜好数组

hello:function(){//定义了方法hello

alert("hello,"+this.name);

},

sex:"male"//定义了性别属性sex,初始化为male

}

//调用user对象的方法hello

user.hello();

//-->

第一行定义了一个无类型对象obj,它等价于:

var obj=new Object();

接着定义了一个对象user及其属性和方法。注意,除了最后一个属性(方法)定义,其他的必须以逗号(,)结尾。其实,使用动态增减属性的方法也可以定义一个完全相同的user对象,读者可使用前面介绍的方法实现。

使用这种方式来定义对象,还可以使用字符串作为属性(方法)名,例如:

var obj={"001":"abc"}

这就给对象obj定义了一个属性“001”,这并不是一个有效的标识符,所以要引用这个属性必须使用方括号语法:

obj["001"];

由此可见,无类型对象提供了一种创建对象的简便方式,它以紧凑和清晰的语法将一个对象体现为一个完整的实体。而且也有利于减少代码的体积,这对JavaScript代码来说尤其重要,减少体积意味着提高了访问速度。

1.6、prototype原型对象

prototype对象是实现面向对象的一个重要机制。每个函数(function)其实也是一个对象,它们对应的类是“Function”,但它们身份特殊,每个函数对象都具有一个子对象prototype。即prototype表示了该函数的原型,而函数也是类,prototype就是表示了一个类的成员的集合。当通过new来获取一个类的对象时,prototype对象的成员都会成为实例化对象的成员。

既然prototype是一个对象,可以使用前面两节介绍的方法对其进行动态的修改,这里先给出一个简单的例子:

//定义了一个空类

function class1(){

//empty

}

//对类的prototype对象进行修改,增加方法method

class1.prototype.method=function(){

alert("it's a test method");

}

//创建类class1的实例

var obj1=new class1();

//调用obj1的方法method

obj1.method();

图6.3显示了执行的结果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,095评论 0 3
  • 大家好,我是IT修真院深圳分院第01期学员,一枚正直纯洁善良的web程序员。 今天给大家分享一下,修真院官网JS(...
    老菜菜阅读 1,270评论 0 2
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,211评论 0 4
  • 最初报名研究生班管理义工时曾填过三个个人目标,开课前签军令状时,我把目标汇总为:通过七天咖啡冥想研究生班学习、实践...
    Mantram阅读 328评论 0 3
  • 其实本来对一中毫无感觉的,毕竟并不是母校,而只是因为不满意当时的大学,而退学回来选择的一个临时避难所。 以为选择性...
    还休子阅读 166评论 0 0