JavaScript之this对象

xiaoxiao2021-02-27  435

JavaScript语言中有一个this关键字,可以称之为this指针。

定义

正版定义: 红宝书上说:“this是函数内部的特殊对象,this引用的是函数执行时的环境对象”。 盗版定义: 说的有点绕口,对初学者不容易接受。说白了,就是谁调用了函数,this就指向谁(这个不是很严谨,不过可以暂时这么理解)。 本文将按照下图逐步讲解。

显示函数调用中的this

eg1: var color="red"; function showcolor(){ var color="green"; alert(this.color); } showcolor();//red 上述例子将打印red,而不是green。按我们盗版定义,很好理解,showcolor()其实是被window对象调用的,相当于window.showcolor(),所以此时this指针指向的是window全局环境,因此打印出red。 eg2: var myObj={ color:"red", showcolor:function(){ var color="green"; alert(this.color); } }; myObj.showcolor();//red 上述例子将打印red,因为现在是myObj调用了show函数,所以this指针此时指向的是myObjc的环境。

回调函数中的this

<div id="sample">click me</div> <script type="text/javascript"> var myObj={ color:"red", showcolor:function(){ var color="green"; alert(this.color); } }; document.getElementById("sample").οnclick=myObj.showcolor; //undefined </script> 上述例子中我们并没有直接调用showcolor函数,而是将这个函数绑定到div的点击事件中去。当我们点击“click me”时,这个函数就会被调用,此时this指针指向的是id为“sample”这个div的DOM对象。为了证明,我们将上述改为, <div id="sample">click me</div> <script type="text/javascript"> var myObj={ color:"red", showcolor:function(){ var color="green"; alert(this.id); } }; document.getElementById("sample").οnclick=myObj.showcolor; //sample </script> 这样浏览器就会弹出“sample”,可见this是指向这个id为“sample”的div的。

内部函数中的this

内部函数是指函数内部再定义一个函数。 var color="red"; var myObj={ color:"green", showcolor:function(){ var color="yellow"; function innerShow(){ alert(this.color); } innerShow(); } }; myObj.showcolor();//red 会发现全局变量被打印了,网上很多文章说这是JS的设计缺陷。我个人觉得吧,硬是要解释,也说得过去,毕竟这个内部函数不是被”myObj”对象调用的,我们并没有看到”myObj.innerShow()”语句。既然没有别的对象在调用它,那只能是window对象了。 那如何改变才能打印出green呢? 只需一个简单的技巧: var color="red"; var myObj={ color:"green", showcolor:function(){ var color="yellow"; var that=this; function innerShow(){ alert(that.color); } innerShow(); } }; myObj.showcolor();//red 构造函数中的this 一个简单的构造函数如下: function showColor(){ this.color="red"; } 下面实例化一个对象, var newObj = new Show(); alert(newObj.name);//redthis此时指向的就是这个实例化的对象newObj。

使用call/apply/bind来调用函数

call和apply类似,都是在特定的作用域中调用函数。 两者的区别在于传入参数。 name = "name of window"; var myObj = { name: "name of myObj", } function show(x, y) { alert(this.name); return x + y } show.call(window, 1, 2); show.call(myObj, 1, 2); numArray = [1, 2]; show.apply(window, numArray); show.apply(myObj, numArray); 可以看到,call必须把参数显示的写出来,apply需要写成一个数组形式。 bind方法就是把这个函数绑定到一个指定的对象上。它可以将已有的函数对象复制一份出来,并同时绑定这个新函数对象的调用者。(给这个函数创建了一个实例对象) name = "name of window"; var myObj = { name: "name of myObj", } function show(x, y) { alert(this.name); return x + y } var myShow=show.bind(myObj); myShow(1,2); 此时this指针就指向myObj。 上述就是this的使用。
转载请注明原文地址: https://www.6miu.com/read-1143.html

最新回复(0)