javascript面向对象程序设计高级特性经典教程(值得收藏)

站长资源 2024/11/16 佚名

16 1538 16

相思资源网 Design By www.200059.com

本文实例讲述了javascript面向对象程序设计的高级特性。分享给大家供大家参考，具体如下：

1.创建对象的三种方式：

第一种构造法：new Object

var a = new Object();
a.x = 1, a.y = 2;

第二种构造法：对象直接量

var b = { x : 1, y : 2 };

第三种构造法：定义类型

function Point(x, y){
 this.x = x;
 this.y = y;
}
var p = new Point(1,2);

2.访问对象

访问对象的属性
中括号表示法：hero['name']。、
点号表示法：hero.name。
如果访问的属性不存在，会返回undefined。
访问对象的方法
方法名后加一对括号：hero.say()。
像访问属性一个访问方法：hero['say']()。

3.删除属性与方法

//创建一个空对象
var hero = {};
//为hero对象增加属性和方法
hero.name = "JavaScript";
hero.value = "helloworld";
hero.sayName = function(){return "hello " + hero.name;};
//测试
alert(hero.name); //output javascript
alert(hero.sayName()); //output hello javascript
//删除hero对象的name属性
delete hero.name;
//测试
alert(hero.sayName()); //output hello undefined

4.使用this值

//创建一个空对象
var hero = {};
//为hero对象增加属性和方法
hero.name = "javascript";
hero.value = "helloworld";
hero.sayName = function(){return "hello " + this.name;};
//测试
alert(hero.name); //output javascript
alert(hero.sayName()); //output hello javascript

总结：

① 这里的this实际上引用的是“这个对象”或“当前对象”。
② this的用法，大部分人的使用问题都比较多。所以不建议过多使用！

5.内建对象

内建对象大致上可以分为三个组：

① 数据封装类对象 —— 包括Object、Array、Boolean、Number和String。这些对象代表着javascript中不同的数据类型，并且都拥有各自不同的typeof返回值，以及undefined和null状态。

② 工具类对象 —— 包括Math、Date、RegExp等用于提供遍历的对象。

③ 错误类对象 —— 包括一般性错误对象以及其他各种更特殊的错误类对象。它们可以在某些异常发生时帮助我们纠正程序工作状态。

6.Object对象

Object是javascript中所有对象的父级对象，这意味着所有对象都继承于Object对象。

创建一个空对象：

var object = {};
var obj = new Object();

7.Array对象

Array对象用于在单个的变量中存储多个值。

创建一个空Array对象：

var object = {};
var obj = new Array();

例如1：

//反转字符串示例
//定义一个字符串
var str = "a,b,c,d,e,f,g";
//利用String对象的split()方法，将字符串切割成一个数组
var arr = str.split(",");
//利用Array对象的reverse()方法，将数组中元素的顺序颠倒。
arr = arr.reverse();
//测试打印
alert(arr.toString());

8.String对象

String对象与基本的字符串类型之间的区别：

var str = "hello";
var obj = new String("world");
alert(typeof str); //typeof string
alert(typeof obj); //typeof object

例如1：

//判断字符串是否包含指定字符串示例
//定义两个要判断的字符串
var str = "abcdefg";
var substr = "efg";
/*
* 定义判断字符串是否包含指定字符串的函数
*  * 第一个参数：要判断的字符串
*  * 第二个参数：指定的字符串
*/
function sub(str,substr){
//将判断的字符串定义成String对象
var string = new String(str);
//截取判断的字符串
var result = string.substr(string.indexOf(substr),substr.length);
/*
* 判断截取后的字符串是否为空
*  * 为空，说明不包含指定字符串
*  * 不为空，说明包含指定字符串
*/
if(result==substr){
return true;
}else{
return false;
}
}
alert(sub(str,substr));

9.原型(prototype)

函数本身也是一个包含了方法和属性的对象。而现在我们要研究的就是函数对象的另一个属性 —— prototype。

利用原型添加方法与属性
利用自身属性重写原型属性
扩展内建对象
利用原型添加方法与属性

下面创建一个新的函数对象，并设置一些属性和方法：

function Hero(name, color){
 this.name = name;
 this.color = color;
 this.whatareyou = function(){
 return "I am a " + this.color + " " + this.name;
 }
}
var hero = new Hero("javascript","red");
alert(hero.whatareyou()); //output I am a red javascript

为上面的Hero函数对象增加一些属性和方法：

Hero.prototype.price = 100;
Hero.prototype.rating = 3;
Hero.prototype.getInfo = function(){
 return "Rating: " + this.rating + " , Price: " + this.price;
}
alert(hero.getInfo()); //output Rating: 3 , Price: 100

上面的方式，也可以这样去做：

Hero.prototype = {
 price : 100,
 rating : 3,
 getInfo : function(){
   return "Rating: " + this.rating + " , Price: " + this.price;
 }
};

利用自身属性重写原型属性

如果对象的自身属性与原型属性同名该怎么办呢？答案是对象自身属性的优先级高于原型属性。

function Hero(){
 this.name = "jscript";
}
Hero.prototype.name = "javascript";
var hero = new Hero();
alert(hero.name); //output jscript
delete hero.name;
alert(hero.name); //output javascript

扩展内建对象

//为原型 Array对象增加一个判断的函数
Array.prototype.inArray = function(color){
 for(var i = 0, len = this.length; i < len; i++){
 if(this[i] === color){
 return true;
 }
 }
 return false;
}
//定义一个Array对象
var a = ["red", "green", "blue"];
//测试
alert(a.inArray("red")); //true
alert(a.inArray("yellow")); //false

10.继承

如果两个类都是同一个实例的类型，那么它们之间存在着某些关系，我们把同一个实例的类型之间的泛化关系称为“继承”。

继承关系至少包含三层含义：

① 子类的实例可以共享父类的方法。
② 子类可以覆盖父类的方法或扩展新的方法。
③ 子类和父类都是子类实例的“类型”。

在javascript中，并不支持“继承”。也就是说，javascript中没有继承的语法。从这个意义上来说，javascript并不是直接的面向对象语言。

11.原型链

原型链是ECMAScript标准制定的默认继承方式。

例如：

function A(){
this.name = "a";
this.toString = function(){return this.name};
}
function B(){
this.name = "b";
}
function C(){
this.name = "c";
this.age = 18;
this.getAge = function(){return this.age};
}
B.prototype = new A();
C.prototype = new B();

解释说明：

将对象直接创建在B对象的prototype属性中，并没有去扩展这些对象的原有原型。

通过new A ( ) 另创建了一个新的实体，然后用它去覆盖该对象的原型。

javascript是一种完全依靠对象的语言，其中没有类（class）的概念。

因此，需要直接用new A ( ) 创建一个实体，然后才能通过该实体的属性完成相关的继承工作。

完成这样的继承实现之后，对 A ( ) 所进行的任何修改、重写或删除，都不会对 B ( ) 产生影响。

只继承于原型：

function A(){}
A.prototype.name = "a";
A.prototype.toString = function(){return this.name};
function B(){}
B.prototype = A.prototype;
B.prototype.name = "b";
function C(){}
C.prototype = B.prototype;
C.prototype.name = "c";
C.prototype.age = 18;
C.prototype.getAge = function(){return this.age};

对象之间的继承（扩展内容，可以不会）（浅复制）

//该函数接受一个对象并返回它的副本
function extendCopy(p){
 var z = {}; //定义一个空的对象z
 for(var i in p){ //var i =0 ; i < p.length ; i++
 z[i] = p[i]; //都当做数组处理的话，可以理解
 }
 //uber属性：将p作为z的父级，将z指向p的原型
 z.uber = p;
 return z;
}
//定义对象a，但是对象a不是函数对象 
var a = {
 name : "a",
 toStr : function(){return this.name;}
}
//定义对象b，但是对象b不是函数对象 
var b = extendCopy(a);
b.name = "b";
b.toStr = function(){return this.uber.toStr() + " , " + this.name;};
//定义对象c，但是对象c不是函数对象 
var c = extendCopy(b);
c.name = 18;
alert(c.toStr()); //output a , b , 18

PS:教程中不少代码排版不太规范，小编这里推荐几款本站javascript代码格式化美化工具供大家使用：

JavaScript代码格式化工具：

http://tools.jb51.net/code/js

JavaScript代码美化/压缩/格式化/加密工具：

http://tools.jb51.net/code/jscompress

jsmin在线js压缩工具：

http://tools.jb51.net/code/jsmincompress

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

javascript,面向对象,程序设计,高级特性

标签：

javascript,面向对象,程序设计,高级特性

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“javascript面向对象程序设计高级特性经典教程(值得收藏)”

暂无javascript面向对象程序设计高级特性经典教程(值得收藏)的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

javascript面向对象程序设计高级特性经典教程(值得收藏)

javascript,面向对象,程序设计,高级特性

去除html代码里面的script正则方法

jQuery获取当前点击的对象元素(实现代码)

评论“javascript面向对象程序设计高级特性经典教程(值得收藏)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

javascript面向对象程序设计高级特性经典教程(值得收藏)

javascript,面向对象,程序设计,高级特性

去除html代码里面的script正则方法

jQuery获取当前点击的对象元素(实现代码)

评论“javascript面向对象程序设计高级特性经典教程(值得收藏)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存