1,我们先看看this是个什么东西
那么,我们就直接:alert(this);看看这个this指的是什么东西
<script type="text/javascript"> alert(this);//object window,window 是js老大 //window.alert(this); </script>
这个时候就知道this是object window 。alert(1);是window.alert(1);的简写。所以alert(1);这里前面有个默认的window所以这里的this指向的是object window.
在举个例子
<script type="text/javascript"> function fn1(){ alert(this); } window.fn1(); //fn1(); </script>
在函数里面的this也指的是window。
这个时候我们就可以理解this:指的是调用当前 方法(函数)的那个对象
函数的执行有 fn1();还有点击等事件的时候让函数执行
如:
<input type="button" id="btn1" value="button" /> <script> var oBtn = document.getElementById("btn1"); oBtn.onclick = fn1;//这个函数静静的躺在那里,谁让函数动了,弹出来的就是谁。 </script>
this对当前看的特别重要。
<input type="button" id="btn1" value="button" /> <!--alert(this)指的是button,fn1();指的是window--> <script> function fn1(){ alert(this); } var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){ //alert(this);//这里的this指的就是button按钮本身 fn1();//这样的话,前面有个老大哥window这种调用方式就是window。 } </script>
还有一种情况是在元素上直接加事件或者函数,这种情况现在已经是不推荐使用的,但是我们介绍下主要了解this的指向:
如:
<input type="button" id="btn2" onclick="alert(this);" value="button2" />
所以这个里面this是指button
<input type="button" id="btn2" onclick="fn1();" value="button2" /> //fn1()就是上面的一个函数
所以这个里面的this指的是window
这个时候我们总结一下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> // this : 这个 // this: 指的是调用 当前 方法(函数)的那个对象 function fn1(){ // this } // fn1(); this => window // oDiv.onclick = fn1; this => oDiv /* oDiv.onclick = function (){ fn1(); fn1() 里的this => window }; <div onclick=" this fn1(); "></div> fn1(); 里的 this 指的是 window */ // alert( this ); // object window // window 是 JS “老大” // window.alert( this ); function fn1(){ alert( this ); // window } // fn1(); // window.fn1(); </script> </head> <body> <input id="btn1" type="button" value="按钮" /> <input id="btn2" type="button" onclick=" fn1(); " value="按钮2" /> <script> var oBtn = document.getElementById('btn1'); // oBtn.onclick = fn1; oBtn.onclick = function (){ // this fn1(); }; </script> </body> </html>
很清楚吧。
下面就举一个简单的js中this应用的小例子
就是鼠标放上去显示小提示
简陋的代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> li { width:100px; height:150px; float:left; margin-right:30px; background:#f1f1f1; position:relative; z-index:1; } div { width:80px; height:200px; background:red; position:absolute; top:75px; left:10px; display:none; } </style> <script> window.onload = function (){ var aLi = document.getElementsByTagName('li'); var that = null; for( var i=0; i<aLi.length; i++ ){ aLi[i].onmouseover = function (){ that = this; fn1(); }; aLi[i].onmouseout = function (){ this.getElementsByTagName('div')[0].style.display = 'none'; }; } function fn1(){ that.getElementsByTagName('div')[0].style.display = 'block'; } }; </script> </head> <body> <ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul> </body> </html>
相关推荐
JavaScript中的`this`关键字是一个非常重要的概念,它在不同的调用场景下有着不同的指向,这主要取决于函数如何被调用。下面将详细解释四种常见的`this`使用情况。 1. **纯粹的函数调用** 当函数作为独立实体被...
JavaScript中的`this`关键字是编程过程中经常会遇到的一个关键概念,尤其在面向对象编程中起着至关重要的作用。`this`的值取决于它被调用时的上下文,而不是定义时的位置,这使得它有时会显得有些复杂。在这个深入...
JavaScript中的对象定义与`this`关键字的用法是编程中非常关键的概念,特别是在构建复杂的应用时。`this`关键字在JavaScript中用来引用当前上下文的对象,它的行为有时可能与传统面向对象语言(如Java)有所不同。 ...
在JavaScript中,`this`关键字是一个非常重要的概念,它指的是当前执行上下文中的对象。`this`的值取决于函数的调用方式,而不是定义方式。下面我们将详细探讨在不同场景下`this`的用法。 1. **全局作用域中调用...
this的另一个常见应用场景是在构造函数中。当使用new关键字创建一个新的对象实例时,构造函数内部的this会绑定到新创建的对象。例如: 复制代码 代码如下: function Person(name) { this.name = name; } var ...
### JavaScript中this指向详解 #### 一、引言 在JavaScript编程中,`this`关键字的使用及其指向问题一直是困扰很多开发者的难点之一。不同于传统面向对象编程语言如Java或C#中的`this`概念,JavaScript中的`this`...
JavaScript中的`this`关键字是一个非常重要的概念,它用于在函数执行时引用当前上下文的对象。在JavaScript中,`this`的...通过深入学习并实践这些规则,可以更好地掌握JavaScript中的`this`用法,从而提高编程能力。
JavaScript是一门动态语言,其中this关键字的含义并非总是固定,而是根据函数调用的上下文...总之,this关键字的理解和应用是学习JavaScript的一个重要方面,也是进阶成为JavaScript熟练开发者所必须掌握的知识点之一。
在JavaScript中,`this`关键字是一个非常重要的概念,但同时也是新手开发者经常遇到困惑的地方。`this`的值在不同上下文中会发生变化,这使得理解它的行为变得至关重要。本篇文章将探讨`this`在不同场景下的指向,...
JavaScript中的作用域和`this`关键字是编程中非常重要的概念,尤其在JavaScript中,它们具有独特的特点和行为。本文将深入探讨这两个概念及其在实际编程中的应用。 首先,我们来看一下**作用域(Scope)**: 作用...
JavaScript中的`this`关键字是一个非常核心的概念,它用于在函数执行时引用当前上下文的对象。在JavaScript中,`this`的值取决于函数被调用的方式,而不是函数定义的位置。理解`this`的工作原理对于深入掌握...
总结一下,`this`在JavaScript中的核心作用是引用执行代码时的上下文对象,它的值取决于函数调用的方式。要掌握`this`,需要熟悉上述四种绑定规则,并在实践中不断应用和验证。通过深入学习和实践,开发者能够更好地...
### JavaScript中的Map应用 在JavaScript中,`Map`对象是一种内置的数据结构,它保存键值对,并且可以按插入顺序记住元素。与普通的JavaScript对象不同的是,`Map`的键可以是任何类型的值(不仅仅是字符串或符号)...
JavaScript中的`this`关键字是一个非常重要的概念,它在编程中起着至关重要的作用,尤其是在对象方法的上下文中。`this`关键字的用法类似于自然语言中的代词,它用来引用当前执行上下文的对象,帮助开发者避免命名...
JavaScript是一种由Netscape公司推出的轻量级、跨平台的脚本语言,广泛应用于Web开发,既能用于客户端,也能在服务器端发挥作用。在客户端,JavaScript嵌入到HTML文档中,当用户通过浏览器请求网页时,浏览器会解释...
总结来说,在JavaScript中,`this`在事件中的应用非常灵活。它可以在全局作用域中代表全局对象,也可以在事件处理器中代表触发事件的元素。理解`this`的这些特性对于编写有效的事件处理代码非常关键。开发者需要根据...
在Vue.js中,`this.$options.data()` 和 `this.$data` 都是用来处理组件数据的,但它们的使用场景和行为有所不同。这个问题涉及到Vue实例的生命周期和数据绑定的原理。 首先,`this.$options.data()` 返回的是组件...
JavaScript的学习通常涉及理解闭包、原型链、作用域、this关键字、异步编程(如Promise和async/await)、模块化(CommonJS、ES6模块)等高级概念。 此外,"经典"一词可能意味着包含了一些经典的JavaScript库和框架...
在JavaScript中,`this`关键字是一个...这九个场景和三个复合场景覆盖了JavaScript中`this`关键字的常见用法。理解`this`的动态绑定和不同上下文中的行为是JavaScript编程的基础,对于编写高效、可维护的代码至关重要。