十分钟彻底理解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指向,不懂请砸店的主要内容,如果未能解决你的问题,请参考以下文章