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


Posted in Javascript onMay 19, 2016

本文实例讲述了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代码格式化工具:

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

jsmin在线js压缩工具:

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

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

Javascript 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 #Javascript
jquery显示隐藏元素的实现代码
May 19 #Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 #Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 #Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 #Javascript
js获取Html元素的实际宽度高度的方法
May 19 #Javascript
js获取隐藏元素宽高的实现方法
May 19 #Javascript
You might like
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
jquery自定义表格样式
2015/11/23 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
python 实现堆排序算法代码
2012/06/05 Python
Python高效编程技巧
2013/01/07 Python
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
大学生表扬信范文
2014/01/09 职场文书
晚会邀请函范文
2014/01/24 职场文书
服务承诺书怎么写
2014/05/24 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书