前言
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>
答案
(往下看,下面有详细解析哦)
this
一、指向调用函数的对象
<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>
二、无对象调用函数/匿名函数自调用->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>
三、通过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>
四、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>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。
本文向大家介绍javascript中this关键字详解,包括了javascript中this关键字详解的使用技巧和注意事项,需要的朋友参考一下 不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法。强烈推荐。 以下篇幅有点长,希望读者耐心阅读。 以下内容会分为如下部分: 1.涵义 1.1:this涵义 1.2:this指向的可变性 2.使用
本文向大家介绍javascript的this关键字详解,包括了javascript的this关键字详解的使用技巧和注意事项,需要的朋友参考一下 this 的定义 表示当前执行代码的环境对象 因此可将 this 的剖析分为“全局环境” 和 “函数环境” 两种类型的环境对象 全局环境 函数环境 在函数内部,this 的取值取决于函数被调用时的运行环境。 这里涉及到内存里的数据结构相关的知识点,当我们
本文向大家介绍Javascript this 关键字 详解,包括了Javascript this 关键字 详解的使用技巧和注意事项,需要的朋友参考一下 一、this指向构造函数实例化对象 在上篇文章中,我们提到了使用new和不使用new调用构造函数的区别,如下例: 当构造函数当做普通函数被调用时,并没有返回值,同时this指向全局对象。那么我们如何来避免因为缺少new关键字,而产生的问题呢? 在上
题目描述 如下图所示,利用chrome的devtools工具查看当前执行代码处的的Local Scope,发现此时this为undefined,但是为何this.visible在实际执行过程中没有报错? 题目来源及自己的思路 问题来源于vue文件中的一段函数代码,我的问题及思路如下 我知道箭头函数的this指向来源于所在上下文,此时应该是指向Vue实例 但是为何在devtool中Debug过程,此
本文向大家介绍JavaScript中的this关键字使用详解,包括了JavaScript中的this关键字使用详解的使用技巧和注意事项,需要的朋友参考一下 和其它许多面向对象的语言一样,JavaScript 中也有 this 关键字,this 在函数中用来指向调用此方法的对象。实际编程中要判断 this 到底指向谁,一般可遵循以下原则: 如果该函数被 Function.call 或者 F
本文向大家介绍详解JavaScript中this关键字的用法,包括了详解JavaScript中this关键字的用法的使用技巧和注意事项,需要的朋友参考一下 this是函数内部的一个特殊对象,this引用的是函数据以执行的环境对象(关于环境对象我们会在文章最后作补充说明),在调用函数前this的值并不确定,不同的调用方式会导致this值的改变。 记住:函数名仅仅是一个包含指针的变量而已。因此即使是在