Web/04-JavaScript基础/21-this.md
2020-05-14 22:17:35 +08:00

4.4 KiB
Raw Blame History

this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数这个隐含的参数就是thisthis指向的是一个对象这个对象我们称为函数执行的 上下文对象。

根据函数的调用方式的不同this会指向不同的对象【重要】

  • 1.以函数的形式调用时this永远都是window。比如fun();相当于window.fun();

  • 2.以方法的形式调用时this是调用方法的那个对象

  • 3.以构造函数的形式调用时this是新创建的那个对象

  • 4.使用call和apply调用时this是指定的那个对象

针对第1条的举例

    function fun() {
        console.log(this);
        console.log(this.name);
    }

    var obj1 = {
        name: "smyh",
        sayName: fun
    };

    var obj2 = {
        name: "vae",
        sayName: fun
    };

    var name = "全局的name属性";

    //以函数形式调用this是window
    fun();       //可以理解成 window.fun()

打印结果:

    Window
    全局的name属性

上面的举例可以看出this指向的是window对象所以 this.name 指的是全局的name。

第2条的举例

        function fun() {
            console.log(this);
            console.log(this.name);
        }

        var obj1 = {
            name: "smyh",
            sayName: fun
        };

        var obj2 = {
            name: "vae",
            sayName: fun
        };

        var name = "全局的name属性";

        //以方法的形式调用this是调用方法的对象
        obj2.sayName();

打印结果:

    Object
    vae

上面的举例可以看出this指向的是 对象 obj2 ,所以 this.name 指的是 obj2.name。

箭头函数中this的指向

ES6中的箭头函数并不会使用上面四条标准的绑定规则而是会继承外层函数调用的this绑定无论this绑定到什么

类数组 arguments

这部分,小白可能看不懂。所以,这一段,暂时可以忽略。

在调用函数时,浏览器每次都会传递进两个隐含的参数:

  • 1.函数的上下文对象 this

  • 2.封装实参的对象 arguments

例如:

    function foo() {
        console.log(arguments);
        console.log(typeof arguments);
    }

    foo();

arguments是一个类数组对象它可以通过索引来操作数据也可以获取长度。

arguments代表的是实参。在调用函数时我们所传递的实参都会在arguments中保存。有个讲究的地方是arguments只在函数中使用

1、返回函数实参的个数arguments.length

arguments.length可以用来获取实参的长度

举例:

    fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b) {
        console.log(arguments);
        console.log(fn.length);         //获取形参的个数
        console.log(arguments.length);  //获取实参的个数

        console.log("----------------");
    }

打印结果:

我们即使不定义形参也可以通过arguments来使用实参只不过比较麻烦arguments[0] 表示第一个实参、arguments[1] 表示第二个实参...

2、返回正在执行的函数arguments.callee

arguments里边有一个属性叫做callee这个属性对应一个函数对象就是当前正在指向的函数对象。

    function fun() {

        console.log(arguments.callee == fun); //打印结果为true
    }

    fun("hello");

在使用函数递归调用时推荐使用arguments.callee代替函数名本身。

3、arguments可以修改元素

之所以说arguments是伪数组是因为arguments可以修改元素但不能改变数组的长短。举例:

    fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b) {
        arguments[0] = 99;  //将实参的第一个数改为99
        arguments.push(8);  //此方法不通过,因为无法增加元素
    }

我的公众号

想学习代码之外的技能?不妨关注我的微信公众号:千古壹号idqianguyihao)。

扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: