第五章   JavaScript对象及初识面向对象

一.对象

在JavaScript中,所有事物都是对象,如字符串、数值、数组、函数等。

在JavaScript对象分为内置对象和自定义对象,要处理一些复杂的逻辑时,需要用户自定义对象:

自定义对象语法:var 对象名称=new  Object( );

JavaScript的内置对象是一种特殊的数据,常见的内置对象有:

  • String(字符串) 对象
  • Date(日期)对象
  • Array(数组)对象
  • Boolean(逻辑)对象
  • Math(算数)对象
  • RegExp对象

二.构造函数和原型对象

无论是基于Object创建对象,还是使用字面量赋值的方式创建对象,都有一个非常明显的缺点,那就是使用同一个接口需要创建很多对象,这样会产生大量的重复代码。但是构造函数的出现解决了这一问题。

1.    构造函数

构造函数用来创建特定类型的对象,像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中,此外,也可以创建自定义的构造函数。

例:

声明构造函数:构造函数名称以大写字母开头区分方法

Function Flower(name,genere){

This.name=name;

This.genere=genere;

}

调用:var flower=new Flower(“牡丹”,”芍药科”);

2.    原型对象

在JavaScript中创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的的用途是包含可以由特定类型的所有实例共享的属性和方法。

Prototype就是通过调用构造函数而创建的那个对象实例的原型对象,使用原型对象的好处就是可以让所有对象实例共享它所有的属性和方法,也就是说不必再构造函数中定义对象实例的信息,可以直接将这些信息直接添加到原型对象中。

例:

 /*用原型对象的方法创建人类对象*/
function Persona(){ }
Persona.prototype.name="肥潘";
Persona.prototype.age="38";
Persona.prototype.job="卖猪肉";
Persona.prototype.address="广东深圳平洲";
var person1=new Persona();
var person2=new Persona();

三.继承

1.    原型链

在JavaScript中,每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),实例都包含一个指向原型对象的内部指针(_proto_)

要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言。类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象。在javascript中,函数就有2个功能

第一、 作为一般函数调用
第二、 作为它原型对象的构造函数 
也就new()

我们来看一个例子

[javascript] view plain copy

function a(){

this.name = 'a';

}

当创建一个函数,它会发生什么呢?

第一、它会创建1个函数对象
也就是a 本身

第二、它会创建1个原型对象@a(用@来表示)

第三、函数对象会有一个prototype指针,它指向了对应的原型对象,这里就指向了@a

第四、@a对象中有一个construtor指针,指向它的构造函数,这里就指向了a

这个prototype属性究竟有什么用呢?

其实prototype 属性表示当前函数能够控制的范围(或者说它指明了当前函数是谁的构造函数),这里a就是@a原型对象的构造函数,所以我们会看见有这种写法

[javascript] view plain copy

function a(){

this.name = 'a';

}

var a1 = new a();

这就和其他常见语言相似了,new 就是调用原型对象(通过prototype指针)里面构造函数(constructor)创建一个新的对象实例。

那么修改了prototype指向对象里面的属性,也就影响了所有以它为模板创建的实例,我们可以这样来验证

[javascript] view plain copy

function a(){

this.name = 'a';

}

var a1 = new a();

a.prototype.age = 1;

alert(a1.age);

结果:1

那为什么a1对象可以直接访问到age属性呢?a1对象里面我并没有定义age属性啊,

那是因为所有实例里面都会有一个引用_proto_(在firfox,chrome下可以直接访问,ie不支持)指向了这个原型,这里就是指向了@a,

[javascript] view plain copy

function a(){

this.name = 'a';

}

var a1 = new a();

alert(a1._proto_ == a.prototype)

结果:true

在访问属性的时候,会先在a1对象内部中寻找,如果没有,就会顺着_proto_指向的对象里面去寻找,这里会到@a中寻找,找到就返回值,没有找到就返回undefined,用个成语来形容,就是顺藤摸瓜嘛!

至此原型链的含义就出来了,由于原型对象也有一个_proto_指针,又指向了另一个原型,一个接一个,就形成了原型链。Object.prototype是最顶层的原型,所以如果修改了Object.prototype的属性,那么就影响了所有的对象。

