Javascript面向对象的程序设计

最近因为在给一个小同学做学习计划，所以也记录一些知识点，便于后面的同学的学习交流。这篇文章是关于Javascript的面向对象的程序设计，主要从三个方面来介绍，1. 理解对象属性； 2. 理解并创建对象; 3. 理解继承一、理解对象属性首先我们来理解Javascript对象是什么？在Javascript中，万物皆对象。其中创建自定义对象的最简单的方式就是创建一个Object的实例，如下：var person = new Object();person.age = 29;// 对象字面量的形式：var person = { age: 29};ECMAScript中有两种属性：数据属性和访问器属性。数据属性：其中数据属性有四个描述其行为的特性：Configurable: 表示能都通过delete删除属性从而重新定义属性。Enumerable: 表示能否通过for in 循环返回属性。Writable: 表示能否修改属性的值。Value: 包含这个属性的数据值。要修改属性默认的配置，必须使用Object.defineProperty(), 这个方法接收三个参数：属性所在的对象，属性的名字和一个描述性对象。比如：var person = {};Object.defineProperty(persion, ’name’, { writable: false, value: ’Nicholas’});alert(person.name); //Nicholasperson.name = ‘Greg’;alert(person.name); //Nicholas访问器属性：访问器属性包含一对setter和getter函数。包含如下4个特性：Configurable：能否被delete删除属性重新定义。默认值：trueEnumerable：能否被for-in枚举。默认值：trueGet：读取属性值。默认值：undefinedSet：写入属性值。默认值：undefinedvar dog = { _age: 2, weight: 10}Object.defineProperty(dog, ‘age’, { get: function () { return this._age }, set: function (newVal) { this._age = newVal this.weight += 1 }})知道了对象的属性，那么我们创建对象的方式是什么呢？二、创建对象的方式创建对象的方式通常有下面几种方式：1、工厂模式我们举个例子：function createPerson(name, age, job) { var o = new object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { alert(this.name); }; Return o;}var person = createPerson(‘Greg’, 27, ‘Doctor’);工厂模式虽然解决了创建多个相似对象的问题，但却没有解决问题识别的问题（即怎样知道一个对象的类型）2、构造函数模式我们举个例子：**function Person(name, age, job) {this.name = name;this.age = age;this.job = job;this.sayName = function () { alert(this.name);};}var person = new Person(‘Greg’, 27, ‘Doctor’);**构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。这里要提的一个属性是Constructor, 每个new 出来的实例都有一个Constructor（构造函数）属性，该属性指向构造函数。对象的Constructor属性最初是用来标识对象类型的。但是，提到检测对象类型，还是instanceof操作符更好可靠一些。alert(person1 instanceof object); //true构造函数的问题问题就是，每个方法都要在每个实例上重新创建一遍，当然，可以把函数定义转移到构造函数外部来解决这个问题，如下实例：**function Person(name, age, job) {this.name = name;this.age = age;this.job = job;this.sayName = sayName;}function sayName() {alert(this.name);}var person = new Person(‘Greg’, 27, ‘Doctor’);**那么这里的问题就是：在全局作用域中定义的函数实际上被只能被某个对象调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果独享需要定义很多方法，那么就要定义很多个全局函数。下面我们来看看原型模式是不能解决这个问题。3、原型模式prototype就是通过调用构造函数而创建的那个对象实例的原型对象。我们来看下面一个例子来理解这句话：function Person() {}Person.prototype.name = “Nicholas”;Person.prototype.age = 29;Person.prototype.job = “Software Engineer”;Person.prototype.sayName = function() { alert(this.name);};var person1 = new Person();person1.sayName(); // “Nicholas”与构造函数模式不同的是，新对象的这些属性和方法是由所有实例共享的。针对这个特性，我们要注意的几个点就是。第一，如果实例的属性与方法与原型的属性和方法同名，那谁的优先级高呢？当然是创建出来的实例的属性和方法的优先级高。第二，实例的属性与方法的修改会影响原型同名的属性和方法吗？不会这里提一下hasOwnProperty(), 使用hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在原型中。第三，如何判断某个属性是存在原型中？function hasPrototypeProperty(object, name) { return !Object.hasOwnProperty(name) && (name in object);}hasOwnProperty()只在属性存在于实例中才返回true, 因此只要in操作符返回true而hasOwnProperty()返回false, 就可以确定属性是原型中的属性、这里说下Constructor, 每创建一个函数，就会同时创建它的Prototype对象，这个对象也会自动获得Constructor属性。我们来看一个例子：function Person() {}Person.prototype = { constructor: Person, name: “Nichloas”, age: 29, job: “Software Engineer”, sayName: function () { alert(this.name); } };以上代码特意包含了一个Constructor属性，并将它的值设置为Person, 从而确保了通过该属性能够访问到适当的值。但是，以这种方式重设Constructor属性会导致它的Enumerable特性被设置为true, 默认情况下原生的Constructor属性是不可枚举的。Object.defineProperty(Person.prototype, “Constructor”, { enumerable: false, value: Person});原型对象的问题：首先，它省略了为构造函数传递初始化参数这一环节。然后，原型中所有属性是被很多实例共享的，对于包含引用类型值的属性来说，问题比较突出。所以，使用最多的方式使用构造函数和原型模式4、组合使用构造函数模式和原型模式function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.friends = [“Shelby”, “Court”];} Person.prototype = { constructor: Person, sayName: function () { alert(this.name); }};var person = new Person(‘Greg’, 27, ‘Doctor’);知道了创建对象的方式，那么在Javascript中我们如何来继承对象呢？三、继承1、原型链构造函数，原型和实例的关系：每一个构造函数都也有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应的，另一个原型中也包含也包含着一个指向一个构造函数的指针，假如另一个原型又是另一个类型的实例，那么上诉关系依然成立，我们来看下面一个例子.function SuperType() { this.property = true;}SuerType.prototype.getSuperValue = function () { return this.property;};function SubType() { This.subProperty = false;}// 继承了SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function () { return this.subProperty();};var instance = new SubType();alert(instance.getSuperValue); // true这个例子中，SubType继承了SuperType，而SuperType继承了Object。如果要确定原型和实例的关系，可以用instanceOf操作符与isPropertyOF()方法。如 instance instanceOf object; // trueObject.prototype isPropertype(instance); // true但是通过原型链实现继承时，不能使用对象字面量创建原型方法。function SuperType() { this.property = true;}SuerType.prototype.getSuperValue = function () { return this.property;};function SubType() { This.subProperty = false;}// 继承了SuperTypeSubType.prototype = new SuperType();// 使用字面量添加新方法，会导致上一行代码无效SubType.prototype = { getSubValue: function () { return this.subproperty; }, someOtherMethod: function () { return false; }};var instance = new SubType();alert(instance.getSuperValue); // error接下来，我们来说下原型链继承的问题：第一，最主要的问题来自包含引用类型值的原型。包含引用类型值的原型属性会被所有实例共享，而这也正是为什么要在构造函数中，而不是在原型对象中定义属性的原因。第二，在创建子类型的实例时候，不能向超类型的构造函数中传递参数。2、借用构造函数function SuperType(name) { this.name = name;}function SubType() { // 继承了SuperType, 同时还传递了参数 SuperType.call(this, “Nicholas”); this.age = 29;}var instance = new SubType();alert(instance.name); // “Nicholas” 借用构造函数的问题，方法都在构造函数中定义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对于子类型而言也是不可见的，结果所有类型都只能使用构造函数模式，考虑到这些问题，借用构造函数的技术也是很少单独使用的。3、组合继承组合继承，指的是将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和放大的绩效，而通过借用构造函数来实现对实例属性的继承。function SuperType(name) { this.name = name; this.colors = [“red”, “blue”, “green"]} SuperType.prototype.sayName = function () { alert[this.name];};function SubType(name, age) { // 继承属性 SuperType.call(this, name); this.age = age;} // 继承方法SubType.prototype = new SuperType();SubType.prototype.sayAge = function () { alert(this.age);};var instance = new SubType(“Nicholas”, 29);instance.colors.push(“black”);alert(instance.colors); // red, blue, green, black组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为Javascript中最常见的继承模式。4、原型式继承function object(o) { function F() {} F.prototype = o; return new F();]var person = { Name: “Nicholas”, friends: [“Shelby”, “Court”, “Van"]};var anotherPerson = object(person);anotherPerson.name = “Greg”;ECMAScipt5通过新增Object.create()方法规范化了原型式继承。接着上面的例子： var anotherPerson = Object.create(person);anotherPerson.name = “Greg”;5、寄生式继承寄生式继承是与原型式继承紧密相关的一种思路，它与工厂模式类似，即创建一个仅用于封装过程的函数，该函数在内部以某种方法来增强对象，最后再像真地是它做了所有工作一样返回对象。例如：function createAnother(original) { var clone = object(original); clone.sayHi = function () { alert(‘hi’); }; return clone; }var person = { name: ’Nochplas’, friends: [’Shelby’, ‘Court’, ‘Van’]};var anotherPerson = createAnother(person);6、组合寄生式继承组合继承是Javascript最常用的继承模式，不过，组合继承最大的问题就是无论什么情况下，都会调用两次超类型构建函数：一次是在创建子类型原型的时候，另一次死在子类型构造函数内部。function SuperType(name) { this.name = name; this.colors = [“red”, “blue”, “green"]} SuperType.prototype.sayName = function () { alert[this.name];};function SubType(name, age) {. // 继承属性 SuperType.call(this, name); // 第二次调用 SuperType() this.age = age;} // 继承方法SubType.prototype = new SuperType(); // 第一次调用 SuperType()SubType.prototype.sayAge = function () { alert(this.age);};所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。不必为了制定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果制定给子类型的原型。如下：function inheritPrototype (subType, superType) { var prototype = object (superType.prototype); // 前面的原型式继承object方法 prototype.constructor = subtype; subtype.prototype = prototype;}function SuperType(name) { this.name = name; this.colors = [“red”, “blue”, “green"]} SuperType.prototype.sayName = function () { alert[this.name];};function SubType(name, age) {. // 继承属性 SuperType.call(this, name); this.age = age;} inheritPrototype(Subtype, SuperType);SubType.prototype.sayAge = function () { alert(this.age);};