js面向对象2--js中工厂模式的演化(重要,详细)
程序员文章站
2022-05-05 12:10:39
...
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <script type="text/javascript"> /* 总括: javascript创建对象的模式演化:1,函数创建----》2,构造函数创建 -----》3.原型创建 */ //第一种模式:函数创建模式 //因为js无法创建类,开发人员刚开始发明了一种函数,用函数来封装以特定接口创建 //对象的细节,如: function createPerson(name,age,job) { var o = new Object(); o.name = name; o.age = age; o.job = age; o.sayName = function sayName(){ alert(this.name); }; return o; } function onloadFunction() { var person1 = createPerson("陈超阳","27","java Soft Enginner") var person2 = createPerson("heshengnan","23","java Soft Enginner") console.log(person1); console.log(person2); console.log(person1.constructor); //打印出Object console.log(person2.constructor); //打印出Object } /* 函数工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题 (即怎样知道一个对象的类型) Person1,person2的构造函数都是Object,因此无法辨别对象的类型 随着JavaScript的发展,出现了一种新的工程模式--构造函数模式 */ //第二种模式:构造函数模式 /* 注意: 1,该种模式没有显示创建对象也就是没有用new Object(); 2,直接将属性和方法赋值给this对象。 3,没有return语句 4.函数名字的首字母是大写的(以便区分构造函数和一般函数的区别) 5,要创建Person的新实例必须使用new关键字 */ /* 使用new 构造函数创建对象的步骤: 1,js引擎会自动创建一个对象。 2,将构造函数的作用域赋给新对象(因此this就指向了新对象) 3,执行构造函数里面的代码(为这个新对象添加属性方法); 4,返回新对象 */ function Person(name,age,job) { this.name = name; this.age = name; this.job = job; this.sayName = function(){ alert(this.name); } } function onloadFunction2() { var person3 = new Person("陈超阳","27","java Soft Enginner"); var person4 = new Person("heshengnan","23","java Soft Enginner") console.log(person3.constructor); //打印出Person(name, age, job) console.log(person4.constructor); //打印出Person(name, age, job) //构造函数设计之初是用来标示对象类型的,但是提到检测对象类型,还是用instanceof操作符 //要更可靠一些,我们在这个例子中创建的所有对象既是Object的实例,同时也是Person的实例 //这一点可以用instanceof操作符可以得到验证 console.log(person3 instanceof Object); //true; console.log(person3 instanceof Person); //true; console.log(person4 instanceof Object); //true; console.log(person4 instanceof Person); //true; } //注意以这种方法创建的构造函数是定义在global对象(在浏览器中是window中的) /* 构造函数的缺点: 构造函数虽然好用,但并非没有缺点。使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一边 。在上面的例子中。person1和person2都有一个名字叫做sayName()的方法,但这两个sayName() 方法不是同一个function实例。不要忘记了——EcmaScript中的对象,因此每定义一个函数也就实例化了 一个对象。从逻辑上讲,此时的构造函数也可以如下面定义: */ function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayName = new Function(){alert(this.name)}; } /* 从这个角度来看构造函数,更容易明白每个Person实例都包含一个不同的function实例(以显示name属性) 的本质。说明白些,以这种方式创建函数,会导致不同的作用域链和标示符解析,但创建function新实例的 机制仍然相同。因此,不用实例上的同名函数是不相同的,一下代码可以证明这一点: console.log(person.sayName == person2.sayName); 然而,创建两个完成同样任务的function实例的确没有必要,况且有this对象在,根本不用在执行代码前就 把函数绑定到特定对象上面,大可像下面这样,通过把函数定义在构造函数外来解决这个问题: function Person (name,age,job) { this.name = name; this.age = age; this.job = job; this.sayName = sayName; } function syaName() { alert(this.name); } 在这个例子中,我们把sayName()函数的定义转移到了构造函数的外部。而在构造函数内部,我们 将sayname属性值设置成等于全局函数sayName()。这样一来,由于sayName包含的是一个指向 函数的指针,因此person1和person2对象就共享了在全局作用域中定义的同一个sayName函数 这样做确实解决了两个函数做同一件事情的问题,可是新问题又来了:在全局作用域中定义的函数 实际上只能被某个对象调用,这让全局函数有点名不副实,而更让人无法接受的是,如果对象需要定义 很多函数,那么就需要定义很多个全局函数,于是我们这个自定义的引用类型就没有封装而言了,好在 这些问题可以使用原型模式解决。 */ /* 第三:原型模型 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个 对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么 prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是 可以让所有对象共享它所包含的属性和方法,换句话说,不必在构造函数中定义对象实例的信息,而是 可以将这些信息直接添加到这些对象上,如下面的这些例子: */ function Person(){} Person.prototype.name = "chenchaoyang"; Person.prototype.age = "454"; Person.prototype.job = "soft enginner"; Person.prototype.sayName = function(){alert(this.name)}; var person1 = new Person(){}; person1.sayName(); var person2 = new Person(){}; person2.sayName(); console.log(person1.sayName = person2.sayName); //true /* 在此,我们将sayname()方法和所有属性直接添加到了Person的prototype属性中,构造函数 变成了空函数,即使如此,也仍然可以通过调用构造函数来创建对象,而且对象还会具有相同的属性 和方法,但与构造函数模式不同的是:新对象的浙西二属性和方法是所实例共享的,换句话说,person1 和person2访问的都是同一组属性和同一个sayName函数,要理解原型模式的工作原理,必须先理解 EcmScript中原型对象的性质。 理解原型对象: 无论什么时候,只要创建了一个函数,就会根据一组特定的规则为这个函数创建一个prototype属性, 这个属性指向函数的原型对象。 在默认情况下,所有原型对象都会自动获得一个constrcutor构造函数 ,这个属性包含一个纸箱prototype属性所在函数的指针。就拿全面的例子来说,Person.prototype .construtctor指向Person,而通过这个函数,我们可以继续为原型对象添加其他属性和方法。 */ /* 重要:访问一个对象 的属性的过程是这样的: 首先检查这个对象是否含有自身的属性(不是这个对象含有的prototype对象的属性),如果有就直接 访问。 如果没有就去这个对象的prototype对象中检查是否含有这个属性。 也就是 首先访问自己是否含有这个属性, 然后再检查这个对象的prototype中是否含有这个属性。 例如一下例子: */ function Person(){} Person.prototype.name = "chenchaoyang"; Person.prototype.age = 27; Person.prototype.job = "softWare enginner"; Person.prototype.syaName = function(){ console.log(this.name); } var person1 = new Person(); var person2 = new Person(); person1.name = "heshegnnan"; console.log(person1.name); //"heshegnnan"来自实例 console.log(person2.name); //"chenchaoyang"来自原型对象 /* 总结:当为对象添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性,换句话说,添加这个属性 只会阻止我们访问原型中的那个属性,但不会修改那个属性。及时这个属性设置为null,也只会在实例中 设置这个属性,而不会恢复指向原型的链接。不过,使用delete操作符则可以完全删除实例属性,从而 让我们能够重新访问原型中的属性:例如: function Person(){}; Person.prototype.name = "chenchaoyang"; Person.prototype.age = 12; Person.prototype.job = "softWare enginner"; Person.prototype.sayName = function sayName(){ alert(thos.name); } var person1 = new Person(); var person2 = new Person(); person1.name = "Greg"; alert(person1.name); //Greg 来自实例 alert(person2.name); //chenchoyang 来自原型对象 delete person1.name; alert(person1.name); //chenchaoyang 来自原型对象 使用hanOwnProperty()方法可以检测一个属性是否存在于实例中,还是存在于原型中。 这个方法(不要忘了它是从Object继承来的)只在属性存在于对象实例中时,才会返回 true,来看看一下的例子: function Person(){} Person.prototype.name = "chenchaoyang"; Person.prototype.age = 22; Person.prototype.job = "software enginner"; Person.sayName = function sayName(){ alert(this.name); var person1 = new Person(); person1.hasOwnProperty("name"); //false person1.name = "heshegnnan"; person1.hasOwnProperty("name"); //true 使用hasOwnProperty方法,什么时候访问的实例属性,什么时候访问的是原型属性就一清二楚了。 } */ </script> </head> <body onload="onloadFunction();onloadFunction2();"> </body> </html>