一、 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
a
b
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>
<!--EndFragment-->
<!--EndFragment-->
<!--EndFragment--> <!--EndFragment--><!--EndFragment--><!--EndFragment--><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变量的概念
<!--EndFragment--><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>
返回内部函数，内部函数引用外部函数的变量，使得外部函数的变量会在内存中一直存在（也使得这个变量只能被内部函数使用，即封装），这就叫“闭包”。
<!--EndFragment-->
五、利用prototype的概念实现继承<!--EndFragment-->
<!--EndFragment-->
<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>
<!--EndFragment--> <!--EndFragment--><!--EndFragment--><!--EndFragment--><!--EndFragment--><!--EndFragment--><!--EndFragment-->
扫一扫
2059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
