js面向对象2--js中工厂模式的演化（重要，详细）

Supanccy2013

浏览: 223662 次
性别:
来自: 深圳

最近访客更多访客>>

loginboot

sp42

dyfxfxw520

weitd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

javascript prototype 工厂模式原型模式

<%@ 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>

分享到：

js面向对象3--更简单的原型模式已经带来 ... | js面向对象1--创建对象的两种方法

2015-03-07 21:01
浏览 1159
评论(1)
分类:Web前端
查看更多

1 楼 Cobain_LI 2016-11-14

有个小失误，144和147行多了两个花括号

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js面向对象2--js中工厂模式的演化（重要，详细）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js面向对象2--js中工厂模式的演化（重要，详细）

评论

发表评论

相关推荐

window.opener属性

IE不支持字符串对象的trim方法 解决办法

js面向对象4--原型模式的不足以及顶级模式的出现

js面向对象3--更简单的原型模式已经带来的问题以及解决办法

js面向对象1--创建对象的两种方法

contentType

java iframe 父子之间的调用

JavaScript之动态添加，删除节点

JavaScript 之 call的使用

HTML实体

XHTML中使用JavaScript注意的问题

JavaScript 之 noscript ，浏览器缓存

JavaScript的输出

javaScript Window对象

JavaScprit---基础代码

JavaScprit---String类型变量的属性及方法

JavaScprit基础重要1

最近访客更多访客>>

IE不支持字符串对象的trim方法解决办法