第五章   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. 封装好的MD5加密

    /** * 不可逆加密类 为密码提供不可逆的加密运算,使用MD5算法 * * 使用方法: MD5 encrypt = new MD5(); encrypt.getMD5ofStr(str); //返回 ...

  2. 区分replace()和replaceAll()

    replace():returns a string replacing all the old char or CharSequence to new char or CharSequence. r ...

  3. 基于fitnesse浅析waferslim引擎

    最近在用fitnesse框架做自动化测试,简单总结一下,后边再补充内容. 1.fitnesse简介:后续补 略,见官网 http://www.fitnesse.org/ 2.waferslim引擎之p ...

  4. 你真的了解interface和内部类么

    java 访问控制符 private     : 只能被当前类访问 protected : 可以被同包的类和任何子类访问(包内,包外) default    : 可以被包内的任何内访问 public  ...

  5. CSS滚动条设置

    /*IE滚动条颜色设置*/ body { scrollbar-arrow-color:#f2f2f3; /*上下箭头*/ scrollbar-track-color:#1589ce; /*底层背景色* ...

  6. Unity 网格合并

    从优化角度,Mesh需要合并. 从换装的角度(这里指的是换形状.换组成部件的换装,而不是挂点型的换装),都需要网格合并.材质合并.如果是人物的换装,那么需要合并SkinnedMeshRenderer, ...

  7. c++标准头文件

    C++标准库的所有头文件都没有扩展名.C++标准库的内容总共在50个标准头文件中定义,其中18个提供了C库的功能. <cname>形式的标准头文件[ <complex>例外]其 ...

  8. 配置puppet的主机端和客户端的自动认证

    配置puppet的主机端和客户端的自动认证 author:headsen  chen    2017-11-01  17:44:56 个人原创,转载请注明作者,出处,否则依法追究法律责任 1,先在主机 ...

  9. ABAP调试

    ABAP 开发系列(02): ABAP Development Workbench 介绍(下)- ABAP 调试器 8. Debugger – ABAP 调试器 开发程序,调试器是必不可少的工具,而A ...

  10. spring 文件模板下载多种实现方式

    针对于文件的下载,我们有很多种实现方式.业务场景是这样子的,要实现Excel文件的导入和导出功能,问题对于java的POI操作没有问题,所以实现文件的下载就相对简单,只需要从数据库取出相关的数据,针对 ...