`

javascript里的this例子讲解

阅读更多
网上看到一篇关于this的讲解,有时候还是回搞错this的上下文,在这里再复习一下

原文:http://www.cnblogs.com/miqi2214/archive/2009/04/10/1433202.html

function clickFun(value,elemID){
	this._value = value;
			
	this._elem = document.getElementById(elemID);
			
	this._elem.ButtonFun = this;//this指向clickFun对象
			
	this._elem.onclick = this.clickHandler;//来自与原型
}
		
clickFun.prototype.clickHandler = function(){
			
	//这里为什么this是指向_elem的引用,即指向document.getElementById(elemID);
	//因为clickHandler赋给了onclick,而onclick的调用者是_elem,所以他的执行上下文为_elem对象
	//所以buttonFun是指向clickFun的引用
	var buttonFun = this.ButtonFun;
			
	var value = (buttonFun && buttonFun._value) ? buttonFun._value : "unknow value";
			
	alert("value" + value);
			
	alert("this.value" + this.value);
}
		
window.onload = function(){
	new clickFun("赋给程序的值","bt");
}



<button type="button" value="我是按钮的值" id="bt">click me~</button>


分享到:
评论

相关推荐

    javascript oop模式讲解

    在这个讲解中,我们将深入探讨JavaScript中的OOP模式,特别是如何利用它来进行DOM操作。 在JavaScript中,OOP主要基于原型(prototype)实现,与传统的类继承机制不同。JavaScript提供了构造函数、原型对象、实例、...

    javascript王者归来例子源码

    总的来说,《JavaScript王者归来》的例子源码涵盖了JavaScript语言的各个方面,从基础语法到高级特性,从同步编程到异步操作,从DOM操作到模块化开发。通过这些源码,读者不仅可以深化对JavaScript的理解,还能提升...

    javascript教程和例子

    本教程将深入讲解JavaScript的基础知识和实战应用,旨在帮助学习者掌握这一强大的脚本语言。 一、基础语法 1. 变量与数据类型:JavaScript支持var、let和const三种声明变量的方式,数据类型包括基本类型(如字符串...

    【JavaScript源代码】vue 中this.$set 动态绑定数据的案例讲解.docx

    尽管这个例子中看起来是直接赋值,但其实它与直接设置整个 `textJson` 一样,会触发视图更新。 ```javascript vm.$set(vm.textJson[1], 't5', textJson300[1].t5); ``` 值得注意的是,当直接通过索引或者点号...

    JavaScript 面向对象编程详细讲解文档

    在这个例子中,`Child`继承了`Parent`的`greet`方法,并添加了自己的`introduce`方法。`Parent.call(this, name)`确保`Parent`构造函数在`Child`的上下文中正确执行。 总的来说,JavaScript的面向对象编程依赖于...

    【JavaScript源代码】Javascript中函数分类&this指向的实例详解.docx

    通过本文的讲解和示例,我们可以看到JavaScript中的函数具有高度的灵活性,可以通过多种方式定义和使用。同时,`this`关键字的指向也是一个需要特别注意的概念。掌握好这些基础知识,可以帮助我们更好地理解和编写...

    JavaScript编程中实现对象封装特性的实例讲解

    本文将深入探讨如何在JavaScript中实现对象封装,并参考阮一峰老师的实例进行讲解。 首先,让我们了解JavaScript中的构造函数。构造函数是一种特殊的函数,用于创建和初始化对象。当我们使用`new`关键字调用一个...

    Javascript中的封装与继承

    JavaScript是Web开发中不可或缺的一部分,尤其在前端领域更是发挥着至关重要的作用。在这个文档中,我们将深入探讨JavaScript中的封装和继承这两个核心概念,...不断地学习和实践,你将在JavaScript的世界里游刃有余。

    JavaScript权威指南(第6版)(中文版+英文版+书中例子源码)

    书中详细讲解了函数表达式、函数声明、参数、作用域和this的概念。 3. **对象与原型**:JavaScript的面向对象特性基于原型,书中解释了如何创建和操作对象,包括字面量表示法、构造函数、原型链、__proto__属性以及...

    JavaScript课件完整版

    JavaScript,作为全球最广泛使用的编程语言之一,是创建交互式网页和网络应用的关键工具。这份“JavaScript课件完整版”提供了...每个主题都会深入讲解,并配以实际例子和练习,确保理论与实践相结合,让学习更加高效。

    讲解JavaScript的面向对象的编程

    1. 下载解压之后,首先打开Contructor and object used.html文档,使用IE运行之后,查看原代码,代码中一行注释一行代码说明了this与prototype关键在使用function数据类型来定义JavaScript类的成员变量和普通方法的...

    JavaScript编程中实现对象封装特性的实例讲解_.docx

    下面将详细讲解如何在JavaScript中实现对象封装,并探讨其在安全性方面的影响。 1. 构造函数与原型对象 构造函数是创建具有特定属性和方法的对象的模板。在JavaScript中,我们通常使用`function`关键字定义构造...

    实例讲解JavaScript中的this指向错误解决方法

    本文将通过实例来深入讲解JavaScript中`this`指向错误及其解决方法。 首先,我们来看一个简单的例子: ```javascript 'use strict'; var jane = { name: 'Jane', display: function() { return 'Person named '...

    JavaScript权威指南(第五版) 英文版

    再者,本书深入讲解了JavaScript的面向对象特性。JavaScript虽然没有严格的类系统,但支持基于原型的继承和构造函数,这使得它在实现复杂应用程序时具有很大的灵活性。此外,还介绍了闭包、作用域、this关键字等高级...

    JavaScript语言精粹.源代码

    《JavaScript语言精粹》是一本深受开发者喜爱的经典书籍,它深入浅出地讲解了JavaScript的核心概念和技术,帮助读者掌握这门语言的精髓。下面,我们将详细探讨这本书中涉及的一些重要知识点,并结合源代码"example_...

    js常用例子(超实用)

    这个名为"js常用例子(超实用)"的压缩包文件包含了一系列与JavaScript相关的实例,覆盖了从基础到进阶的不同章节,旨在帮助学习者更好地理解和运用JavaScript。以下是根据章节名称推测出的一些可能涵盖的知识点: 1....

    javascript与jquery中的this关键字用法实例分析

    本文将结合实例,分析JavaScript和jQuery中this关键字的用法,并讲解如何获取当前对象的技巧。 首先,在JavaScript中,this的值取决于函数被调用的方式,这通常被称为函数调用的上下文。主要分为以下几种情况: 1....

    由浅到深了解JavaScript类.doc

    本文将从基础出发,逐步深入地讲解JavaScript中的类。 首先,类是对现实世界的一种抽象,它代表一个特定的类别或类型。比如在人类的例子中,"人"可以被视为一个类,每个人都是这个类的一个实例,每个实例有自己的...

    实例讲解JavaScript的Backbone.js框架中的View视图_.docx

    Backbone.js是一个轻量级的JavaScript库,用于构建结构化的web应用。它提供了一种简单的方式来组织代码,包括模型(Models)、集合(Collections)以及视图(Views)。本文将深入探讨Backbone.js框架中的View视图...

Global site tag (gtag.js) - Google Analytics