重点--this

作者: 潘肚饿兵哥哥 | 来源:发表于2019-06-23 23:18 被阅读0次

重点、重点还是重点
还是重点，重点，重点
重点体式的重点
重点中的重点
重点
重点
重点
重点
重点
重点

function fun(a,b){
    console.log("a = "+a+", b = "+b);
    console.log(this);
}
            
fun(132,456);

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

image.png

这里我们没有声明这个this，但是他返回了全局对象window，说明，this是有的，是window自己传了一个隐含的this进入函数里了

this本身其实是一个参数，和我们自己声明的a、b没区别，只不过他是浏览器传进去的


function fun(){
    console.log(this);
}       
var obj = {
    name:"孙悟空",
    sayName:fun
};

obj.sayName();
fun();//obj.sayName();和fun();调的是同一个函数，但是返回值不同，如下图

image.png

obj.sayName();和fun();调的是同一个函数，但是返回值不同
obj.sayName();返回值是一个对象，这个对象就是obj
fun();返回的是一个window

根据函数的 $\color{rgba(254, 67, 101, .8)}{调用方式}$ 的不同，this会指向不同的对象，跟 $\color{rgba(254, 67, 101, .8)}{创建方式}$ 无关

$\color{rgba(254, 67, 101, .8)}{1.以函数的形式调用时，this永远都是window,fun()就是以函数的形式调用的}$
$\color{rgba(254, 67, 101, .8)}{2.以方法的形式调用时，this就是调用方法的那个对象，obj.sayName();是方法形式调用}$
这个方法是谁调的，this就是谁，这里是obj调的，所以这里返回值就是obj

以方法的形式调用：
this就是obj.sayName();


var obj = {
    name:"孙悟空",
    sayName:fun
};

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

 var obj2 = {
    name:"沙和尚",
    sayName:fun
};

obj.sayName();
fun();

这里obj.sayName();返回孙悟空，obj2.sayName();返回猪八戒，this不是固定不变的
他根据调用方法不同，对象就不同

以函数的形式调用fun（）；：
this就是window.this

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

var obj2 = {
    name:"沙和尚",
    sayName:fun
};
var name = "全局的name属性"

fun();

以函数的形式调用：this不再是猪八戒，而是   全局的name属性

如果不是用fun（）调，而是用 obj2.sayName();调，结果就是 沙和尚

如下图：

image.png

所以：
以obj.sayName()调用，this就是obj
以 fun() 调用，实际是 window.fun();

实际都是方法调用，只不过，以方法调用是我们自己写的，以函数调用是window在调，window被隐藏了而已

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
        
            /*
             * 解析器在调用函数时每次都会向函数内部传递进一个隐含的参数,
             *  这个隐含的参数就是this，this指向的是一个对象，
             *  这个对象我们称为函数执行的 上下文对象(他不是永远指向window)，
             *  根据函数的调用方式的不同，this会指向不同的对象
             *      1.以函数的形式调用时，this永远都是window
             *      2.以方法的形式调用时，this就是调用方法的那个对象
             */
            
            function fun(){
                //console.log("a = "+a+", b = "+b);
                console.log(this.name);
            }
            
            //fun();
            
            //创建一个对象
            var obj = {
                name:"孙悟空",
                sayName:fun
            };
            
            var obj2 = {
                name:"沙和尚",
                sayName:fun
            };
            
            //console.log(obj.sayName == fun);
            var name = "全局的name属性";
            //obj.sayName();
            //以函数形式调用，this是window
            //fun();
            
            //以方法的形式调用，this是调用方法的对象
            //obj.sayName();
            obj2.sayName();
            
        </script>
    </head>
    <body>
    </body>
</html>

var name = "全局";

    function fun(){
        console.log(this.name);
        //这里如果写name的话,返回值是全局
        
        //如果括号里写obj.name,那么下面调用的时候,无论obj.sayName();还是obj2.sayName();返回值都是孙悟空,因为被写死了
        //所以,如果我们希望调obj就返回obj,调obj2就返回obj2的话，就用this.name,这样就成为了动态的,谁（方法）调他,他就是谁
        
        
        // 因为fun里没有name,就向上一级找,就返回全局变量  全局
        //写this.name,返回值是  孙悟空
        
        
    }

    var obj = {
            name:"孙悟空",
            sayName:fun
    };

    var obj2 = {
            name:"沙和尚",
            sayName:fun
    };

obj2.sayName();