JavaScript 你应该知道的知识
今天醒的比较早,闲着没事,翻来js书看看, 不料有很多意想不到的收获,和大家分享!
在函数体内获取 参数(学了这么长时间,才知道有这个东西,悲催啊,我还经常纳闷,为啥那些编好的js库里,我找不到参数的用途)
<script type="text/javascript">
function a() {
if (arguments.length > 0) {
for (i in arguments) {
alert(arguments[i]);
}
}
}
window.onload = a(1, 2, 3, 4, 5);
</script>
既然可以获取到 参数,那么就可以 对传入的参数 进行验证, 正则也好,规定参数类型也好, 就都可以实现了,增加了函数的容错功能.
下面来看获取 函数 形参,和实参数目的例子:
<script type="text/javascript">
function a() {
var arguments1 = arguments.length; //获取实参的个数
var arguments2 = arguments.callee.length; // 获取形参的数目
//在 非匿名函数下, 可以使用 函数名.length获取形参 个数. 本例是 a.length
document.write("实参个数:" + arguments1 + "</br>" + "形参个数:" + arguments2);
}
window.onload = a(1, 2, 3, 4, 5);
</script>
正确理解 this
学习 this 之前,首先 要弄明白什么是 调用者和 所有者的概念.
所谓调用者就是 调用函数的域( 变量域,对象的属性域),
所有者 就是 调用函数的对象.
定义一个函数:
function a(s){ return s;}
var b=a; //把函数a 赋值给变量b
var o= { x:f} //把函数赋值给 对象o的 x属性
把函数a赋值给 变量b,则 变量域b就是 函数a的调用者. 此时变量b存储着 函数a的地址,同理,对象o的x属性域 也存储着函数a的引用地址,所以他们被称为调用者.
而 变量e属于全局对象 window所有,此时 window便是函数f的所有者,同理,o对象的x属性,属于o对象所有,所以o也是 函数a的所有者.
理解这些之后,在来看 this,
一般来说,在函数被调用过程中,关键字 this总是指向 函数的所有者.
下面看一个例子:
var x=1;
function f(){ this.x=2;}
f(); //调用 函数f
alert(x); //此时 弹出 2
通过调用函数f, 函数内部的关键字this指向的对象 是 window,所以 this.x就 等效于 window.x ,于是 它就覆盖了 全部变量 x的值.弹出2
下面在举一个 例子:
function f(){
this.x= function(x){return x}
}
f(); //调用函数f
alert(f.x(4)); //此时 会返回编译错误 f.x is not a function
那么 使用 alert(window.x(4)); 则会 弹出 4,这是为什么呢,下面解释一下:
虽然方法x在 函数f体内定义,但是它已经不属于函数f了, 因为window是 函数f的所有者,而 this就是指向 window的,所有 x方法 是window的方法.
不过 我们可以 借助 new在 实例化 函数f,则此时 函数f变成了 一个对象类,实例化以后 this指向的就是本对象了,而不是window了
function f()
{
this.x=function(s){ return x;}
}
var a=new f();
alert(a.x(4)); //此时 弹出4
动态 调用函数: call() 和apply()方法
function a(a, b) { return a + b; }
function o(a, b) {return a * b;}
alert(a.call(o, 3, 4));
通过 call方法, 把函数a绑定到 o这个伪对象上,作为 o的一个方法 出现,然后动态 调用该方法.
那么也可以转换为下面的的代码:
function a(a, b) { return a + b; }
function o(a, b) {return a * b;}
o.f=a;
alert(o.f(3, 4)); //弹出7
delete o.f; // 删除o对象的f方法
下面在看一 apply()的用法:
其实 apply和call本有本质的区别,只是 apply()传递的参数 是以 数组的形式 传递的.
function a(a, b) { return a + b; }
function o(a, b) {return a * b;}
alert(a.call(o, [3,4])); //弹出7
这两个函数给开发带来很多便利:看下面的代码:
求数组的最大值:
var a = [1, 2, 34, 233, 111];
var m = Math.max.apply(Object, a);
alert(m);
把系统函数 Math.max方法 做为 object方法来使用,
好处: 通过调用 call()和apply()动态调用函数 可以用完之后马上删除,避免资源占用,可以实现灵活的调用.
代码证明,动态调用函数后,马上删除:代码如下:
function f(){}
f.call(Object);
Object.f(); // 运行一下, 编译失败……Object.f is not a function
call()和apply()延伸 之高级用法:
call()和apply()在js手册这样定义:调用一个对象的一个方法,以另一个对象替换当前对象.
其实就是改变对象的 this 所 指向的内容.
<script type="text/javascript">
var x = "a";
function b() { this.x = "b"; }
function f() { alert(this.x); }
window.onload = function () {
f();
f.call(new b());
};
</script>
上述代码会弹出2次.一次是 a,一次是b. 就是 通过call()改变了 this的指向.
第二种用法(很霸道…)
<script type="text/javascript">
function f() {
this.a = "a";
this.b = function () { alert("b"); }
}
function e() {
f.call(this);
b();
}
window.onload = e;
</script>
通过 f.call(this) 相当于把 f的属性a和方法拷贝到 e中,以供调用.是不是很强大……
本质上将 就是 更改了 f函数内部关键字 this的指向了e,这样e就可以引用 函数f内的成员了.
