js面向对象学习笔记

<span style="white-space:pre"></span><script type="text/javascript"><span style="white-space:pre"></span>/*****  面向对象编程   *****/<span style="white-space:pre"></span>/** 工厂模式 **/<span style="white-space:pre"></span>function createPerson(name, age, job) {<span style="white-space:pre"></span>var o = new Object();<span style="white-space:pre"></span>o.name = this.name;<span style="white-space:pre"></span>o.age = this.age;<span style="white-space:pre"></span>o.job = this.job;<span style="white-space:pre"></span>o.sayName = function() {<span style="white-space:pre"></span>alert(this.name);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>return o;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var person1 = createPerson('tom', 12, 'code');<span style="white-space:pre"></span>var person2 = createPerson('nick', 20, 'code1');<span style="white-space:pre"></span>/** 构造函数模式 **/<span style="white-space:pre"></span>function Person(name, age, job) {<span style="white-space:pre"></span>this.name = name;<span style="white-space:pre"></span>this.age = age;<span style="white-space:pre"></span>this.sayName = function () {<span style="white-space:pre"></span>alert(this.name);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var person1 = new Person('tom', 20, 'ad');<span style="white-space:pre"></span>var person2 = new Person('nick', 30, 'db');<span style="white-space:pre"></span>function Person(name, age ,job) {<span style="white-space:pre"></span>this.name = name;<span style="white-space:pre"></span>this.age = age;<span style="white-space:pre"></span>this.job = job;<span style="white-space:pre"></span>//每次创建对象都会new 一个新的function对象<span style="white-space:pre"></span>this.sayName = new Function("alert(this.name)");<span style="white-space:pre"></span>}<span style="white-space:pre"></span>// 使用全局函数不符合类的封装<span style="white-space:pre"></span>function Person(name, age ,job) {<span style="white-space:pre"></span>this.name = name;<span style="white-space:pre"></span>this.age = age;<span style="white-space:pre"></span>this.job = job;<span style="white-space:pre"></span>this.sayName = sayName; //调用全局函数<span style="white-space:pre"></span>}<span style="white-space:pre"></span>function sayName() {<span style="white-space:pre"></span>alert(this.name);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>/**  原型模式  **/<span style="white-space:pre"></span>function Person() {<span style="white-space:pre"></span>}<span style="white-space:pre"></span>Person.prototype.name = 'nick';<span style="white-space:pre"></span>Person.prototype.age = 20;<span style="white-space:pre"></span>Person.prototype.sayName = function () {<span style="white-space:pre"></span>alert(this.name);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var person1 = new Person();<span style="white-space:pre"></span>var person2 = new Person();<span style="white-space:pre"></span>person1.sayName();<span style="white-space:pre"></span>person2.sayName();<span style="white-space:pre"></span>alert(person1.sayName == person2.sayName);<span style="white-space:pre"></span>//获取所有可枚举属性数组<span style="white-space:pre"></span>Object.keys(Person.prototype); // [name,age,sayName];<span style="white-space:pre"></span>person1.name = 'tom';<span style="white-space:pre"></span>person1.age = 30;<span style="white-space:pre"></span>Object.keys(person1);//[name,age]<span style="white-space:pre"></span>//获得所有属性，无论是否可枚举<span style="white-space:pre"></span>Object.getOwnPropertyNames(Person.prototype);//[constructor,name,age,job,sayName]<span style="white-space:pre"></span>/** 验证实例属性属于原型对象而不属于实例 **/<span style="white-space:pre"></span>function hasPrototypeProperty(object, name) {<span style="white-space:pre"></span>// object.hasOwnProperty(name) 验证实例中是否有该属性，是：true,否，false<span style="white-space:pre"></span>// name in object 验证该属性是否属于该对象的原型对象属性或类属性<span style="white-space:pre"></span>return !object.hasOwnProperty(name) && (name in object);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>/** 组合使用构造函数模式和原型模式 **/<span style="white-space:pre"></span>function Person(name, age, job) {<span style="white-space:pre"></span>this.name = name;<span style="white-space:pre"></span>this.age = age;<span style="white-space:pre"></span>this.job = job;<span style="white-space:pre"></span>this.friends = ['Shelby', 'courty'];<span style="white-space:pre"></span>}<span style="white-space:pre"></span>Person.prototype = {<span style="white-space:pre"></span>constructor: Person,<span style="white-space:pre"></span>sayName: function() {<span style="white-space:pre"></span>alert(this.name);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var person1 = new Person('nick', 29, 'software engin');<span style="white-space:pre"></span>var person2 = new Person('tom', 30, 'fadsf');<span style="white-space:pre"></span>person1.friends.push('van');<span style="white-space:pre"></span>alert(person1.friends);//Shelby,courty,van<span style="white-space:pre"></span>alert(person2.friends);//Shelby,conrty<span style="white-space:pre"></span>alert(person1.friends == person2.friends); //false<span style="white-space:pre"></span>alert(person1.sayName == person2.sayName); //true<span style="white-space:pre"></span>/**  动态原型模式 **/<span style="white-space:pre"></span>function Person(name, age, job) {<span style="white-space:pre"></span>this.name = name;<span style="white-space:pre"></span>this.age = age;<span style="white-space:pre"></span>this.job = job;<span style="white-space:pre"></span>//先检查后初始化<span style="white-space:pre"></span>if (typeof this.sayName != "function") {<span style="white-space:pre"></span>Person.prototype.sayName = function() {<span style="white-space:pre"></span>alert(this.name);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>}<span style="white-space:pre"></span>}<span style="white-space:pre"></span>/** 寄生虫模式  **/<span style="white-space:pre"></span>function Person(name, age, job) {<span style="white-space:pre"></span>var o = new Object();<span style="white-space:pre"></span>o.name = name;<span style="white-space:pre"></span>o.age = age;<span style="white-space:pre"></span>o.job = job;<span style="white-space:pre"></span>o.sayName = function() {<span style="white-space:pre"></span>alert(this.name);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>return o;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//例子<span style="white-space:pre"></span>function SpecialArray() {<span style="white-space:pre"></span>//创建数组<span style="white-space:pre"></span>var values = new Array();<span style="white-space:pre"></span>//添加值<span style="white-space:pre"></span>values.push.apply(values, arguments);<span style="white-space:pre"></span>//添加方法<span style="white-space:pre"></span>values.toPipedString = function() {<span style="white-space:pre"></span>return this.join("|");<span style="white-space:pre"></span>};<span style="white-space:pre"></span>//返回数组<span style="white-space:pre"></span>return values;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var colors = new SpecialArray("red",'blue','green');<span style="white-space:pre"></span>alert(colors.toPipedString()); //"red|blue|green"<span style="white-space:pre"></span>/** 稳妥构造函数模式 **/<span style="white-space:pre"></span>//用于在安全环境中，或者防止数据被其它程序改动时使用<span style="white-space:pre"></span>function Person(name, age, job) {<span style="white-space:pre"></span>var o = new Object();<span style="white-space:pre"></span>o.sayName = function () {<span style="white-space:pre"></span>};<span style="white-space:pre"></span>return o;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//除了使用sayName方法之外，没有其它办法访问name的值<span style="white-space:pre"></span>/****  继承  ****/<span style="white-space:pre"></span>/** 原型链 **/<span style="white-space:pre"></span>function SuperType() {<span style="white-space:pre"></span>this.property = true;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>SuperType.prototype.getSuperValue = function() {<span style="white-space:pre"></span>return this.property;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>function SubType() {<span style="white-space:pre"></span>this.subproperty = false;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//继承了SuperType<span style="white-space:pre"></span>SubType.prototype = new SuperType();<span style="white-space:pre"></span>SubType.prototype.getSubValue = function() {<span style="white-space:pre"></span>return this.subproperty;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var instance = new SubType();<span style="white-space:pre"></span>alert(instance.getSuperValue()); //true<span style="white-space:pre"></span>/** 借用构造函数 **/<span style="white-space:pre"></span>function SuperType() {<span style="white-space:pre"></span>this.colors = ['red','blue','green'];<span style="white-space:pre"></span>}<span style="white-space:pre"></span>function SubType() {<span style="white-space:pre"></span>//继承SuperType<span style="white-space:pre"></span>SuperType.call(this);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var instance1 = new SubType();<span style="white-space:pre"></span>instance1.colors.push('black');<span style="white-space:pre"></span>alert(instance1.colors); //'red,blue,green,black';<span style="white-space:pre"></span>var instance2 = new SubType();<span style="white-space:pre"></span>alert(instance2.colors); //'red,blue,green';<span style="white-space:pre"></span>//传递参数<span style="white-space:pre"></span>function SuperType(name) {<span style="white-space:pre"></span>this.name = name;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>function SubType() {<span style="white-space:pre"></span>//继承SuperType, 同时传递参数<span style="white-space:pre"></span>SuperType.call(this, 'Nicholas');<span style="white-space:pre"></span>//实例属性<span style="white-space:pre"></span>this.age = 29;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var instance = new SubType();<span style="white-space:pre"></span>alert(instance.name); //'Nicholas';<span style="white-space:pre"></span>alert(instance.age); //29<span style="white-space:pre"></span>/** 组合继承 **/<span style="white-space:pre"></span>function SuperType(name) {<span style="white-space:pre"></span>this.name = name;<span style="white-space:pre"></span>this.colors = ['red','blue','green'];<span style="white-space:pre"></span>}<span style="white-space:pre"></span>SuperType.prototype.sayName = function() {<span style="white-space:pre"></span>alert(this.name);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>function SubType(name, age) {<span style="white-space:pre"></span>//继承属性<span style="white-space:pre"></span>SuperType.call(this, name); //第二次调用SuperType<span style="white-space:pre"></span>this.age = age;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>SubType.prototype = new SuperType(); //第一次调用SuperType<span style="white-space:pre"></span>SubType.prototype.sayAge = function() {<span style="white-space:pre"></span>alert(this.age);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var instance1 = new SubType('Nicholas', 29);<span style="white-space:pre"></span>instance1.colors.push('black');<span style="white-space:pre"></span>alert(instance1.colors); // 'red, blue, green, black';<span style="white-space:pre"></span>instance1.sayName(); //Nicholas;<span style="white-space:pre"></span>instance1.sayAge();//29<span style="white-space:pre"></span>var instance2 = new SubType('Gren', 27);<span style="white-space:pre"></span>alert(instance2.colors); //'red,blue,green';<span style="white-space:pre"></span>instance2.sayName(); // Gren<span style="white-space:pre"></span>instance2.sayAge(); //27<span style="white-space:pre"></span>// 在第一次调用SuperType构造函数时，SubType.prototype会得到两个属性：name和colors；她们都是SuperType的实例属性,<span style="white-space:pre"></span>//只不过现在位于SubType的原型中.当调用SubType的构造函数时，又条用了一<span style="white-space:pre"></span>//次SuperType构造函数，这一次又在新对象上创建了实例属性：name和colors。<span style="white-space:pre"></span>//于是这两个属性就屏蔽了原型中的同名属性<span style="white-space:pre"></span>/** 原型式继承 **/<span style="white-space:pre"></span>function object(o) {<span style="white-space:pre"></span>function F() {};<span style="white-space:pre"></span>F.prototype = o;<span style="white-space:pre"></span>return new F;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var person = {<span style="white-space:pre"></span>name: 'tom',<span style="white-space:pre"></span>friends: ['shelby', 'court', 'van']<span style="white-space:pre"></span>};<span style="white-space:pre"></span>var anotherPerson = object(person);<span style="white-space:pre"></span>anotherPerson.name = 'Greg';<span style="white-space:pre"></span>anotherPerson.friends.push('Rob');<span style="white-space:pre"></span>var yetAnotherPerson = object(person);<span style="white-space:pre"></span>yetAnotherPerson.name = 'Linda';<span style="white-space:pre"></span>yetAnotherPerson.friends.push('Barbie');<span style="white-space:pre"></span>alert(person.friends); // shelby,court,van,Rob,Barbie<span style="white-space:pre"></span>/** 寄生式继承 **/<span style="white-space:pre"></span>function createAnother(original) {<span style="white-space:pre"></span>var clone = object(original); //通过调用函数创建一个新对象<span style="white-space:pre"></span>clone.sayHi = function() { //以某种方式来增强对象<span style="white-space:pre"></span>alert('Hi');<span style="white-space:pre"></span>};<span style="white-space:pre"></span>return clone;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>var person = {<span style="white-space:pre"></span>name: 'tom',<span style="white-space:pre"></span>friends: ['shelby', 'court', 'van']<span style="white-space:pre"></span>};<span style="white-space:pre"></span>var anotherPerson = createAnother(person);<span style="white-space:pre"></span>anotherPerson.sayHi(); //hi<span style="white-space:pre"></span>/** 寄生组合模式 **/<span style="white-space:pre"></span>function inheritPrototype(SubType, SuperType) {<span style="white-space:pre"></span>var prototype = object(SuperType.prototype); //创建对象<span style="white-space:pre"></span>prototype.constructor = SubType; //增强对象<span style="white-space:pre"></span>SubType.prototype = prototype;   //指定对象<span style="white-space:pre"></span>}<span style="white-space:pre"></span>function SuperType(name) {<span style="white-space:pre"></span>this.name = name;<span style="white-space:pre"></span>this.colors = ['red', 'blue', 'green'];<span style="white-space:pre"></span>}<span style="white-space:pre"></span>SuperType.prototype.sayName = function() {<span style="white-space:pre"></span>alert(this.name);<span style="white-space:pre"></span>};<span style="white-space:pre"></span>function SubType(name, age) {<span style="white-space:pre"></span>SuperType.call(this, name);<span style="white-space:pre"></span>this.age = age;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>inheritPrototype(SubType, SuperType);<span style="white-space:pre"></span>SubType.prototype.sayAge = function() {<span style="white-space:pre"></span>alert(this.age);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//此模式的高效率体现在它只条用了一次SuperType的构造函数，并且因此避免了<span style="white-space:pre"></span>//在SubType.prototype上面创建不必要的。多余的属性。与此同时，原型链还<span style="white-space:pre"></span>//能保持不变；因此，还能够正常使用instanceof 和 isPrototypeOf()<span style="white-space:pre"></span></script>