十分钟彻底理解javascript 的 this指向,不懂请砸店

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了十分钟彻底理解javascript 的 this指向,不懂请砸店相关的知识,希望对你有一定的参考价值。

 

函数的this指向谁,和函数在哪里被定义的,函数在哪里被执行的没有半毛钱关系,只遵守下面的规律:

在非严格模式中:

1、自执行函数里面,this永远指向window;

    <script>
        var a = 1;
        var o = {
            a: 2,
            fn: (function(){                                //自执行函数,在定义的时候就已经执行啦
                console.log(‘自执行函数里面是window‘,this.a);           //自执行函数里面的this指向的是window
                return function() {                                   // 但是这里的this 指向的是谁调用的这个函数
                    console.log(‘但是还是要具体问题具体分析‘,this.a)
                }
            })()
        }

        o.fn();
    </script>

结果请看

技术分享

 

 2、给元素的某一个行为绑定方法,当行为触发所调用的函数里面this指向的该dom 元素;

    <script>
        var dd = document.getElementById(‘dd‘);
        function f1 () {
            console.log(this);
        }
        dd.onclick=f1;       // 点击的那个dom对象
    </script>

但是我要是稍微改一下:

    <script>
        var dd=document.getElementById(‘dd‘);
        function fn () {
            console.log(this);
        }
        dd.onclick=function(){
            console.log(this);   // dom 对象
            fn();               // window  ,这时候就看该函数是被谁调用的啦
        }
    </script>

3、看看函数执行有咩有 . ,如果有则是前面的那个,如果没有则是window

 

4、在构造函数里面,this 指向的是当前的实例;

 

<script>

       function fn() {
           console.log(this);
       };
       function ff () {
             this.name="杜俊成";   
             this.say=function(){  
                 console.log(this);    // this指向该构造函数的原型
                 fn()                  // window ,因为fn 函数的直接调用者是window,
             }
       }

       var a = new ff();     
       a.say();
    </script>

 

 5、使用call / apply 改变了this 的指向;(关于call 和 apply 想一劳永逸的搞明白吗?请看我的一篇文章)

 

严格模式:

 1、自执行函数里面,this永远指向undefined;

    <script>
        var obj ={
            fn:(function(){
                // this => undefined
                console.log(this)
                return function(){
                    // this=> obk
                    console.log(this);
                }
            })()
        }
        obj.fn; //obj.fn 的方法在声明的时候就已经被执行了, window
        obj.fn(); //obj.fn的自执行方法返回的方法执行  obj
    </script>

2、看前面有咩有 . ,如果有则是前面的那个,如果没有则是undefined

 

总结就是:严格模式和非严格模式的区别:当调用主体不明时,严格模式是undefined,非严格模式是window

<script>
    ‘use strict‘;
    function fn(){
        alert(this);
    }
    /*非严格模式*/
    fn.call()//this - window;
    fn.call(null)//this - window;
    fn.call(undefined);//this -undefined
    /*严格模式下,给call或apply第一个参数传谁this就是谁,不传就是undefined*/
    fn.call() //this - undefined;
    fn.call(null) //this -null;
    fn.call(undefined) //this-undefined
</script>

 

 

 

最后打一个小广告,本人武大大三学生,热爱前端开发,有半年的项目经验和实习经验,给国内外多家公司做过前端的外包工作;

求北京,上海,杭州靠谱公司的实习,求各位前端大佬们带飞;

 

github地址:https://github.com/dujuncheng

 

技术分享

 

以上是关于十分钟彻底理解javascript 的 this指向,不懂请砸店的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中this指针指向的彻底理解

彻底搞懂JavaScript中的this关键字

彻底理解了call()方法,apply()方法和bind()方法

javascript中的this到底指啥?

如何理解 JavaScript 中的 this 关键字

javascript中call()apply()bind()的用法终于理解