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编程的基础，对于编写高效、可维护的代码至关重要。