`
yanfaguanli
  • 浏览: 660294 次
文章分类
社区版块
存档分类
最新评论

JavaScript学习篇之——面向对象

 
阅读更多


JavaScript对象是什么


JavaScript中所有的事物都是对象,对象就是包含一组变量和函数的集合,或者说对象只是带有属性和方法的特殊数据类型。在其它面向对象语言中对象是类的实例化来的,JavaScript其它面向对象的语言不同的是JavaScript是基于原型的面向对象语言,没有类的概念,所有的一切对象都派生自现有对象的一个副本。

创建JavaScript对象


JavaScript本身包含很多对象,包括ArrayStringBooleanNumberMahDataRegExpGlobal等。除此之外JavaScript还允许自定义对象。

通过JavaScript,我们可以定义并创建自己的对象。创建新对象有两种不同的方法:

1.定义并创建对象的实例使用Object

2.使用构造函数Function来定义对象,然后创建新的对象实例。


方法1Object


Object方法来创建一个对象以及它的实例:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varperson=newObject();
  2. person.firstname="Bill";
  3. person.lastname="Gates";
  4. person.age=56;
  5. person.eyecolor="blue";


实例:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};


方法2 Fucntion


使用Fucntion构造函数来创造对象以及它的实例


[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. functionperson(firstname,lastname,age,eyecolor)
  2. {
  3. this.firstname=firstname;
  4. this.lastname=lastname;
  5. this.age=age;
  6. this.eyecolor=eyecolor;
  7. }


使用构造函数创建对象实例

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varmyFather=newperson("Bill","Gates",56,"blue");


备注:在使用构造函数创造对象时,还有另一种创造对象的方法,但是这种方法在性能上不如上面这种方法,在声明顺序上有严格的要求,使用起来不是很方便,所以不建议使用:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varperson=newFunction(firstname,this.firstname=firstname;lastname,this.lastname=lastname;age,this.age=age;eyecolor,
  2. this.eyecolor=eyecolor;
  3. );


添加成员


添加静态成员


1 Object方法


Object对象添加静态成员只存在于对象的myObj实例而不存在构造函数中。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varmyObj=newObject();
  2. //添加name属性
  3. myObj.name='LD';
  4. //添加alertName方法
  5. myObj.alertName=function(){
  6. alert(this.name);
  7. }
  8. //执行alertName
  9. myObj.alertName();


2 Function方法


Function添加静态成员可以存在myObj实例,也可存在构造函数中。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varmyObj=newfunction(){
  2. //添加静态属性
  3. myObj.name='LD';
  4. //添加静态方法
  5. myObj.alertName=function(){
  6. alert(this.nam);
  7. }
  8. }
  9. myObj.alertName();


关于上面添加的静态成员,只能应用于myObj这个实例中,不能应用于其它的实例中,否则会报错,这就是静态成员的应用。

添加公有成员


能够使实例化的对象包含的方法称为公有成员,需要修改函数的原型,即prototype属性,修改后,任何继承该对象的对象已经存在的所有实例都会立即继承统一的变化。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. functionmyConstructor(){
  2. }
  3. //添加公有属性
  4. myConstructor.prototype.myName='LD';
  5. //实例化
  6. varmyObj=newmyConstructor();
  7. alert(myObj.myName);


由myConstructor实例化的对象可以使用myName,但是myConstructor本身不可以,因为我们把公有成员加到了myConstructor的底层定义中,而非myConstructor实例本身。

添加私有成员


私有成员就是在构造函数中定义的变量和函数,这个比较简单只要在构造函数大括号中的属性和方法都算是私有的。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. functionmyConstructor(){
  2. //添加私有属性
  3. varmyName='Ld'l
  4. //添加私有方法
  5. varalertName=function(){
  6. alert('LD');
  7. }
  8. alertName();


添加特权成员


特权成员与私有成员不同,特权成员能够被公开访问,而且还能访问私有成员,特权成员是指在构造函数的作用域中使用this定义的方法

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. functionmyConstructor(){
  2. //私有属性
  3. varname='Devin';
  4. //特权方法
  5. this.alertName=function(){
  6. alert(name);
  7. }
  8. }


成员之间比较


私有成员和特权成员都再函数的内部,他们会被带到函数的每一个实例中,因而将占用大量的内存;公有的原型成员是对象蓝图的一部分,适用于通过new关键字实例化该对象的每一个实例;静态成员只适用于对象的一个特殊实例。

JavaScript对象是什么


JavaScript中所有的事物都是对象,对象就是包含一组变量和函数的集合,或者说对象只是带有属性和方法的特殊数据类型。在其它面向对象语言中对象是类的实例化来的,JavaScript其它面向对象的语言不同的是JavaScript是基于原型的面向对象语言,没有类的概念,所有的一切对象都派生自现有对象的一个副本。

创建JavaScript对象


JavaScript本身包含很多对象,包括ArrayStringBooleanNumberMahDataRegExpGlobal等。除此之外JavaScript还允许自定义对象。

通过JavaScript,我们可以定义并创建自己的对象。创建新对象有两种不同的方法:

1.定义并创建对象的实例使用Object

2.使用构造函数Function来定义对象,然后创建新的对象实例。


方法1Object


Object方法来创建一个对象以及它的实例:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varperson=newObject();
  2. person.firstname="Bill";
  3. person.lastname="Gates";
  4. person.age=56;
  5. person.eyecolor="blue";


实例:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};


方法2 Fucntion


使用Fucntion构造函数来创造对象以及它的实例


[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. functionperson(firstname,lastname,age,eyecolor)
  2. {
  3. this.firstname=firstname;
  4. this.lastname=lastname;
  5. this.age=age;
  6. this.eyecolor=eyecolor;
  7. }


使用构造函数创建对象实例

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varmyFather=newperson("Bill","Gates",56,"blue");


备注:在使用构造函数创造对象时,还有另一种创造对象的方法,但是这种方法在性能上不如上面这种方法,在声明顺序上有严格的要求,使用起来不是很方便,所以不建议使用:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varperson=newFunction(firstname,this.firstname=firstname;lastname,this.lastname=lastname;age,this.age=age;eyecolor,
  2. this.eyecolor=eyecolor;
  3. );


添加成员


添加静态成员


1 Object方法


Object对象添加静态成员只存在于对象的myObj实例而不存在构造函数中。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varmyObj=newObject();
  2. //添加name属性
  3. myObj.name='LD';
  4. //添加alertName方法
  5. myObj.alertName=function(){
  6. alert(this.name);
  7. }
  8. //执行alertName
  9. myObj.alertName();


2 Function方法


Function添加静态成员可以存在myObj实例,也可存在构造函数中。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. varmyObj=newfunction(){
  2. //添加静态属性
  3. myObj.name='LD';
  4. //添加静态方法
  5. myObj.alertName=function(){
  6. alert(this.nam);
  7. }
  8. }
  9. myObj.alertName();


关于上面添加的静态成员,只能应用于myObj这个实例中,不能应用于其它的实例中,否则会报错,这就是静态成员的应用。

添加公有成员


能够使实例化的对象包含的方法称为公有成员,需要修改函数的原型,即prototype属性,修改后,任何继承该对象的对象已经存在的所有实例都会立即继承统一的变化。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. functionmyConstructor(){
  2. }
  3. //添加公有属性
  4. myConstructor.prototype.myName='LD';
  5. //实例化
  6. varmyObj=newmyConstructor();
  7. alert(myObj.myName);


由myConstructor实例化的对象可以使用myName,但是myConstructor本身不可以,因为我们把公有成员加到了myConstructor的底层定义中,而非myConstructor实例本身。

添加私有成员


私有成员就是在构造函数中定义的变量和函数,这个比较简单只要在构造函数大括号中的属性和方法都算是私有的。

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. functionmyConstructor(){
  2. //添加私有属性
  3. varmyName='Ld'l
  4. //添加私有方法
  5. varalertName=function(){
  6. alert('LD');
  7. }
  8. alertName();


添加特权成员


特权成员与私有成员不同,特权成员能够被公开访问,而且还能访问私有成员,特权成员是指在构造函数的作用域中使用this定义的方法

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. functionmyConstructor(){
  2. //私有属性
  3. varname='Devin';
  4. //特权方法
  5. this.alertName=function(){
  6. alert(name);
  7. }
  8. }


成员之间比较


私有成员和特权成员都再函数的内部,他们会被带到函数的每一个实例中,因而将占用大量的内存;公有的原型成员是对象蓝图的一部分,适用于通过new关键字实例化该对象的每一个实例;静态成员只适用于对象的一个特殊实例。

分享到:
评论

相关推荐

    [推荐]javascript 面向对象技术基础教程

    <javascript>>第7,8,9章而写成的,我也 会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数–>类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句,供大家参考. 如果不做说明,...

    深入理解JavaScript系列

    深入理解JavaScript系列(18):面向对象编程之ECMAScript实现 深入理解JavaScript系列(19):求值策略 深入理解JavaScript系列(20):《你真懂JavaScript吗?》答案详解 深入理解JavaScript系列(21):S.O.L....

    JavaScript面向对象的程序设计(犯迷糊的小羊)

    本章开始进入JavaScript核心知识点的高级部分——面向对象的程序设计,这一部分的内容将会对对象这一数据类型做进一步的深化理解,并且讲述几种创建对象的设计模式以及JavaScript独特的继承机制; 1.理解对象和面向...

    Javascript贪吃蛇.rar

    JavaScript贪吃蛇小游戏——学习JavaScript的面向对象编程。适合前端初学者的学习。具体介绍可在主页博客里看到哦。

    javascript面向对象三大特征之多态实例详解

    本文实例讲述了javascript面向对象三大特征之多态。分享给大家供大家参考,具体如下: 多态 从某种意义上来说,多态是面向对象中重要的一部分,也是实施继承的主要目的。 一个实例可以拥有多个类型,它既可以是这种...

    学习javascript面向对象 javascript实现继承的方式

    实际上不是SubType的原型的constructor属性被重写了,而是SubType的原型指向了另一个对象——SuperType的原型,而这个原型对象的construtor属性指向的是SuperType function SuperType(){ this.property = true; }...

    (精美)2019毕业论文——如何使用Java语言来实现面向对象的程序设计.doc

    (精美)2019毕业论文——如何使用Java语言来实现面向对象的程序设计.doc

    写给大家看的面向对象编程书(第3版).[美]Matt Weisfeld(带详细书签).pdf

    本书是一部独具特色的面向对象技术著作。书中结合代码示例生动透彻地讲述了面向对象思想的精髓,让读者真正学会以对象方式进行思考。此外,本书还讨论了各种与面向对象概念密切相关的应用主题,包括XML、UML建模语言...

    Javascript 面向对象特性

    1. JavaScript中的类型 ——– 虽然JavaScript是一个基于对象的语言,但对象(Object)在JavaScript中不是第一型的。JS 是以函数(Function)为第一型的语言。这样说,不但是因为JS中的函数具有高级语言中的函 数的各种...

    javascript学习笔记.docx

    11) JavaScript中面向对象的特性: a) 实例属性:在构造函数创建或初始化的属性。 b) 实例方法:在构造函数中把原型对象中的一个属性设为函数来实现。 c) 类属性:构造函数本身的属性。 d) 类方法:用合适的函数作为...

    worldwindjava源码-javascript-oop:面向对象编程和面向对象JavaScript

    是一种编程风格——我们称之为编程范式。 面向对象编程的四大Struts是: 封装 抽象 遗产 多态性 封装 封装是我们用来尝试使复杂系统更易于使用的一种方法。 封装被定义为将某物封装在或好像封装在胶囊中的动作。 在...

    tangramjs:在 JavaScript 中用于无类面向对象编程的库

    七巧板一个用于 JavaScript 中无类面向对象编程的库。 我曾经认为 JavaScript 的重要创新是原型继承。 我现在认为它是无类的面向对象编程。 我认为这是 JavaScript 给人类的礼物。 这就是使它真正有趣、特别和重要的...

    javascript 面向对象的JavaScript类

    在上一节面 JavaScript 面向对象之命名空间 中说了怎么定义JavaScript命名空间,这一节来说下紧接着的一个概念——类。虽然JavaScript中没有class关键字,但作为开发人员我们一定要有这个思想。在C#中类可以分为...

    Javascript OOP之面向对象

    面向对象程序设计(Object-oriented programming,OOP)是一种程序设计范型,同时也是一种程序开发的方法。对象指的是类的实例。它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的重用性、灵活性和...

    深入理解JavaScript系列.chm

    18.面向对象编程之ECMAScript实现 19.求值策略 20.《你真懂JavaScript吗?》答案详解 21.S.O.L.I.D五大原则之接口隔离原则ISP 22.S.O.L.I.D五大原则之依赖倒置原则DIP 23.JavaScript与DOM(上)——也适用于新手 24....

    从面试题学习Javascript 面向对象(创建对象)

    题目: 代码如下: try{ var me = Man({ fullname: “小红” }); var she = new Man({ fullname: “小红” });...用户未输入> ——————*/ me.attr(“fullname”, “小明”); me.attr(“gender”, “男”);

    JavaScript面向对象三个基本特征实例详解【封装、继承与多态】

    本文实例讲述了JavaScript面向对象三个基本特征。分享给大家供大家参考,具体如下: 了解过面向对象的同学应该都知道,面向对象三个基本特征是:封装、继承、多态,但是对于这三个词具体可能不太了解。对于前端来讲...

    不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象

    那是因为JavaScript试图去隐藏它传统的面向对象的特性——最终导致了它的双重人格(译者注:作者意思是JavaScript既有面向过程的特征,又有面向对象的特征)。 我认为正是由于JavaScript对象模型的难以理解和使用,...

    面向对象的方法实现贪吃蛇

    1. 利用面向对象的思想实现——一个食物对象、一个蛇对象、一个游戏总控对象。 2. 在使用××.prototype= {}重写原型对象的时候,一定要加上一句constructor:该对象。不然会造成实例化出来的实例的constructor为...

    javascript 使用手册

     其次,JavaScript是基于对象的,而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。...

Global site tag (gtag.js) - Google Analytics