`
xiaomiya
  • 浏览: 131469 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

js中this的用法及应用

阅读更多

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>

 

  • 大小: 4.3 KB
0
2
分享到:
评论
4 楼 xiaomiya 2014-03-31  
谢谢,希望不辜负你的期待
3 楼 IT随遇而安 2014-03-28  
好的,谢谢你的分享,期待着你的下一篇博客会更加精彩
2 楼 xiaomiya 2014-03-28  
这一篇是很初级的对this的理解,,对于this应用后面在添加。
1 楼 IT随遇而安 2014-03-27  
好吧,我是看着标题进来的

相关推荐

    JavaScript中this的用法及this在不同应用场景的作用解析

    JavaScript中的`this`关键字是一个非常重要的概念,它在不同的调用场景下有着不同的指向,这主要取决于函数如何被调用。下面将详细解释四种常见的`this`使用情况。 1. **纯粹的函数调用** 当函数作为独立实体被...

    深入理解JavaScript中的this关键字

    JavaScript中的`this`关键字是编程过程中经常会遇到的一个关键概念,尤其在面向对象编程中起着至关重要的作用。`this`的值取决于它被调用时的上下文,而不是定义时的位置,这使得它有时会显得有些复杂。在这个深入...

    js对象定义及this用法1

    JavaScript中的对象定义与`this`关键字的用法是编程中非常关键的概念,特别是在构建复杂的应用时。`this`关键字在JavaScript中用来引用当前上下文的对象,它的行为有时可能与传统面向对象语言(如Java)有所不同。 ...

    详解JavaScript中this关键字的用法_.docx

    在JavaScript中,`this`关键字是一个非常重要的概念,它指的是当前执行上下文中的对象。`this`的值取决于函数的调用方式,而不是定义方式。下面我们将详细探讨在不同场景下`this`的用法。 1. **全局作用域中调用...

    JS中的this变量的使用介绍

    this的另一个常见应用场景是在构造函数中。当使用new关键字创建一个新的对象实例时,构造函数内部的this会绑定到新创建的对象。例如: 复制代码 代码如下: function Person(name) { this.name = name; } var ...

    JavaScript中this指向.docx

    ### JavaScript中this指向详解 #### 一、引言 在JavaScript编程中,`this`关键字的使用及其指向问题一直是困扰很多开发者的难点之一。不同于传统面向对象编程语言如Java或C#中的`this`概念,JavaScript中的`this`...

    Javascript的this详解

    JavaScript中的`this`关键字是一个非常重要的概念,它用于在函数执行时引用当前上下文的对象。在JavaScript中,`this`的...通过深入学习并实践这些规则,可以更好地掌握JavaScript中的`this`用法,从而提高编程能力。

    JavaScript中this指向.pdf

    JavaScript是一门动态语言,其中this关键字的含义并非总是固定,而是根据函数调用的上下文...总之,this关键字的理解和应用是学习JavaScript的一个重要方面,也是进阶成为JavaScript熟练开发者所必须掌握的知识点之一。

    分析JS中this引发的bug

    在JavaScript中,`this`关键字是一个非常重要的概念,但同时也是新手开发者经常遇到困惑的地方。`this`的值在不同上下文中会发生变化,这使得理解它的行为变得至关重要。本篇文章将探讨`this`在不同场景下的指向,...

    Js作用域和this关键字1

    JavaScript中的作用域和`this`关键字是编程中非常重要的概念,尤其在JavaScript中,它们具有独特的特点和行为。本文将深入探讨这两个概念及其在实际编程中的应用。 首先,我们来看一下**作用域(Scope)**: 作用...

    深入解析JavaScript编程中的this关键字使用

    JavaScript中的`this`关键字是一个非常核心的概念,它用于在函数执行时引用当前上下文的对象。在JavaScript中,`this`的值取决于函数被调用的方式,而不是函数定义的位置。理解`this`的工作原理对于深入掌握...

    高手详解javascript中的this指针借鉴.pdf

    总结一下,`this`在JavaScript中的核心作用是引用执行代码时的上下文对象,它的值取决于函数调用的方式。要掌握`this`,需要熟悉上述四种绑定规则,并在实践中不断应用和验证。通过深入学习和实践,开发者能够更好地...

    js中Map应用

    ### JavaScript中的Map应用 在JavaScript中,`Map`对象是一种内置的数据结构,它保存键值对,并且可以按插入顺序记住元素。与普通的JavaScript对象不同的是,`Map`的键可以是任何类型的值(不仅仅是字符串或符号)...

    精通JavaScript的this关键字_.docx

    JavaScript中的`this`关键字是一个非常重要的概念,它在编程中起着至关重要的作用,尤其是在对象方法的上下文中。`this`关键字的用法类似于自然语言中的代词,它用来引用当前执行上下文的对象,帮助开发者避免命名...

    利用JavaScript开发Web应用

    JavaScript是一种由Netscape公司推出的轻量级、跨平台的脚本语言,广泛应用于Web开发,既能用于客户端,也能在服务器端发挥作用。在客户端,JavaScript嵌入到HTML文档中,当用户通过浏览器请求网页时,浏览器会解释...

    浅谈javascript中this在事件中的应用

    总结来说,在JavaScript中,`this`在事件中的应用非常灵活。它可以在全局作用域中代表全局对象,也可以在事件处理器中代表触发事件的元素。理解`this`的这些特性对于编写有效的事件处理代码非常关键。开发者需要根据...

    Vue中的this.$options.data()和this.$data用法说明

    在Vue.js中,`this.$options.data()` 和 `this.$data` 都是用来处理组件数据的,但它们的使用场景和行为有所不同。这个问题涉及到Vue实例的生命周期和数据绑定的原理。 首先,`this.$options.data()` 返回的是组件...

    javascript经典应用收藏

    JavaScript的学习通常涉及理解闭包、原型链、作用域、this关键字、异步编程(如Promise和async/await)、模块化(CommonJS、ES6模块)等高级概念。 此外,"经典"一词可能意味着包含了一些经典的JavaScript库和框架...

    JavaScript中this的9种应用场景及三种复合应用场景

    在JavaScript中,`this`关键字是一个...这九个场景和三个复合场景覆盖了JavaScript中`this`关键字的常见用法。理解`this`的动态绑定和不同上下文中的行为是JavaScript编程的基础,对于编写高效、可维护的代码至关重要。

Global site tag (gtag.js) - Google Analytics