javascript中this使用详解
和其它许多面向对象的语言一样,JavaScript 中也有 this 关键字,this 在函数中用来指向调用此方法的对象。实际编程中要判断 this 到底指向谁,一般可遵循以下原则:
如果该函数被 Function.call 或者 Function.apply 调用,那么 this 指向 call/apply 的第一个参数,如果参数是 null 或者 undefined,this 则指向全局对象(在浏览器中的话,全局对象就是 window 对象)。
如果该函数被 Function.bind 调用,那么 this 将指向 bind 的第一个参数(方法被创建时)。
如果该函数被一个对象作为方法调用,那么 this 指向这个对象。
如果该函数只是光溜溜的作为函数被调用,不附属于任何对象,那么 this 指向全局变量 window。
函数
首先,让我们看看”函数”:
function introduce() { alert("Hello, I am Laruence "); }
对于,这个函数, this关键字指向谁呢?
定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象.
这也就是为什么, 我把函数用引号引起来. 因为定义在全局的函数, 其实也就是window对象的一个方法.
所以,我们即可用通过函数名直接调用, 也可用通过window.方法名来调用, 这个时候, 方法中的this关键字指向它的所有者:window对象.
如果, 我们查看window的introduce属性, 就会得到:
var name = "I am Laruence"; function introduce() { alert(this.name); } alert(window.introduce); /** * output: * function introduce() { * alert(this.name); * } */
看了上面的代码, 也许你就会想到既然, 全局函数是window对象的方法, 全局变量是window对象的属性(Javasript作用域中已有述及), 那么,在全局函数中就可用通过this关键字来访问全局变量吧?
答案是肯定的, 如果调用introduce函数, 你就会认识我是Laruence.
事件处理函数
也许, 对于this关键字的迷惑, 绝大部分原因是来自把函数(方法)用在事件处理的时候.
<input id="name" type="text" name="name" value="Laruence" />
比如, 我们现在需要在点击”name”输入框的时候, 显示出name输入框的value. 那么, 可用写下如下代码:
function showValue() { alert(this.value); } document.getElementById("name").onclick = showValue;
上面的代码, 运行正常, 但是why? 不是说函数的this指针永远指向函数所有者么? 不是说全局变量的所有者是window对象么?
呵呵, 如果你能想到这个问题, 那说明你在认真的看我的文章, 否则,,我建议你从头看起, 否则看完了,你还是迷糊~
恩, 对, 对于上面的代码, showValue是定义在了全局对象, 那么看来问题只能发生在onclick事件绑定的时候了.
我们知道, 在Js中一切都是对象, 函数和方法也都是对象的属性, 只不过函数有可执行的内部属性. 所以, 对于上面的代码, 在对onclick绑定处理器的时候, 其实是对id为name的输入框Dom对象的onclick属性赋值.
也就是说, 我们把函数showValue Copy 给了name输入框对象的onclick属性. 如果我们查看此时的onclick:
function showValue() { alert(this.value); } document.getElementById("name").onclick = showValue; alert(document.getElementById("name").onclick); /** * output * function showValue() { * alert(this.value); * } */
所以, 当事件触发的时候, 就会去调用name输入框的onclick方法, 这个时候,this关键字自然就指向的是name输入框了.
但是, 迷惑的事情就来了, 比如下面这种写法:
<span class="kwd">function</span><span class="pln"> showValue</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><br/><span class="pln"> alert</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">value</span><span class="pun">);</span><br/><span class="pun">}</span><br/><span class="pun"><</span><span class="pln">input id</span><span class="pun">=</span><span class="str">"name"</span><span class="pln"> type</span><span class="pun">=</span><span class="str">"text"</span><span class="pln"> name</span><span class="pun">=</span><span class="str">"name"</span><span class="pln"> value</span><span class="pun">=</span><span class="str">"Laruence"</span><span class="pln"> onclick</span><span class="pun">=</span><span class="str">"showValue()"</span><span class="pun">/></span>
就无法正常运行, 这又是为什么呢?
恩, 因为这个时候, 并不是赋值, 而是引用.
如果我们注意俩种onclick的写法, 你会发现, 对于之前的方法, 我们使用的是:
dom.onclick = showvalue; //没有调用符
而对于刚才的方法:
onclick = "showvalue()" //有调用符
这个也能侧面的反映出俩者的区别:对于前者,是赋值, 而对于后者是引用. 如果我们这个时候查看输入框的onclick属性,我们得到:
<span class="pln">alert</span><span class="pun">(</span><span class="pln">dom</span><span class="pun">.</span><span class="pln">onclick</span><span class="pun">);</span><br/><span class="com">/**</span><br/><span class="com">* output:</span><br/><span class="com">* function onclick() {</span><br/><span class="com">* showValue();</span><br/><span class="com">* }</span><br/><span class="com">*/</span>
看到区别了么? 也就懂得为什么了吧?
讲到这里, 有一个很有趣的例子 ,大家可以在IE下试试:
<img src="xxx" onerror="alert(1);} function hi() { alert(2); " />
改变this的指向
那, 既然我们已经知道为什么了, 那怎么才能让this指向我们想要指的地方呢?
对于上面的事件处理函数来说, 我们可以有如下几种写法:
dom.onclick = showValue(); dom.onclick = function() { alert(this.value) ;} <input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的. dom.addEventListener(dom, showValue, false); //ff only
而对于不是事件处理函数的场合, 我们可以使用apply, 或者call, 来改变this关键字的指向.
比如:
var laruence = { name : "laruence", age : 26, position : "Senior PHP Engineer", company : "Baidu.inc" }; function introduce() { alert(this.name); } introduce.call(laruence);
函数被 Function.call 调用的例子:
var myObject = { sayHello : function() { console.log("Hi! My name is " + this.myName); }, myName : "Rebecca" }; var secondObject = { myName : "Colin" }; myObject.sayHello(); // logs "Hi! My name is Rebecca" myObject.sayHello.call(secondObject); // logs "Hi! My name is Colin"
函数被 Function.call 调用过的例子:
var myName = "the global object", sayHello = function () { console.log("Hi! My name is " + this.myName); }, myObject = { myName : "Rebecca" }; var myObjectHello = sayHello.bind(myObject); sayHello(); // logs "Hi! My name is the global object" myObjectHello(); // logs "Hi! My name is Rebecca"
函数被对象调用的例子:
var myName = "the global object", sayHello = function() { console.log("Hi! My name is " + this.myName); }, myObject = { myName : "Rebecca" }, secondObject = { myName : "Colin" }; myObject.sayHello = sayHello; secondObject.sayHello = sayHello; sayHello(); // logs "Hi! My name is the global object" myObject.sayHello(); // logs "Hi! My name is Rebecca" secondObject.sayHello(); // logs "Hi! My name is Colin"
在调用一个很深的命名空间中函数的时候,我们通常会缓存一个变量指向那个要调用的函数,以减少代码量。但是这样做会改变函数中 this 的值,最终执行错误的操作。例如:
var myNamespace = { myObject : { sayHello : function() { console.log("Hi! My name is " + this.myName); }, myName : "Rebecca" } }; var hello = myNamespace.myObject.sayHello; hello(); // logs "Hi! My name is undefined"
所以,要缓存变量以节省代码量的话,正确的做法是只节省到调用那个函数的对象为止:
var myNamespace = { myObject : { sayHello : function() { console.log("Hi! My name is " + this.myName); }, myName : "Rebecca" } }; var obj = myNamespace.myObject; obj.sayHello(); // logs "Hi! My name is Rebecca"
总之,有一个大原则:谁调用了那个函数,this 就指向谁。
以上是javascript中this使用详解的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest
