zoukankan      html  css  js  c++  java
  • Javascript类,prototype研究。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试Javascript类</title>
    </head>
    
    <body>
    <div id="dbg">
    </div>
    <script type="text/javascript">
    function p(str)
    {
    	if(str.indexOf('err')!=-1) str = '<font color="#ff0000">'+str+'</font>';
    	str = str.replace(/(pro_fun)/g,'<font color="#ff00ff">$1</font>');
    	str = str.replace(/(pub_fun)/g,'<font color="#0000ff">$1</font>');
    	
    	g('dbg').innerHTML = g('dbg').innerHTML+'<br />'+str;
    }
    function g(id)
    {
    	return document.getElementById(id);
    }
    function f1()
    {
    	var pri_var = 'pri_var';
    	this.pub_var = 'pub_var';
    	this.pub_fun = function()
    	{
    		try{
    			p('pub_fun->pri_var:'+pri_var);
    		}catch(e){
    			p('pub_fun->pri_var(err):'+e);
    		}
    		try{
    			p('pub_fun->pub_var:'+this.pub_var);
    		}catch(e){
    			p('pub_fun->pub_var(err):'+e);
    		}
    		//---------------------------------------------
    		try{
    			p('pub_fun->pro_var:'+this.pro_var);
    		}catch(e){
    			p('pub_fun->pro_var(err):'+e);
    		}
    		//---------------------------------------------
    		try{
    			this.pro_fun();
    		}catch(e){
    			p('cls.pub_fun->pro_fun(err):'+e);
    		}
    	}
    	this.pub_chgv=function(){//注意下面有一个f1.prototype.pub_chgv,而被认可的是这个函数,ie9 ff
    		this.pub_var = 'pub_var->pub_chgv';	
    		this.pro_var = 'pro_var->pub_chgv';	
    		p('pub_chgv->pub_var: '+this.pub_var);
    		p('pub_chgv->pro_var: '+this.pro_var);
    	}
    }
    f1.prototype.pro_var = 'pro_var';
    f1.prototype.pro_fun = function(){
    	try{
    		p('pro_fun->pri_var:'+pri_var);
    	}catch(e){
    		p('pro_fun->pri_var(err):'+e);
    	}
    	try{
    		p('pro_fun->pri_var:'+this.pri_var);
    	}catch(e){
    		p('pro_fun->pri_var(err):'+e);
    	}
    	try{
    		p('pro_fun->pub_var:'+this.pub_var);
    	}catch(e){
    		p('pro_fun->pub_var(err):'+e);
    	}
    	//---------------------------------------------
    	try{
    		p('pro_fun->pro_var:'+this.pro_var);
    	}catch(e){
    		p('pro_fun->pro_var(err):'+e);
    	}
    }
    f1.prototype.pub_chgv=function(){
    	this.pub_var = 'pub_var->pro_chgv';	
    	this.pro_var = 'pro_var->pro_chgv';		
    	p('pro_chgv->pub_var: '+this.pub_var);
    	p('pro_chgv->pro_var: '+this.pro_var);
    }
    f1.prototype.pro_getv=function(){
    	p('<hr>pro_getv->pub_var: '+this.pub_var);
    	p('pro_getv->pro_var: '+this.pro_var);
    	p('pro_getv->pro_var: '+f1.pro_var+' <-- 这说明:将prototype增加的属性或者方法称为静态的方法或者属性并不正确,因为它不能不实例化直接调用');
    }
    var CLA = new f1();
    var clb = new f1();
    CLA.pub_fun();
    
    try{
    	f1.pro_getv();
    }catch(e){
    	p('f1.pro_getv(err):'+e+' <-- 这说明:将prototype增加的属性或者方法称为静态的方法或者属性并不正确,因为它不能不实例化直接调用');
    }
    
    
    //一个实例改变私有变量或者prototype变量,不会影响其它的实例的值(改变自己的prototype属性会复制一份给自己,根据作用于原理(从自身向上查),自己有一个复制之后,就不再受prototype影响)
    CLA.pub_chgv();
    clb.pro_getv();
    //---------------------------------------------
    
    //一个实例改变增加或者改变方法属性,都不会影响其它实例
    CLA.pro_getv=function(){
    	p('<hr><font color="#00ffff">new by instance</font> pro_getv->pub_var: '+this.pub_var);
    	p('<font color="#00ffff">new by instance</font> pro_getv->pro_var: '+this.pro_var+' <--- 注意pro_var在前面通过CLA.pub_chgv()改变了值,它就不再是引用prototype的值了,因此它不受prototype的影响了');
    	p('<font color="#00ffff">new by instance</font> pro_getv->pro_var: '+f1.pro_var);
    }
    clb.pro_getv();
    //---------------------------------------------
    
    
    //通过原始类的.prototype去改变属性或者方法,会使所有的未通过实例自身改变属性或者方法的实例的也变化
    f1.prototype.pro_var = 'pro_var changed';
    f1.prototype.pro_getv=function(){
    	p('<hr>new 1 pro_getv->pub_var: '+this.pub_var);
    	p('new 1 pro_getv->pro_var: '+this.pro_var);
    	p('new 1 pro_getv->pro_var: '+f1.pro_var);
    }
    clb.pro_getv();
    //CLA 通过实例自身改变过pro_getv方法,它的方法pro_getv没有被prototype.pro_getv改变,但可能是存在着两个pro_getv,一个在CLA下,一个在f1.prototype下,当CLA(实例)下找不到,就会去原型(类定义)去找
    //CLA.pub_chgv改变了CLA的pro_var,此时无法通过prototype去修改CLA的pro_var
    CLA.pro_getv();
    //---------------------------------------------
    
    /*
    总结:
    1 类(function)声明时定义的变量:
    		a、 var 定义的,只有类声明内定义的函数(this.fun=function(){}或者function fun(){})能够访问,多个实例之间相互不影响,也不能prototype改变
    		b、 this 定义的变量,prototype定义的函数或者类声明内定义的函数(this.fun=function(){}确定可以,function func(){}未实验)都可以访问(使用this.var_name访问);多个实例之间相互不影响,也不能prototype改变
    2 prototype定义的变量或者方法,新建实例时只是建立了一个引用,如果实例改变变量或者方法,那么方法或者变量将指向新的值,因此,方法或者变量就不再随着prototype变化而变化
    */
    </script>
    
    </body>
    </html>

    pro = prototype

    pri = private

    pub = public
     

  • 相关阅读:
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 455 分发饼干
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    Java实现 LeetCode 454 四数相加 II
    FFmpeg解码H264及swscale缩放详解
    linux中cat more less head tail 命令区别
    C语言字符串操作总结大全(超详细)
    如何使用eclipse进行嵌入式Linux的开发
  • 原文地址:https://www.cnblogs.com/lein317/p/5067627.html
Copyright © 2011-2022 走看看