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

前端之家收集整理的这篇文章主要介绍了javascript面向对象程序设计高级特性经典教程(值得收藏)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

第一种构造法:new Object

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

第三种构造法:定义类型

2.访问对象

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

3.删除属性方法

增加属性方法 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值

增加属性方法 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对象。

创建一个空对象:

7.Array对象

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

创建一个空Array对象:

例如1:

方法,将字符串切割成一个数组 var arr = str.split(","); //利用Array对象的reverse()方法,将数组中元素的顺序颠倒。 arr = arr.reverse(); //测试打印 alert(arr.toString());

8.String对象

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

例如1:

函数 * * 第一个参数:要判断的字符串 * * 第二个参数:指定的字符串 */ 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。

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

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

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

上面的方式,也可以这样去做:

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

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

扩展内建对象

增加一个判断的函数 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并不是直接的面向对象语言。

11.原型链

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

例如:

解释说明:

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

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

javascript是一种完全依靠对象的语言,其中没有类(class)的概念。

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

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

只继承于原型:

对象之间的继承(扩展内容,可以不会)(浅复制)

函数接受一个对象并返回它的副本 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,18

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

JavaScript代码格式化工具:

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

jsmin在线js压缩工具:

更多关于JavaScript相关内容可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》及《

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

原文链接:https://www.f2er.com/js/48634.html

猜你在找的JavaScript相关文章