JavaScript中的对象

lzh166

浏览: 298110 次
性别:
来自: 北京

最近访客更多访客>>

sshcainiao

linziyuu

yzs1013

rurama

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

JavaScript prototype EXT F#C

一、 JavaScript

中的类型

二、JavaScript中的原型（prototype）

每个构造函数对象都有原型对象

<script type="text/javascript">
function FF(){};
alert(FF.prototype); // FF函数的一个原型对象
var f = new FF();//创建一个object对象
alert(f.prototype); //undefined  object对象是没有prototype原型的
var g = {}; 
alert(g.prototype); //undefined
alert(f.constructor == FF); // true 对象的构造函数其实就是函数本身
alert(FF.prototype.constructor == f.constructor); // true 函数原型对象的构造函数与f对象的构造函数为同一个函数

//给函数添加a属性
FF.a = "FF.a";
alert(FF.a); //FF.a
//给对象添加a属性
f.a = "f.a";
alert(f.a); //f.a
//给函数的原型对象添加a属性
FF.prototype.a = "FF.prototype.a";
alert(FF.prototype.a); // FF.prototype.a
//给函数的原型对象添加b属性
FF.prototype.b = "FF.prototype.b";
alert(f.b); //FF.prototype.b 其搜索过程：f对象中构造函数中是否有b属性，没有，再去其原型对象有没有b属性
alert(FF.b); //undefined  从函数中不找不到b属性，无法得到原型对象中的属性
</script>

这些概念之间的关系如下：

三、Javascript的定义阶段和执行阶段以及变量作用域的概念

所谓定义：比如：用var关键字定义变量，用function关键字定义函数（定义函数，就是定义一个新的作用域），如果不用var关键字来定义变量，则这些变量就是全局变量。

所谓执行：比如：用new关键字创建新的对象，用=赋值，用()来执行函数等等。

Javascript运行的顺序是：先定义后执行。定义的时候，确定变量的作用域（所谓变量的作用域，即定义变量可以在哪里被访问到）；执行的时候，会有一个执行上下文（this变量）。

下面的例子解释了这些概念：

* 全局作用域：（window 对象中的属性就是全局变量）

<script type="text/javascript">
//a、b都为全局变量
a = 10;
var b = 20;

function ABC(){
	alert("good!");
}

alert(a); //10
alert(b); //20
alert(ABC);//函数代码function ABC(){	alert("good!");}
alert(window.a);//10
alert(window.b);//20
alert(window.ABC);//函数代码
ABC();//good!
window.ABC();//good!
new ABC();//good!

function H1(){
	alert(b); //在这个函数内部也可以访问，因为b变量是全局的
}
H1();//20

function H2(){
	test = "hello"; //这里，没有用var关键字，定义的是一个全局变量
}
H2();//执行
alert(test); // hello

</script>

总是会有一个window对象，它就是全局的，在javascript任何函数外部定义的变量、函数，或者在函数内部不用var关键字定义的变量，都是全局变量，它的作用域是全局的！

* 定义和执行的先后顺序问题：

<script type="text/javascript">

alert(Hello); //这里将弹出函数的定义信息

Hello(); // good!

//定义
function Hello(){
	alert("good!");
}

</script>

上述代码的执行结果表明，用function定义的变量Hello（它是一个全局变量），早于执行过程。先定义后执行，执行是一行一行代码往下执行，定义早于执行，定义就是确定变量及其作用域。

<script type="text/javascript">
alert(a);
alert(b);
alert(c);
var a = "a";
function a(){}
function b(){}
var b = "b";
var c = "c";
var c = function(){}
alert(a);
alert(b);
alert(c);

</script>

上述代码的结果，如果你能够完全正确的回答出来的话，那么证明你理解了定义和执行先后的概念！

答案：function a(){}

function b(){}

Undefined

function(){}

* 如何创建新的作用域？ - 可以利用function来创建新的作用域

<script type="text/javascript">

alert(H1); //将得到函数的定义

alert(H2); //将出错，H2被定义到H1的内部，所以在H1的外部看不到这个变量

H1(); //可以执行，因为在这里能够看到H1

function H1(){

	alert(H2); //将得到函数的定义
	alert(H3); //将出错，H3被定义到H2的内部，所以在H2的外部看不到这个变量
	
	H2(); //可以执行，因为在这里可以看到H2
	function H2(){
		alert(H3); //将得到函数的定义
		function H3(){
		}
	}
}

</script>

<script type="text/javascript">

(function(){
	function hello(){ //这个定义，能够覆盖全局定义
		alert("ok");
	}
	hello(); //调用的是内部函数，因为在本命名空间中，它代表的就是内部函数定义
})(); //定义一个函数（通常是一个匿名函数），并立刻执行，可以将代码进行封装，避免代码中的定义污染全局命名空间

function hello(){ //全局函数
	alert("hh");
}
hello();

</script>

定义一个匿名函数，并执行，可以将代码封装到某个作用域中执行，这样可以避免污染全局命名空间！

关于避免污染命名空间的问题，在Ext中提供了一个专门的namespace函数，可以定义新的命名空间，如下例所示：

	
<script type="text/javascript">

//Ext中的命名空间

//比如，我们想给我们自己的项目定义一些工具函数，但又不想污染全局命名空间
Ext.namespace("com.bjsxt.crm.utils");

com.bjsxt.crm.utils.dosomething = function(){
	alert("dosomething");
}

com.bjsxt.crm.utils.dosomething();

</script>

* this变量的概念

<script type="text/javascript">

//理解javascript中的this
var a = 100;

alert(a); // 100
alert(this.a); // 100
alert(window.a); // 100

</script>

<script type="text/javascript">

//理解javascript中的this
function GG(){
	var a = 1;
	alert(this.a);
}

