javaScript面向对象快速入门.docx

javaScript面向对象快速入门课程简介本课程主要介绍JavaScript编程中的一些重要知识，这些内容对于今后使用JSON对象、调用jQuery及其它JavaScript框架等是重要基础。本课程的所有案例代码均位于JSOOP目录下。变量的作用域和生命周期案例代码：01lifecycle.html，scripts/01lifecycle.js JavaScript中，变量默认都存在于全局上下文中，除非页面运行结束，否则该变量不会销毁 只有在函数内部使用var声明变量，该变量才不会存在于全局上下文中，而是在函数自己上下文中 if / for / while等语句块不会限制变量的生命周期和作用域。这一点与Java/C#/C+等语言完全不同。 代码分析：i1 = 1; /全局上下文内的变量i1var i2 = 2; /全局上下文内的变量i2function f1() i2 = 20; /访问全局上下文中的i2 i3 = 3; /虽然定义在f1函数中，但因为没有使用var来声明，i3仍然位于全局上下文中 var i4 = 4; / i4仅在f1函数上下文中有效(不在全局上下文中) if (true) i5 = 5; / i5仍然位于全局上下文中，if块对变量的作用于和声明周期没有影响 var i6 = 6; / i6仅在f1中有效 document.writeln(i6= + i6); /尽管已经退出了if语句块，但i6仍然存在f1();document.writeln(i3= + i3); /可以访问到f1函数中定义的i3变量/document.writeln(i4= + i4); /错误，不能访问f1函数中的局部变量i4document.writeln(i5= + i5); /可以访问到f1函数中if块内定义的i5变量 在其它JS文件中定义的变量，同样遵循上述约定o 01lifecycle.js文件内容：var i7 = 7; / i7位于全局名字空间，如果某个html页面引用了本js文件，则也可以直接访问i7function f2() i8 = 8; / i8位于全局名字空间。只要某个html页面调用了f2函数，则也可以直接访问i8o 在01lifecycle.html页面上引入该js文件o 从页面上访问js文件中定义的内容document.writeln(i7= + i7); /可直接访问外部js文件中的i7变量f2();document.writeln(i8= + i8); /可直接访问外部js文件中的i8变量 JavaScript允许变量重定义：var i9 = 9; / JS允许变量被重定义var i9 = Nine;i9 = 99.99;document.writeln(i9= + i9);对象创建案例代码：02objectcreation.html 通过语义字符串创建对象实例var o1 = ID:1, Name:Jerry, Email:;document.writeln(o1: + o1.ID + , + o1.Name + , + o1.Email + );注意：这种表达形式即JSON(JavaScript Object Notation) 通过Object类创建对象实例var o2 = new Object();o2.ID = 2;o2.Name = Jerry2;o2.Email = ;document.writeln(o2: + o2.ID + , + o2.Name + , + o2.Email + ); 通过语义字符串创建对象数组var e1 = ID: 1, Name: Jerry, Email: , ID: 2, Name: Jerry2, Email: , ID: 3, Name: Jerry3, Email: ;document.writeln(数组e1包含下列员工：)for (var i = 0; i e1.length; i+) document.writeln(e1i.ID);document.write()注意：这种表达形式是对象数组的JSON表达 通过函数定义来创建一个类定义function Employee(id, name, email) this.ID = id; this.Name = name; this.Email = email;var o4 = new Employee(4, Jerry4, );document.writeln(o4: + o4.ID + , + o4.Name + , + o4.Email + );Employee函数实际上也是Emplyee类的构造函数类成员的可访问性案例代码：03accessibility.html this关键字：在某个函数中使用this时，this代表调用该函数的对象实例 在类的构造函数中，this同样代表正在创建的对象实例function Employee(id, name, email) this.ID = id; this.Name = name; this.Email = email;在构造函数中，因为没有使用var定义变量，因此ID, Name, Email都是全局上下文变量，可以从Employee外部代码中访问，即它们都是公有成员 公有成员变量可以通过对象实例直接访问：var o1 = new Employee(1, Jerry1, );document.writeln(o1: + o1.ID + , + o1.Name + , + o1.Email + ); 如果在Employee类中定义了函数，则该函数是私有成员，不可从外部访问function Employee(id, name, email) this.ID = id; this.Name = name; this.Email = email; function Hello() 函数Hello无法从Employee类外部访问。 如果希望数据成员是私有的，必须采用var来声明该成员function Employee2(id, name, email) var ID = id; var Name = name; var Email = email;此时将不能再通过对象来直接访问ID等属性类成员函数案例代码：04method.html 除了定义成员变量，也可以在类中定义函数function Employee(id, name, email) var ID = id; var Name = name; var Email = email; / hello被定义在全局上下文中，它也并不属于类Employee hello = function () document.writeln(Hello); /尽管此处也能访问ID, Name等，但因为没有关联的对象实例，因此没有意义 /加上this前缀后，display被视为当前employee对象实例的一个成员函数 /它并不属于全局名字空间 this.display = function () /不能通过this.ID来访问成员变量。因为var ID只是一个局部变量，并不是this对象的属性。 document.writeln(ID + , + Name + , + Email); /如果定义var display = function().，那么display将变成私有函数 如果希望函数是公有的，那么可以采用this.myfunction=function()方式 如果函数私有，那么采用var myfunction=function().但是这种方法不常用 如果没有任何修饰，直接定义函数(如例子中的hello)，那么hello会被定义在全局上下文中，不是类Employee的成员函数 函数的多个实例问题var o1 = new Employee(1, Jerry1, );var o2 = new Employee(2, Jerry2, ); o1对象创建时，除了ID, Name和Email外，display函数也会被实例化 o2对象创建时，display函数会被再次实例化 因此，有多少个对象实例，就会有多少个display函数的实例。这一点与Java等语言有着重大不同在类外定义函数案例代码：05outsidemethod.html 如上节所述，类内部的函数定义会随着对象实例化被多次实例化。为解决这一问题，可以尝试在类外部定义函数：function Employee(id, name, email) this.ID = id; this.Name = name; this.Email = email; /使display指向外部的一个函数 this.display = displayEmployee;function displayEmployee() / this代表调用该函数的对象实例 /因此后面的o1.display代码意味着：this代表o1对象 document.writeln(this.ID + , + this.Name + , + this.Email + ); 类成员函数display指向类外部定义的函数displayEmployee 无论创建多少个Employee对象实例，它们的display函数都指向同一个的displayEmployee 在类外函数中访问私有成员o 类外函数不能访问类中的私有成员，因此必须为私有成员创建公有访问器function Employee2(id, name, email) var ID = id; var Name = name; var Email = email; this.getID = function () return ID; this.getName = function () return Name; this.getEmail = function () return Email; o 这样就可以从类外函数调用公有访问器了function displayEmployee2() / this代表调用此函数的对象实例 /本函数不能直接访问私有成员，必须借助属性访问器 document.writeln(this.getID() + , + this.getName() + , + this.getEmail() + );Prototype代码案例：06prototype.html JavaScript为每个类型提供了prototype，以代表该类型的原型 任何类型只有一个原型，在原型中定义的函数，被所有对象实例共享。因此使用原型也可以非常方便的定义类成员函数function Employee(id, name, email) this.ID = id; this.Name = name; this.Email = email;Etotype.display = function() / this代表调用该函数的对象实例 document.writeln(this.ID + , + this.Name + , + this.Email + ); 使用prototype后，display函数不用定义在类中，可以在类外直接定义 如果要访问私有变量，还是需要通过公有访问器function Employee2(id, name, email) var ID = id; var Name = name; var Email = email; /定义公有属性访问器 this.getID = function () return ID; this.getName = function () return Name; this.getEmail = function () return Email; Etotype.display = function () / this代表调用此函数的对象实例 /本函数不能直接访问私有成员(即使通过prototype)，必须借助属性访问器 document.writeln(this.getID() + , + this.getName() + , + this.getEmail() + );名字空间案例代码：07namespace.html 默认情况下只有一个名字空间：全局名字空间o 所有变量、函数都在全局名字空间中存在（通过var在函数中声明的内容除外）o 一个网页上很可能包含多个JS文件，这些JS文件中定义的类、函数、变量等也都处于全局名字空间中o 这样就很可能造成名字冲突。因此有必要定义子名字空间 定义子名字空间：var myApp = ; / myApp作为子名字空间定义在全局名字空间中myApp.i = 1; / i不在全局名字空间中/ Employee是定义在myApp名字空间中的myApp.Employee = function (id, name, email) this.ID = id; this.Name = name; this.Email = email;myApp.Etotype.display = function () document.writeln(this.ID + , + this.Name + , + this.Email + ); 名字空间有点类似于Java中的Package名或C#中的namespace多个名字空间案例代码：08multiplenamespace.html, scripts/08namespace1.js, scripts/08namespace2.js, scripts/08namespace3.js, 在多个JS文件中，可以定义相同或不同的名字空间o 定义不同的名字空间，可以防止类名的冲突o 如果希望在不同JS文件中定义相同名字空间，那么应该采用下列代码：var ns = ns | 上面代码表明：如果ns曾经定义过，那么继续沿用；如果没定义过，那么创建一个新名字空间 08namespace1.jsvar sales = sales | ;sales.Product = function (id, name, price) this.ID = id; this.Name = name; this.Price = price;sales.Ptotype.display = function () document.writeln(Sales Product: ID= + this.ID + , Name= + this.Name + , Price= + this.Price + ); 定义了sales名字空间，及其内部的Product类 08namespace2.jsvar sales = sales | ;sales.Customer = function (id, name, address) this.ID = id; this.Name = name; this.Address = address;sales.Ctotype.display = function () document.writeln(Sales Product: ID= + this.ID + , Name= + this.Name + , Address= + this.Address + ); 同样适用sales名字空间，并且定义了Customer类 现在Product和Customer类都属于sales名字空间 08namespace3.jsvar stock = stock | ;stock.Product = function (id, name, quantity) this.ID = id; this.Name = name; this.Quantity = quantity;stock.Ptotype.display = function () document.writeln(Stock Product: ID= + this.ID + , Name= + this.Name + , Quantity= + this.Quantity + ); 定义了stock名字空间及其内部的Product类 不同名字空间中的同名类不会发生名字冲突：var p1 = new sales.Product(101, MK101型自行车, 1999.0);var s1 = new stock.Product(101, MK101型自行车, 10);立即自行执行的函数案例代码：09IIFE.html，09IIFE.js 如果希望某个函数在定义后立即执行一次，可以使用IIFE函数(Immediately Invokded Function Expression)var result1 = (function () return Hello IIFE!;)(); 上述函数将立即执行，将结果返回给result1 IIFE函数是匿名函数 IIFE函数仅执行一次 也可以使用带参数的IIFEvar result2 = (function (num) var total = 0; for (var i = 1; i = num; i+) total += i; return total;)(10); 实际参数(10)将被传递给形式参数(num) 如需带多个参数，可用逗号隔开 可以通过IIFE来定义一个类var People = (function () function People(name, birthday) this.Name = name; this.Birthday = birthday; Ptotype.display = function () document.writeln(姓名: + this.Name + ,出生日期: + this.Birthday.toLocaleDateString(); return People;)(); 在IIFE内部定义类，然后返回该类定义 =左边的People就代表了IIFE函数内部的People类定义(请注意，该People不是对象实例，而是类定义) 在JS文件中使用IIFE(09IIFE.js文件)(function() / Employee类定义是私有的 var Employee = function (id, name, email) this.ID = id; this.Name = name; this.Email = email; Etotype.display = function () document.writeln(this.ID + , + this.Name + , + this.Email + ); / employees数组也是私有的 var employees = new Employee(101, Jerry1, ), new Employee(102, Jerry2, ), new Employee(103, Jerry3, ) ; for (var i = 0; i employees.length; i+) employeesi.display(); (); 一旦将该js文件引入到HTML页面上，该IIFE函数将自动执行 本js文件中的类、函数、变量时，如果使用了var来声明，那么就是本IIFE函数私有的，其它js文件(包括在HTML页面上的js代码)无法访问到它们：var o = new Employee(.); /错误，Employee无法访问employees./错误，employees无法访问 在js文件中使用IIFE是一种经常使用的方法使用call函数案例代码：10call.html call函数最初可用于对某个函数的调用function sum(arr) var total = 0; for (var i = 0; i arr.length; i+) total += arri; return total;var arr1 = 1, 2, 3, 4, 5;var result = sum.call(null, arr1);document.writeln(result + ); 除了可以直接调用：sum(arr1)外，也可以采用call来调用sum函数 call函数第一个参数为要调用该函数的对象实例。如果不必要通过对象实例来调用(例如，本例中sum函数就不依赖任何类或对象实例)，那么可以传null call函数的第二个参数起，应传入被调用函数的真正的参数 call函数更为主要的用途是：许在一个对象实例上调用某个函数，即使该函数并未由该对象类定义function Calculator(intArray) this.array = intArray;Ctotype.sum = function () var total = 0; for (var i = 0; i this.array.length; i+) total += this.arrayi; return total;function Math(intArray) this.array = intArray;Mtotype.sumOfSquares = function () var total = 0; for (var i = 0; i this.array.length; i+) total += this.arrayi * this.arrayi; return total; 上例中，Calculator类定义了sum函数，Math类定义了sumOfSquares函数(求平方和)var c = new Calculator(arr1);var m = new Math(arr1);result = Ctotype.sum.call(m);result = Mtotype.sumOfSquares.call(c); 通过call，对象m(Math类实例)也可以调用sum函数，尽管Math类本身没有定义sum 通过call，对象c(Calculator类实例)也可以调用sumOfSquares函数，尽管它并未定义sumOfSquares 要通过call来调用另一个类的成员函数，必须首先通过Ctotype获取该类的原型类继承案例代码：11inheritance.html 定义父类：var People = (function () function People(name, birthday) this.Name = name; this.Birthday = birthday; Ptotype.display = function () document.writeln(姓名: + this.Name + ,出生日期: + this.Birthday.toLocaleDateString(); return People;)(); 本例是通