09 - JavaScript is this problem

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-NC-SA copyright agreement, reproduced, please attach the original source link and this statement.
This link: https://blog.csdn.net/Yuanriver/article/details/102665755

this

Parser function calls are passed to the interior of each function into an implicit argument, the implicit argument is this, this points to a object that we call context object function to execute.

According to the different ways of calling a function, this will point to different objects: [important]

  • 1. in the form of a function call, this is always a window. For example, fun();the equivalent ofwindow.fun();

  • 2. call the form of a method, this method is that the object calls

  • 3. When you call that object in the form of the constructor, this is a newly created

  • 4. When using call and apply call, this is the object specified

Article for Example 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()

Print Results:

    Window
    全局的name属性

The above example can be seen, the window object the this point, it refers to the global this.name name.

Example 2 Article :

        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();

Print Results:

    Object
    vae

The above example can be seen, this point is the object obj2, so this.name refers obj2.name.

The directional arrows in this function :

ES6 arrow function does not use the above four criteria binding rules, but will inherit the outer function call this binding (whether this is bound to anything).

Class array of arguments

This part, white may not understand. Therefore, this period, you can ignore.

When the function is called every time the browser passed into two implicit parameters:

  • This 1. Function context object

  • 2. Package argument object arguments

E.g:

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

    foo();

Here Insert Picture Description

an array of arguments is a class object that may be operated by the index data, the length can also be obtained.

on behalf of the arguments are arguments . We passed arguments will be saved in the arguments in the function call. There is particular about the place: arguments only used in the function .

1, the function returns the argument number: arguments.length

arguments.length can be used to obtain the argument length .

For example:

    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("----------------");
    }

Print Results:

Here Insert Picture Description

Even if we do not define shape parameters, arguments may be used by the arguments (but troublesome): arguments [0] indicates the first argument, arguments [1] indicates the second argument ...

2, return function being performed: arguments.callee

arguments inside there is a property called callee, this corresponds to a function object attribute is the function object is currently pointing.

    function fun() {

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

    fun("hello");

In using the function recursive call, the recommended arguments.callee instead of the function name itself.

3, arguments can modify elements

The reason why is a pseudo-array arguments, because: arguments can modify elements, but can not change the length of the array . For example:

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

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

Guess you like

Origin blog.csdn.net/Yuanriver/article/details/102665755
09