a = 100;

GG(); // 100
var g = new GG(); //undefined
</script>

this变量，在执行的时候确定，表示执行的上下文。GG()函数在全局环境中执行，this表示window对象；当通过new操作符来执行构造函数的时候，构造函数内部的this表示的是由new操作符所创建的的对象！

<script type="text/javascript">

//理解javascript中的this
function ABC(){
	this.something = "something";
}

ABC();

alert(something); // 弹出something

</script>

ABC()在全局环境中执行，所以执行的时候，this表示window对象，因此后面的alert能够弹出相应的值。

<script type="text/javascript">

//理解javascript中的this
function ABC(){
	this.something = "something";
}

var abc = new ABC();

alert(something); // 出错！！
alert(abc.something); //弹出something，这相当于给abc对象定义了一个公有成员变量

</script>

new ABC()，导致构造函数内部的this在执行时表示这个abc对象，因此第一句alert出错，因为window全局环境中没有something变量，但是第二句alert将能够得到正确的结果。

<script type="text/javascript">
var x = "I'm a global variable!";
function method() {
    alert(x);
    alert(this.x);
}
function class1() {
    // private field
    var x = "I'm a private variable!";
    // private method
    function method1() { //内部函数
        alert(x);
        alert(this.x);
    }
    var method2 = method;
    // public field
    this.x = "I'm a object variable!";
    // public method
    this.method1 = function() {
        alert(x);
        alert(this.x);
    }
    this.method2 = method;
    // constructor
    {
        this.method1();     // I'm a private variable!
                            // I'm a object variable!
        this.method2();     // I'm a global variable!
                            // I'm a object variable!
        method1();          // I'm a private variable!
                            // I'm a global variable!
        method2();          // I'm a global variable!
                            // I'm a global variable!
        method1.call(this); // I'm a private variable!
                            // I'm a object variable!
        method2.call(this); // I'm a global variable!
                            // I'm a object variable!
    }
}
 
var o = new class1();
method();       // I'm a global variable!
                // I'm a global variable!
o.method1();    // I'm a private variable!
                // I'm a object variable!
o.method2();    // I'm a global variable!
                // I'm a object variable!
</script>

记住：内部函数（或称为私有函数）中的this代表window全局对象。但通过call方法，可以改变函数内部的this变量。

<script type="text/javascript">

//理解javascript中的this
var obj1 = {
	prop1:"obj1:世界，你好",
	hello:function(){
		alert("obj1 alert:"+this.prop1);
	}
};

var obj2 = {
	prop1:"obj2:世界，你好",
	hello:function(){
		alert("obj2 alert:"+this.prop1);
	}
};

obj1.hello();
obj2.hello();

//通过call方法，可以改变函数内部的this的值
obj1.hello.call(obj2);

</script>

上述例子，演示了如何通过call操作改变this变量的。

<script type="text/javascript">

//理解javascript中的this
function GG(){
	this.something = 200;
	alert(this.something);
	function G1(){
		alert(this.something);
		function G2(){
			alert(this.something);
		}
		G2();
	}
	G1();
}

something = 100;

var g = new GG(); // 100

</script>

再一次演示：内部函数中的this表示全局的window对象

<script type="text/javascript">

//理解javascript中的this
function GG(){
	this.something = 200;
	function G1(){
		function G2(){
			alert(this.something);
		}
		G2.call(this);
	}
	G1.call(this);
}

something = 100;

var g = new GG();

</script>

再一次演示：如何改变内部函数中的this变量

下面fn.call(23,50,51,52)中的23为this的值

<script type="text/javascript">

//理解javascript中的this
//x,y是函数的形参
function fn(x,y){
	alert(this);
	
	//arguments是函数的实参
	alert("传进来的参数长度是？ - " + arguments.length);
	alert(x + y);
}

fn(34,50,80); //object,3,84

fn.call(23,50,51,52); //23,3,101

</script>

演示：如何改变函数中的this变量

四、Javascript中的闭包

<script type="text/javascript">
 function say667() { 
 // Local variable that ends up within closure  
var num = 666;  
var sayAlert = function() { alert(num); }  
num++; 
 return
 sayAlert; } 
var sy = say667(); 
sy(); 
alert(sy);
 </script>

返回内部函数，内部函数引用外部函数的变量，使得外部函数的变量会在内存中一直存在（也使得这个变量只能被内部函数使用，即封装），这就叫“闭包”。

五、利用prototype的概念实现继承

<script type="text/javascript">

//理解javascript中的继承
function Animal(){
	this.a = "aaa";
}
Animal.prototype.name = "动物";
Animal.prototype.sex = "1";

var aa = new Animal();
alert(aa.a); // aaa
alert(aa.name); //动物
alert(aa.sex); //1

function Pig(){
	this.b = "bbb";
}
Pig.prototype = new Animal(); //实现了继承关系

var p = new Pig();

//搜索顺序：p对象 -> p的原型对象 ->p的原型对象的原型对象 -> ....
alert(p.a); // aaa
alert(p.name); //动物
alert(p.sex); //1
alert(p.b); //bbb

function LittlePig(){
}
LittlePig.prototype = new Pig();

var lp = new LittlePig();
alert(lp.name); // 动物
alert(lp.a); // aaa
alert(lp.b); // bbb

</script>

利用Ext.extend方法实现继承

<script type="text/javascript">

function HH(){
}
HH.prototype.a = 1;
HH.prototype.b = 2;
HH.prototype.c = "ccc";
HH.prototype.d = "ddd";

//创建的GG是一个构造函数对象
var GG = Ext.extend(HH,{a:3,b:4,d:"d"});

var g = new GG();

alert(g.a); // 3
alert(g.b); // 4
alert(g.c); // ccc
alert(g.d); // d
</script>