源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-04-13 04:09 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript面向对象程序设计高级特性经典教程(值得收藏)
本文实例讲述了javascript面向对象程序设计的高级特性。分享给大家供大家参考,具体如下: [b]1.创建对象的三种方式:[/b] 第一种构造法: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);

[b]2.访问对象[/b] 访问对象的属性 中括号表示法:hero['name']。、 点号表示法:hero.name。 如果访问的属性不存在,会返回undefined。 访问对象的方法 方法名后加一对括号:hero.say()。 像访问属性一个访问方法:hero['say']()。 [b]3.删除属性与方法[/b]
//创建一个空对象
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

[b]4.使用this值[/b]
//创建一个空对象
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

[b]总结:[/b] ① 这里的this实际上引用的是“这个对象”或“当前对象”。 ② this的用法,大部分人的使用问题都比较多。所以不建议过多使用! [b]5.内建对象[/b] 内建对象大致上可以分为三个组: ① 数据封装类对象 —— 包括Object、Array、Boolean、Number和String。这些对象代表着javascript中不同的数据类型,并且都拥有各自不同的typeof返回值,以及undefined和null状态。 ② 工具类对象 —— 包括Math、Date、RegExp等用于提供遍历的对象。 ③ 错误类对象 —— 包括一般性错误对象以及其他各种更特殊的错误类对象。它们可以在某些异常发生时帮助我们纠正程序工作状态。 [b]6.Object对象[/b] Object是javascript中所有对象的父级对象,这意味着所有对象都继承于Object对象。 创建一个空对象:
var object = {};
var obj = new Object();

[b]7.Array对象[/b] 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());

[b]8.String对象[/b] 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));

[b]9.原型(prototype)[/b] 函数本身也是一个包含了方法和属性的对象。而现在我们要研究的就是函数对象的另一个属性 —— 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

[b]10.继承[/b] 如果两个类都是同一个实例的类型,那么它们之间存在着某些关系,我们把同一个实例的类型之间的泛化关系称为“继承”。 继承关系至少包含三层含义: ① 子类的实例可以共享父类的方法。 ② 子类可以覆盖父类的方法或扩展新的方法。 ③ 子类和父类都是子类实例的“类型”。 在javascript中,并不支持“继承”。也就是说,javascript中没有继承的语法。从这个意义上来说,javascript并不是直接的面向对象语言。 [b]11.原型链[/b] 原型链是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

[b]PS:教程中不少代码排版不太规范,小编这里推荐几款本站javascript代码格式化美化工具供大家使用:[/b] [b]JavaScript代码格式化工具:[/b] [url=http://tools.jb51.net/code/js]http://tools.jb51.net/code/js[/url] [b]JavaScript代码美化/压缩/格式化/加密工具:[/b] [url=http://tools.jb51.net/code/jscompress]http://tools.jb51.net/code/jscompress[/url] [b]jsmin在线js压缩工具:[/b] [url=http://tools.jb51.net/code/jsmincompress]http://tools.jb51.net/code/jsmincompress[/url] 更多关于JavaScript相关内容可查看本站专题:《[url=http://www.1sucai.cn/Special/85.htm]javascript面向对象入门教程[/url]》、《[url=http://www.1sucai.cn/Special/313.htm]JavaScript中json操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/502.htm]JavaScript切换特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/472.htm]JavaScript查找算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/462.htm]JavaScript动画特效与技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/281.htm]JavaScript遍历算法与技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/119.htm]JavaScript数学运算用法总结[/url]》 希望本文所述对大家JavaScript程序设计有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部