JavaScript基础部分(七)面向对象编程

JS面向对象编程
本文介绍JavaScript面向对象编程的基础概念,包括对象的创建方法、构造函数的使用、原型链的扩展与继承,以及如何通过功能检测确保代码兼容性。

7.1什么是面向对象编程

7.2创建对象

1、创建直接实例

Javascript有一个内置对象object,利用它可以创建一个空白的对象:

A)、创建对象实例:myNewObject  = new object();

B)、为myNewObject添加属性:myNewObject.info = ‘i am a shiny new object’;

C)、为对象添加方法

function myfunc(){

alert(this.info);

};

myNewObject.showInfo = myFunc;

调用:myNewObject.showInfo();

2、使用关键字this(和java中的this关键字的用法类似)

3、匿名函数

例子

前面创建对象,创建单独的函数,将函数作为对象的方法的做法是:

function myfunc(){

alert(this.info);

};

myNewObject.showInfo = myFunc;

而可以通过匿名函数的方法:

myNewObject.showInfo = function(){

alert(this.info);

};

因为该种方法并不需要为函数命名,所以称为匿名函数。

4、使用构造函数

如果要创建可能具有多个实例的对象,更好的方式是“使用构造函数”。它会创建某种模板,方便实现多次实例化。

构造函数:

function myObjectType(){

this.info = ‘i am a shiny new object’;

this.showInfo = function(){

alert(this.info);

}

this.setInfo = function(newInfo){

this.info = newInfo;

}

}

5.对象实例化

定义了构造函数后就可以很方便的创建对象的多个实例了

var myNewObject = new myObjectType();

6、构造函数参数

通过给构造函数传递一个或多个参数来定制对象。

7.3使用prototype扩展和继承对象

JavaScript提供的机制能够基于已有的对象来修改对象,使其拥有新的方法或属性,甚至可以创建完全的崭新的对象(扩展和继承)

1、扩展对象

使用关键字prototype可以迅速的添加属性和方法,然后就可以用于对象的全部实例。

例:扩展对象person,给它添加一个新的方法sayHello.

person.prototype.sayHello = function(){

alert(this.name+”says hello”);

}

2、继承

JavaScript模拟实现继承的方式也是使用关键字prototype

例子:

先定义一个简单的对象:

function Pet(){

this.animal = “”;

this.name = “”;

this.setAnimal = function(newAnimal){

this.animal = newAnimal;

}

this.setName = function(newName){

This.name = newName;

}

}

Pet具有动物类型和宠物名称的属性,以及设置这些属性的方法

现在要为狗类创建一个Dog对象,让Dog对象从Pet继承,并且添加属性breed和方法setBreed.

首先:创建Dog构造函数,定义新的属性和方法:

function Dog(){

this.breed = “”;

this.setBreed = function(newBreed){

This.breed = newBreed;

}

}

接下来就是从Pet继承属性和方法,需要使用关键字prototype

Dog.prototype = new Pet();

现在就不仅可以访问Dog里的属性和方法,还可以访问Pet里的属性和方法。

3、扩展JavaScript内置的对象

关键字prototype还能够扩展JavaScript内置的对象。

7.4封装(java类似)

7.5使用功能检测

1)、与通过navigator检测浏览器相比,更好的做法是让JavaScript查看浏览器是否支持代码所需的功能。方式是检测特定对象、方法或属性是否可用,一般也就是尝试使用对象、方法或属性,然后检测JavaScript返回的值。(检测浏览器功能的意义在于我们只是想知道浏览器是否支持我们要使用的对象、属性或方法)。

2)、使用typeof操作符检测某个JavaScript函数是否存在:

例:iftypeof document.getElementById == ‘function’){

//这里可以使用getElementById()方法

}else{

//执行其他操作

}

根据typeof的返回值可以确定操作数的类型是:数值、字符串、布尔类型、对象还是null或者未定义。(使用这种技术不仅可以检测DOM和内置对象、方法和属性的存在,还可以检测脚创建的对象、方法和属性)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值