Javascript中this关键字指向问题的测试与详解
前言
Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程,其中this “指针”就是实现面向对象的一个很重要的特性。本文将给大家详细介绍关于Javascript中this关键字指向的相关内容,让我们先做一个小测试,如果全部答对了,恭喜你不用往下看了。
测试题目
第一题
<script> var str = 'zhangsan'; function demo() { var str = 'lisi'; alert(this.str); } window.demo(); // ?? var obj = { str: "wangwu", say: function() { alert(this.str); } } obj.say(); // ?? var fun = obj.say; window.fun(); // ?? </script>
第二题
<script> var username = 'zhangsan'; (function() { var username = 'lisi'; alert(this.username); // ?? })() function demo() { var username = 'wangwu'; function test() { alert(this.username); } test(); // ?? } demo(); </script>
第三题
<script> function Person() { this.username = 'zhangsan'; this.say = function() { alert('我叫' + this.username); } } var p = new Person(); p.say(); // ?? var p1 = new Person(); p1.say(); // ?? </script>
第四题
<script> var username = 'zhangsan'; function demo() { alert(this.username) } var obj1 = { username: "lisi" }; var obj2 = { username: "wangwu" }; demo(); // ?? demo(obj1); // ?? demo(obj2); // ?? demo.call(obj1); // ?? demo.apply(obj2); // ?? </script>
答案
- 第一题zhangsan wangwu zhangsan
- 第二题zhangsan zhangsan
- 第三题我叫zhangsan 我叫zhangsan
- 第四题zhangsan zhangsan zhangsan lisi wangwu
(往下看,狼蚁网站SEO优化有详细解析哦)
this
- 指向调用函数的对象
- 无对象调用函数/匿名函数自调用(this指向window)
- 通过new产生的对象
- apply/call调用
一、指向调用函数的对象
<script> // this:指向调用函数的对象 var str = 'zhangsan'; function demo() { var str = 'lisi'; //this->window console.log(this); alert(this.str); } window.demo(); // zhangsan var obj = { str: "wangwu", say: function() { // this->obj alert(this.str); } } obj.say(); // wangwu var fun = obj.say; window.fun(); // zhangsan </script>
- 全局函数(demo)属于window对象的方法,window调用demo所以this就指向了window
- obj调用say方法,this就指向了obj
- fun()是全局函数,而声明的fun接收的是obj里面单纯的一个函数,并没有调用(obj.say()才是调用了函数),此时的fun就是一个函数(function(){alert(this.str);}),那么当fun()调用函数的时候,this指向的就是window
- 是谁调用的函数,那么this就指向谁
二、无对象调用函数/匿名函数自调用->this指向window
<script> // 2.匿名函数自执行|匿名函数|无主函数 this->window var username = 'zhangsan'; // 匿名函数自执行 this->window (function() { var username = 'lisi'; console.log(this); // window alert(this.username); // zhangsan })() function demo() { var username = 'wangwu'; // 无主函数 this->window function test() { // this->window alert(this.username); } test(); // zhangsan } demo(); </script>
- 因为匿名函数没有名字,所以就挂给window了
- test(),谁调用test那么就指向谁。实验过,它不是window调用的,也不是demo调用的,没有人管它,那么它就指向window。它就相当于一个没有主人调用它,无主函数。
三、通过new产生的对象
<script> // 3.通过new的对象this指向产生的对象 // 函数 function Person() { // 属性 this.username = 'zhangsan'; // 方法 this.say = function() { // this->p console.log(this); // Person对象 alert('我叫' + this.username); } } // 实例化出一个对象:p就具有了username属性和say方法 var p = new Person(); console.log(p); // Person对象 console.log(p.username); // zhangsan p.say(); // 我叫zhangsan // this->p1 var p1 = new Person(); p1.say(); // Person对象 我叫zhangsan </script>
- 当我们的函数Person里面运用了this去写属性和方法这种格式,那么就要通过new来让属性和方法变得有价值,通过new去运用函数里面的属性和方法
四、apply/call调用
我们来了解下apply()/call()是个什么东西呢?
apply()/call():最终是调用function,只不过内部的this指向了thisObj
function.call([thisObj[,arg1[, arg2[, [,.argN]]]]]) function.apply([thisObj[,argArray]])
注意
1. 调用function函数,函数内的this指向thisObj(更改对象内部指针)
2. 如果thisObj没有传参,则默认为全局对象
3. call()/apply()联系与区别
联系功能一样,第一个参数都是thisObj
区别传递的参数如果比较多
call()的实参就是一一列出
apply()的实参是全部放置在第二个数组参数中
一个理解apply()/call()的实例
<script> // apply()/call() function demo() { console.log(123); } // 调用函数的时候,demo.call()/demo.apply()最终调用的还是demo() demo(); // 123 demo.call(); //123 demo.apply(); // 123 </script> <script> // call()/apply()的区别 // call()参数单独再call中罗列 // apply()的参数通过数组表示 function demo(m, n, a, b) { alert(m + n + a + b); } demo(1, 5, 3, 4); // 13 demo.call(null, 1, 5, 3, 4); // 13 demo.apply(null, [1, 5, 3, 4]); // 13 </script>
this的第四个用法实例
<script> // this的第四个用法call(obj)/apply(obj)强制性的将this指向了obj var username = 'zhangsan'; function demo() { alert(this.username) } var obj1 = { username: "lisi" }; var obj2 = { username: "wangwu" }; // call()/apply()打劫式的改变了this的指向 demo(); // zhangsan demo(obj1); //zhangsan demo(obj2); //zhangsan demo.call(obj1); // lisi demo.apply(obj2); // wangwu </script>
- 如果直接调用demo里面写的不管是obj1还是obj2,那么demo还是属于window调用的。
- 不管你用call还是apply最终调用的都是demo函数,但它们会强制的this指向了obj1/obj2,强制的指向了它们的第一个参数对象。
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对狼蚁SEO的支持。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程