JavaScript专题——专题三 JavaScript 面向对象

一、JavaScript面向对象概述

1.1
定义。

a.对象就是包括一组变量和函数的集合实例。

b.通常对象由类派生而来，而类定义了对象拥有的属性和方法。

c.如果你的脚本都是对象之间的交互操作那么就可以说这个脚本是面向对象的脚本。

d.JavaScript是一种基于原型的面向对象语言，没有类的概念，所有的一切都是派生自生现有对象的一个副本。

1.2 JavaScript中的对象：

1.2.1 Function对象，例如alert()函数可以使用菜熟改变此类对象的功能。

1.2.1.1 Function实例。

1.2.1.2作为构造函数的Function，必须通过new关键字来进行实例化。

1.2.2 Object对象，这类对象无法像Function类对象那样调用，而且具有固定的功能。

1.2.3
内置对象，JavaScript内部有的对象。所有的内置对象都可以通过new关键字或其简单语法形式来对

象。

1.2.3.1 Object是通用基础对象，可以使用它来创建简单的静态对象。其简写是{}。

Var obj=new Object();同等于 var obj={};

1.2.3.2 Function是被所有使用参数的对象复制的对象，也会在脚本中定义函数时所创建的对象，其

简写为function(){}。

1.2.3.3 Array是一种特殊的属性和方法的集合，比如使用它的length属性可以迭代操作这类对象，使

用方括号加序号也可以访问它的属性、其简写为是[]。

Var arry=new Array();同等于 var arry=[];

1.2.3.4 String，Boolean、Number分别用来表示字符串、布尔值、数字。

1.3 继承

定义：继承是面向对象中重要的组成部分。当创建自己的对象时你可以扩展或继承现有对象的属性和方法。继承为重用对象提供了便捷的途径，这样你就可以把精力完全集中新的改进代码中。

JavaScript是基于原型的面向对象这就导致无法从一个类扩展出另一个类的底层类结构。在JS中继承是通过简单的从一个对象原型向另一个对象原型复制方法而实现。

实例：

function Init(){

var person={};//同等于var person=new Object();

person.getName=function(){

alert("person name");

};

person.getAge=function(){

alert("person age");

};



//创建另一个对象

var student={};

//创建其本身的方法

student.getStuNum=function(){

alert("student stuNum");

};

//继承person的getName属性

student.getName=person.getName;

person.getName=function(){

alert("person1 name");

};



student.getAge=person.getAge;

student.getName();

person.getName();

}

1.4 原型/对象属性包

1.4.1原型只存在function中，它实质就是一个对象被创建后引擎默认创建一个空的prototype对象，既然对象是属性包。

1.4.2对象。

1.4.2.1对象成员

对象的属性和方法被称为对象的成员，因为他们都从属于父对象。实际上属性自身只是一个Object对象或扩展自Object对象的实例。方法也扩展自Object对象但是它可以接收属性所以他是Function对象的实例，还有就是方法可以有返回值

1.4.2.2window对象

例子：

<script type="text/javascript">

function override(){

var alert=function(message){

window.alert('override'+message);

};



alert('alert');

window.alert('window.alert');

}

override();

alert('alert form outside');



</script>

二、如何创建JavaScript面向对象。

2.1如何创建自己的对象

Var myObject=new Object();

2.2如何创建构造方法

Function是创建构造函数的起点。

Function myConstructor(a){

/*某些代码*/

}

等同于上面代码的有：

Var myConstructor=new Function(‘a’,’ /*某些代码*/’);

2.3如何创建公有、私有、特权、静态成员。

2.3.1添加公有方法。

能够使实例化的对象包含的方法称为公有方法，需要修改函数原型，即prototype属性。

Prototype属性用来定义对象自身内部构造的特殊成员。如果将prototype修改则此修改将立即应用到其派生的对象和实例。

当修改一个对象的原型时，任何继承该对象和已经存在的所有实例都会立即继承同样的变化。根据用法的不同这一特性既强大也可能会导致问题，因此当你修改已有的但不是你的对象的原型时要特别小心。

例子：

Function myConstructor(message){

Alert(message);

This.myMessage=message;

}

//添加公有方法

myConstructor.prototype.clearMessage=function(string){

this.myMessage+=’’+string;

}

这样的操作后将会把新方法添加到myConstructor的底层定义中，而不是添加到myConstructor实例自身。

Var myObject=new myConstructor(‘hello world’);

需要注意的是：你不能直接在myConstructor上调用这个方法。

2.3.2添加私有和特权成员。

私有成员就是在构造函数中定义的变量和函数。

例子：

Function myConstructor(message){

This.myMessage=message;

Var myOwner=this;//私有属性

Var separator=’_’;//私有属性

Function alertMessage(){

Alert(myOwner.message);

}

alertMessage();//实例化时显示信息

}

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

Function myConstructor(message){

This.myMessage=message;

Var separator=’_’;

//特权方法

This.appendToMessage=function(string){

This.myMessage+=separator+string;

alertMessage();

}

}

通过上面的方式myConstructor拥有了和前面使用prototype相同的sppendToMessage()方法。但是此时的方法隶属于构造函数的作用域中可以访问私有成员。

Var myObj=new myConstructor(‘hello world’);

myObj.appendToMessage(‘aaa’);

综述：

私有和特权成员在函数的内部，他们会被带到函数的每一个实例中，因而将占用大量的内存。

公有的原型成员是对象蓝图的一部分，适用于通过new关键字实例化该对象的每一个实例。

静态成员只适用于对象的一个特殊实例。

三、JavaScript面向对象的相关技术

3.1对象字面量。

3.1.1使用点标识符创建对象和成员

Var temp=document.getElementById(‘example’);

3.1.2使用点操作符在prototype中定义方法：

myConstructor.prototype.clearMessage=function(){}

3.1.3一种对象面量作为另一种语法更清晰与阅读：



3.2this。

This是一个依赖于使用它的执行环境而被解析的关键字。

Var sound=’admin’;

Function myFunction(){

This.style.color=’red’;

Alert(sound);

}

This关键字引用的是包含它的函数作为某个对象的方法呗调用时的那个对象。

3.3call()和apply()方法。

3.3.1 Call()方法

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

Call()方法可以用来代替另一个对象调用一个方法。Call方法可将一个函数的对象上下文从初始的上下问改变为由thisObj指定的新对象。

例子：

window.firstName = "diz";

window.lastName = "song";

var myObject = { firstName: "my", lastName: "Object" };

function HelloName() {

console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");

}

HelloName.call(window); //huo .call(this);

HelloName.call(myObject);

运行结果：

Hello diz song glad to meet you!

Hello my Object glad to meet you!

3.3.2apply()方法。

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

3.3.3两个方法的异同。

A.他们的用途相同，都是在特定的作用域中调用函数。

B.接收参数方面不同，apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。

3.4JS的异常处理。

JS异常处理使用try{}catch{}进行。

例如：

Function myFunction(){

This.style.color=’red’;

}

Try{

myFunction();

}catch(exception){

Alert(‘捕获异常名为：’+exception.name+’\n捕获的异常内容为：’

+exception.message);

}