资讯专栏INFORMATION COLUMN

深入理解函数--arguments和this关键字

lemon / 1881人阅读

摘要:有些在页面未加载完成时执行的函数可能会找不到对象对象未加载完成,会出现错误。以上文章中,如有错误,请及时指正谢谢著

写在前面:

上一章讲解了深入函数,但是遗漏了一个很重要的arguments,我觉得有必要讲解一下,因为在很多时候我们在项目中很多地方都用到arguments,所以我们来深入了解一下。

arguments属性:

在函数对象中有一个属性叫arguments属性,通过这个属性可以获取到相应的参数值,这个属性是以数组形式保存参数(伪数组),其实就是传递的参数。

function sum (num){
    alert(arguments.length);    //3
    alert(num);                 //16
}
sum(1,2,3);

我们虽然传递了三个参数,上一章我们讲过了虽然它只会返回 “1”,但是传递的参数确实还是存在的。我们可以通过arguments.length可以看到它其实有三个参数,但是接受到的只有一个参数而已。
我们想得到这三个参数也很简单,写一个for循环就可以了:

for(var i=0;i
一个简单的递归:arguments.callee()方法

在arguments中有一个方法:callee(参数),我们可以利用这个方法去反向的调用。

一个简单的递归(阶层):

function sum (num){
    if (num <= 1) return 1;
    else return num * sum(num-1);
}

alert(sum(4));    //返回结果:24

以上调用递归的函数名称和原有的函数名称耦合在一起了,也就是说以后如果我们改了函数名称,函数体内的的递归就失效了,我们能想到的办法就是更改函数体内的调用函数,但是这往往不是我们想要的,我们想要的就是可以动态的调用,因为往往我们写出来的函数,是不希望更改封装好在函数体内的参数或者值的。

function sum (num){
    if (num <= 1) return 1;
    else return num * arguments.callee(num-1);
}

alert(sum(4));    //返回结果:24

我们再来看一个使用arguments.callee()的好处:

function sum (num){
    if (num <= 1) return 1;
    else return num * sum(num-1);
}

var sum1 = sum;    //将sum赋值给sum1变量存储
alert(sum1(4));    //返回结果:24
sum = null;        //让sum 指向为null
alert(sum1(4));    //sum1 is not a function !

我们发现,当sum指向null的时候,下面的alert就报错了,而我们不希望这种情况的发生,我们可以使用这个方法来去反向调用。

function sum (num){
    if (num <= 1) return 1;
    else return num * arguments.callee(num-1);
}

var sum1 = sum;    
alert(sum1(4));    //返回结果:24
sum = null;        //让sum 指向为null
alert(sum1(4));    //返回结果:24
老生常谈 : this关键字

当我们需要创建一个类的时候,设置类的属性和方法需要通过this关键字来引用,this关键字在调用时候会根据不同的调用对象指向的也是不同的。

var color = "red";

function showColor() {
    alert(this.color);
}

//创建类
function Circle (color) {
    this.color = color;
    this.showColor = showColor;
}

var box = new Circle("yellow");
box.showColor();    //返回结果:yellow

我们使用box来实例化Circle,此时this指向的是box,所以color就是yellow.

box.showColor();    //yellow

showColor();        //red

此时调用的函数指向的是window,所以会返回red.

后记:调试上面代码发现的问题

(此处属于个人理解,如有错误请见谅并指出!)

我在写这篇文章的时候发现的问题就是:

window.onload = function () {
    var color = "red";
    function showColor () {
        alert(this.color);        //undefined
    }
    showColor();
};

如果我们写了window.onload 它会返回undefined,window.onload的意思是页面加载完成之后所发生的事件。有些在页面未加载完成时执行的函数可能会找不到对象(对象未加载完成),会出现错误。
一个小例子来体现JavaScript预处理:

function f (a,b) {
     alert(a);
     alert(b);
     var b = 100;
     function a () {}
   }
  f(1,2);

我们来看看这个函数从解析到执行都发生了什么:

通过上面的例子,我们来理解一下刚刚的例子:

预处理阶段,JavaScript会扫描用var声明的变量和用声明方式创建的函数(并非函数表达式),其他之外都会忽略。

以上文章中,如有错误,请及时指正!谢谢!

    *Brian.Lee著*

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82573.html

相关文章

  • 深入理解ES6之《函数

    摘要:默认参数中要为参数指定默认值,只能如下所示但是这样有一个问题如果传进来的值为,则也会赋值变成,所以更加完全的做法是检测参数类型中直接可以为任意参数指定默认值,在已指定默认值的参数后可以继续声明无默认值参数是否使用函数默认值主要依赖于调用函数 默认参数 ES5中要为参数指定默认值,只能如下所示: function makeRequst(url, timeout, callback) { ...

    Seay 评论0 收藏0
  • 深入理解ES6之《函数

    摘要:默认参数中要为参数指定默认值,只能如下所示但是这样有一个问题如果传进来的值为,则也会赋值变成,所以更加完全的做法是检测参数类型中直接可以为任意参数指定默认值,在已指定默认值的参数后可以继续声明无默认值参数是否使用函数默认值主要依赖于调用函数 默认参数 ES5中要为参数指定默认值,只能如下所示: function makeRequst(url, timeout, callback) { ...

    cyixlq 评论0 收藏0
  • 深入理解JavaScript系列12:变量对象

    摘要:所有变量声明由名称和对应值组成一个变量对象的属性被创建如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性。 介绍 JavaScript编程的时候总避免不了声明函数和变量,以成功构建我们的系统,但是解释器是如何并且在什么地方去查找这些函数和变量呢?我们引用这些对象的时候究竟发生了什么? 原始发布:Dmitry A. Soshnikov 发布时间:2009-...

    vincent_xyb 评论0 收藏0
  • 形象化模拟作用域链,深入理解js作用域、闭包

    摘要:至此作用域链创建完毕。好了,通过深入理解作用域链,我们能跟好的理解的运行机制和闭包的原理。 前言 理解javascript中的作用域和作用域链对我们理解js这们语言。这次想深入的聊下关于js执行的内部机制,主要讨论下,作用域,作用域链,闭包的概念。为了更好的理解这些东西,我模拟了当一个函数执行时,js引擎做了哪些事情--那些我们看不见的动作。 关键词: 执行环境 作用域 作用域链 变...

    txgcwm 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<