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

时间:2022-04-01 21:10:59

第五章   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中最常用的继承模式。