一、js面向对象程序
var o1 = new Object();o1.name = "宾宾";o1.sex = "男";o1.age = "27";o1.msg = function(){console.log("姓名:"+this.name+" 性别:"+this.sex+" 年龄:"+this.age);}var o2 = new Object();o2.name = "倩倩";o2.sex = "女";o2.age = "20";o2.msg = function(){console.log("姓名:"+this.name+" 性别:"+this.sex+" 年龄:"+this.age);}//调用对象下面方法o1.msg();o2.msg();//思考:如何让代码复用。//为了解决这个,引用一种设计模式:工厂模式。就是在函数内部创建一个对象,给对象赋予属性和方法,在将对象返回即可。
二、 工厂模式
//工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象。其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可。function Person(name,sex,age){var o = new Object();o.name = name;o.sex = sex;o.age = age;o.getName = function () {console.log(this.name);}o.msg = function(){console.log("姓名:"+this.name+" 性别:"+this.sex+" 年龄:"+this.age);}return o;}var person1 = Person("彬彬","男","26");//var myArray=new Array();var person2 = Person("倩倩","女","26");person1.msg();person1.getName();person2.msg();//思考:我们创建的对象和系统对象有什么区别??//为了解决这个:我们需要在外面new一个函数就可以了,这就引出了js另一种设计模式:构造函数模式
三、构造函数模式
//此模式特点:当new去调用一个函数,这个时候函数里面的this就是创建出来的对象,而且函数返回值直接就是this,这就叫隐式返回function Person(name,sex,age){this.name = name;this.sex = sex;this.age = age;this.getName = function () {console.log(this.name);}this.msg = function(){console.log("姓名:"+this.name+" 性别:"+this.sex+" 年龄:"+this.age);}}var person1 = new Person("彬彬1","男","26");var person2 = new Person("倩倩1","女","26");person1.msg();person1.getName();person2.msg();console.log(person1.msg == person2.msg);//false//思考:如何在提供性能??也就是让公用的属性和方法在内存中只存在一份??//解决问题方法:这里用到js设计模式中另外一种模式:原型模式。就是将公用的属性和方法加载在原型上(prototype)。
四、js原型模式
//原型(prototype)要写在构造函数下面。//原型相当于CSS中Class,普通方法和属性相当于标签元素里的style。所以原型的优先级要普通方法和属性。function Person(){}Person.prototype.name = "彬彬";Person.prototype.sex = "男";Person.prototype.age = "10";Person.prototype.msg = function(){console.log("姓名:"+this.name+" 性别:"+this.sex+" 年龄:"+this.age);}var person1 = new Person();person1.msg();var person2 = new Person();person2.name = "晃晃";person2.msg();//思考:这种修改属性比较麻烦???//解决问题方法:把属性写在构造函数内,方法采用原型模式写,着就叫JS混合的模式
五、构造函数+原型的js混合的模式(推荐)
function Person(name,sex,age){this.name = name;this.sex = sex;if(age){this.age = age; //优先级高于原型}}Person.prototype.age = 10;Person.prototype.getName = function(){console.log(this.name);}Person.prototype.msg = function(){console.log("姓名:"+this.name+" 性别:"+this.sex+" 年龄:"+this.age);}var person1 = new Person("彬彬1","男",80);var person2 = new Person("倩倩1","女");person1.msg();person1.getName();person2.msg();console.log(person1.msg == person2.msg);//true