这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 面向对象程序设计高级特性, 结合实例形式详细讲述了 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 代码格式化工具:
JavaScript 代码美化 / 压缩 / 格式化 / 加密工具:
jsmin 在线 js 压缩工具:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0722/265637.html