JavaScript 中的 this

前言：this指向的是一个对象，具体指向的是哪个对象由函数调用方式来决定。

为什么要使用this?

答案：在调用函数的时候可以少传一个参数，是代码更灵活，复用性更好

    var obj01 = {name : "小白"};
    var obj02 = {name : "小黑"};

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

    obj01.showName = showName;
    obj02.showName = showName;

    obj01.showName();
    obj02.showName();

this到底指向谁呢？具体由函数的调用方式来决定

• 001 以普通函数的方式来调用，在非严格模式下，指向window,在严格模式下，指向undefined
• 002 以对象的方法来调用，this指向调用方法的对象
• 003 以构造函数的方式来调用，this指向的是构造函数内部新创建的对象
• 004 以上下文的方式来调用(call | apply)，this指向第一个参数

demo1 以普通函数的方式来调用，在非严格模式下，指向window,在严格模式下，指向undefined

<script>
    "use strict";

    function foo(){
        console.log(this);
    }
    foo();
</script>

demo2 以对象的方法来调用，this指向调用方法的对象

<script>
    var obj = {
        name : "小白",
        showName : function(){
            console.log(this);
            console.log(this.name);
        }
    }

    obj.showName();
</script>

demo3 以构造函数的方式来调用，this指向的是构造函数内部新创建的对象

<script>
    function Foo(){
        this.name = "默认";
        this.age = 18;
        this.showName = function(){
            console.log(this);
            console.log(this.name + ' -' + this.age);
        }
    }

    var foo = new Foo();
    foo.showName();
</script>

demo4 以上下文的方式来调用(call | apply)，this指向第一个参数

<script>
    var obj1 = {
        name : "默认",
        sayHi : function(){
            console.log(this.name + '在 say Hi~');
        }
    };

    var obj2 = {
        name : "小白"
    }

    obj1.sayHi.call(obj2); //小白在 say Hi~
</script>