在来看一段代码

[javascript] view plain copy

function a(){

this.name = 'a';

}

function b(){

this.age = 1;

}

b.prototype = new a();

alert(new b().name);

我们显示的将b的原型指向了a的一个实例,然后,b的实例也可以访问a的属性了。这就是javascript的继承了,那为什么b.prototype 指向的是a的一个实例,而不是直接指向a.prototype  呢?

[javascript] view plain copy

b.prototype = new a.prototype;

如果像上面这么写,修改p.prototype中的属性,那么a的原型也会改变了,相当于是子类修改了父类,并且子类和父类的属性糅合在了一起,这显然是不合适的。换句话说,b也成为了@a的构造函数,a,b成了平级的关系。

我们可以下一个定义:

函数a 继承函数b 也就是让函数a成为函数b原型的一个实例的构造函数,构造函数里面声明的属性是函数a自己的,原型实例里面的属性就是继承b的

[javascript] view plain copy

var $ = jQuery = function(selector,context){

//不可能在自己的构造函数中又一次构造自己,所以返回了另外一个构造函数的实例

return new init(selector,context);

}

jQuery.fn = jQuery.prototype = {

size:function(){

return this.length;

}

}

function  init (selector,context){

}

init.prototype = jQuery.fn;;

}

这是jquery的一段源码,我们在使用jquery的时候,并没有使用new关键字,那它是如何构造对象的呢?

用上面的知识,可以解释,jquery这里只是一个一般函数的调用,它返回了jquery原型的另外一个构造函数创建的对象,也就是new init()

2.   
对象继承

原型链虽然很强大,可以用它来实现继承,但是也存在两个问题。

  1. 最重要的是来自包含引用类型值的原型,由于包含引用类型值的原型属性会被所有实例共享,在通过原型来实现继承时,原型实际上变成另一个类型的实例,因此原先的实例属性也就变成了现在的原型属性。
  2. 第二个问题是在创建子类型的实例时,不能向父类型的构造函数中传递参数,其实是没有办法在不影响所有对象实例的情况下,给父类型的构造函数传递参数。

基于这两个原因,实际开发中很少单独使用原型链。因此,开发人员在解决原型中包含引用类型值所带来的问题时,使用了一种叫做借用构造函数(constructor  stealing)的技术。

3.    
借用构造函数

借用构造函数这种技术的基本思想很简单,就是在子类型构造函数的内部调用父类型构造函数,即在子类型构造函数的内部通过apply()或call()方法调用父类型的构造函数,页可以在将来新创建的对象上执行构造函数。

apply语法:apply([thisObj[,argArray]]);

//应用某一个对象的一个方法,用另一个对象替换当前对象。

call语法:call([thisObj[,arg1[,arg2[,
[,argN]]]]]);

//调用一个对象的一个方法,以另一个对象替换当前对象。

由apply()和call()的语法解释可以看出,它们的用途相同,都是在特定的作用域中调用函数,但是它们接受的参数不同:

apply()接收两个参数,一个是函数运用的作用域(this),另一个是参数数组。

call()方法第一个参数和apply()方法相同,但传递给函数的参数必须列举出来。

借用构造函数还有一个很大的优势,即可以在子类型构造函数中向父类型构造函数传递参数。

如果是仅仅借用构造函数的技术,也将无法避免构造函数模式存在的(方法都在构造函数中定义)问题,因此函数的复用就无从谈起。而且在父类型的原型中定义的方法,对子类而言也是不可见的,结果所有类型都只能使用构造函数模式。基于这些问题,组合继承很好的解决了这些。

4.    
组合继承

组合继承(combination  inheritance)有时也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合到一块,从而发挥两者之长的一种继承模式。

其思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,称为了JavaScript中最常用的继承模式。

第五章 JavaScript对象及初识面向对象的更多相关文章

  1. accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习

    JavaScript数据类型,对象,构造函数,原型对象,初识原型链,对象继承 一.单词部分 ①object父类②constructor构造函数③instance实例④call调用 ⑤apply应用⑥c ...

  2. JQuery制作网页—— 第四章JavaScript对象及初识面向对象

    1.对象:在JavaScript中,所有事物都是对象,如字符串.数值.数组.函数等. JavaScript中的基本数据类型: number(数值类型)   string(字符串类型)  boolean ...

  3. JavaScript对象及初识面向对象

    一.对象 1.1对象是什么 对象是包含相关属性和方法的集合体 1.2什么是面向对象 面向对象仅仅是一个概念或者编程思想 通过一种叫做原型的方式来实现面向对象编程 二.创建对象 2.1自定义对象 2.1 ...

  4. 第四章 JavaScript对象及初始面向对象

    创建对象: //方式一 var ower=new Object(); ower.name="长春花"; ower.genera="夹竹挑科 长春花属"; owe ...

  5. JAVAScript对象及初始面向对象

              javaScript对象及初始面向对象 1:内置对象 例:Date String Array 类等... 2:自定义对象 方法1:var newObj=new Object(); ...

  6. 学习笔记 第十五章 JavaScript基础

    第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...

  7. 使用jQuery快速高效制作网页交互特效---JavaScript对象及初始面向对象

    一.JavaScript中的基本数据类型 number(数值类型)    string(字符串类型)    boolean(布尔类型)    null(空类型)    undefined(未定义类型) ...

  8. JavaScript交互式网页设计 • 【第5章 JavaScript对象】

    全部章节   >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...

  9. 第五章JavaScript

    创建数组://1.字面量方式创建 (推荐大家使用这种方式创建数组 简单粗暴) var colors = ['red','color','yellow'];console.log(colors) //空 ...

随机推荐

  1. onmouse事件

    常用的鼠标事件:onmouseenter,onmouseleave,onmouseover,onmouseout,onmouseup,onmousedown,onmousewheel,onmousem ...

  2. PAT乙级-1041. 考试座位号(15)

    每个PAT考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考试座 ...

  3. 数据库连接问题之:Caused by: java.sql.SQLException: Connections could not be acquired from the underlying database!

    要么是驱动问题(没加载到工程中去或者其他问题)要么是账号密码或者url或者driver写错 driver:com.mysql.jdbc.Driver url:jdbc:mysql://localhos ...

  4. 本地安装plsql和instantclient连接linux服务器端的oracle

    当虚拟机里面的linux服务器安装好oracle之后(具体安装方法在之前的博客有说到),如何连接使用呢?连接过程中会出现什么问题呢? 1.首先我们下载instantclient的压缩包,直接解压就好, ...

  5. linux下关闭网络命令

    CTRL+ALT+F1 进入命令行模式 CTRL+ALT+F7 退出命令行模式 sudo ifconfig ethX dwon 关闭网卡sudo /etc/init.d/networking stop ...

  6. Java基于TCP的Socket编程练习

    环境:Notpad ++ 6.0 + JDK 6.0.31 问题:使用套接字编写客户-服务器程序,实现客户-服务器交互计算.客户将三角形3个边的长度发给服务器,服务器把计算出的三角形的面积返回给客户. ...

  7. 以@Value方式注入 properties 配置文件

    类中读取XML文件不是太方便,所以使用*.properties是比较好的办法 注入方式获取是最直接,最快捷的.这个操作主要涉三个部分,下面分别介绍: 首先,配置文件准备.这里文件名命名为applica ...

  8. cxGrid_Q31584 cxgrid 拖放移动记录

    cxgrid 拖放移动记录,cxgrid 拖放,cxgrid 拖动记录,cxgrid 鼠标拖动记录 这是cxgrid开发公司回复客户时所发送的源码项目,用于实现鼠标拖动记录,改变记录在表格中的位置,所 ...

  9. 页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)

    如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </scrip ...

  10. Vue自定义插件方法大全

    新年第一天首先祝大家新年快乐,心想事成! 1.利用根实例构造函数的原型 //在构造函数的原型链上添加自定义属性 Vue.prototype.test = 'pomelo' //在其他组件中调用 con ...