javascript面向对象程序设计高级特性经典教程(值得收藏)
本文实例讲述了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程序设计有所帮助。
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 这篇文章主要介绍了JS中的compose函数和pipe函数用法,想深入了解Javascript的同学,可以参考下...2021-04-27
- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30