`
zcdxzsz
  • 浏览: 74521 次
  • 来自: ...
社区版块
存档分类
最新评论

[转] Javascript中this用法小结

阅读更多
1. 概述
this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在javascript中,由于 javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的自由和灵活,结合apply(call)方法,可以使JS变得异常强大。

2.变化的this
在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)。当我们在页面中定义了函数 doSomething()的时候,它的owner是页面,或者是JavaScript中的window对象(或 global对象)。对于一个onclick属性,它为它所属的HTML元素所拥有,this应该指向该HTML元素。

2.1在几种常见场景中this的变化

函数示例
function doSomething ()
{
alert(this.navigator); //appCodeName
this.value = "I am from the Object constructor";
this.style.backgroundColor = "# 000000";
}
1. (A)作为普通函数直接调用时,this指向window对象.

2. (B)作为控件事件触发时

1) inline event registration 内联事件注册 .将事件直接写在HTML代码中(<element

onclick=”doSomething()”>), 此时this指向 window对象 。

2) Traditional event registration 传统事件注册 (DHTML方式).
形如 element.onclick = doSomething; 此时this指向 element对象

3) <element onclick=”doSomething(this)”>作为参数传递可以指向element

3. (C)作为对象使用时this指向当前对象。形如:new doSomething();
4. (D)使用apply 或者call方法时,this指向所传递的对象。

形如:var obj={}; doSomething.apply(obj,new Array(”nothing”); //thisobj
2.2 this 指向分析

1 A场景。
直接调用的情况下,doSomething的运行时拥有者是window对象,因此this指向window
图示:

图1:A场景

2 B场景。
1)Traditional Event Registration
当我们要让函数中的this指向当前HTMLELEMENT时,可这样写
element.onclick = doSomething;
doSomething的引用(地址)赋给了element的onclick属性(这样就成为了函数)。此时
doSomething运行时拥有者(owner)就变成了element,this便指向了element。

图示:

图2: B场景 Traditional Event Registration

进行批量添加事件时,this均可正确指向。

图示:

图3: 多次Traditonal Event Registration

2) Inline Event Registration
形如 <element onclick=”doSomething()”>
图示:

图4:B场景 Inline Event Registration

这两种注册方式的区别是
element.onclick = doSomething;
alert(element.onclick)
可以得到
function doSomething() {
alert(this.navigator); //appCodeName
this.value = "I am from the Object constructor";
this.style.backgroundColor = "# 000000";
}
可以看到this关键字被展现在onclick函数中,它指向HTML元素。

如果执行
<element onclick="doSomething()">
al ert(element.onclick)

可以得到 :
function onclick(){
doSomething();
}

这仅仅是对doSomething()函数的一次调用,而doShomething的拥有者是window,因此 doSomething内的this指向window对象(啰嗦哦…….).

3 . C场景
具体内部细节不太了解,不知道是否可以这样理解
new doSomething(…..)
约等同于
var tempObj = {}; doSomething.apply(obj,new Array());
这样tempObj 可以得到doSomething内所定义的属性和方法,但是对 于 doSomething.prototype上的属性方法无法得到-_-!!

4 D场景
不懂…..

完了
不专业,比较浅显,想不出几个专有名词,郁闷~

PS 1:好多内容是copy的(*_*!),对图中表达有点疑意。图上多次写出 copy of function ,按照字面理解是函数对象的拷贝,我认为实际上是一个引用拷贝,对象拷贝是不可能的,如果是这样的话,每次添加事件都会拷贝一次对象,这显然不妥。

PS 2: 因为this指向在运行时才确定,我们经常碰到一个问题,当给一个DOM对象添加事件后,我们希望this指向一个指定对象,而非DOM对象本身,如下例。
<input type="button" id='btn' />
<script language="javascript">function btnObj(id)
{
this.disabled = true;
this.btn=document.getElementById(id);
/*
this.btn.onclick = btnOnclick ;
假如我们这样写,this会指向DOM对象,btnOnclick执行过程会报错
因为DOM btn并没有一个btn属性
*/
//通过这种方式可以解决这个问题[有些情况也可用tempThis = this这种形式]
this.btn.onclick = passHandler(this,btnOnclick);}function btnOnclick()
{

//如果this是DOM对象,这里就会报错,因为没有btn属性
this.btn.disabled = this.disabled;
}

function passHandler(obj,fun,arg)
{
return function(){
//if(!arg) {var arg = [];}
return fun.apply(obj,(arg?arg:[]));
}
}

new btnObj(”btn”);
</script>
分享到:
评论

相关推荐

    javascript中的self和this用法小结

    本文将围绕self与this在JavaScript中的用法进行详细解析。 首先,我们从一段代码片段引入了self和this这两个概念的讨论。在JavaScript中,self并不是一个保留字或内置关键字,而是开发者通常用于指代this的一个变量...

    JavaScript中textRange对象使用方法小结

    以下是TextRange对象使用方法的详细介绍: 属性和方法: 1. boundingHeight: 此属性用于获取TextRange对象绑定矩形区域的高度。通过它可以确定文本范围在页面上所占的空间大小。 2. boundingLeft: 获取TextRange...

    Javascript 面向对象编程小结

    这篇博客“JavaScript 面向对象编程小结”可能涵盖了JavaScript中实现OOP的一些核心概念和技巧。 首先,面向对象编程的基础是类与对象。在JavaScript中,虽然没有像Java或C++那样的传统类机制,但是可以通过构造...

    javascript this用法小结

    最后,在实际编程中,若需要确保this的指向不变,可以使用诸如bind方法或闭包等技术来固定this的值。例如,使用bind方法可以创建一个新的函数实例,其this值被永久地绑定到传入bind的第一个参数,无论何时调用这个新...

    javascript Promise简单学习使用方法小结.docx

    ### JavaScript Promise 学习使用方法小结 #### 一、Promise 概述 在JavaScript中,Promise 是一种用于处理异步操作的模式。它提供了一种更优雅的方式来处理异步流程,避免了传统的回调地狱(Callback Hell)问题...

    javascript Promise简洁学习用法方法小结_.docx

    在JavaScript中,Promise是一种用于处理异步操作的方法,它有效地解决了回调地狱的问题。本文将深入探讨Promise的基础概念、实现原理以及具体应用场景。 #### 二、Promise的概念 Promise 是 JavaScript 语言内置的...

    JavaScript作用小结.doc

    ### JavaScript作用小结 #### 一、创建脚本块 在HTML文档中嵌入JavaScript时,最常用的方式是使用`&lt;script&gt;`标签。这可以使开发者能够编写并包含一段JavaScript代码。 1. **基本语法** ```html ...

    javascript刷新页面方法小结

    在IT领域,特别是Web开发中,JavaScript作为前端开发的核心语言之一,其功能强大且灵活,能够实现各种网页交互效果。其中,网页刷新是常见的需求之一,用于更新显示内容或重新加载资源。根据提供的文件信息,我们...

    javascript面试应急知识点小结

    这篇小结将聚焦于JavaScript的基础和进阶知识,帮助你在面试中表现出色。以下是对"javascript面试应急知识点小结"的详细解析。 一、基础概念 1. 变量与数据类型:JavaScript有七种数据类型,包括基本数据类型...

    javascript对象的相关操作小结

    JavaScript中的对象是编程的核心概念,它们允许我们组织和存储数据,并通过方法进行操作。下面是对JavaScript对象相关操作的总结。 1. **BOM (Browser Object Model)** 浏览器对象模型是JavaScript与浏览器交互的...

    java中this&super的用法小结.doc

    当在同一个类中需要调用另一个成员方法时,虽然可以省略`this`,但使用它可以增加代码的清晰度。例如,`this.method()`表明你正在调用当前对象的`method()`方法。 ### `super` `super`关键字则用于引用父类的相关...

    javascript中Date format(js日期格式化)方法小结.docx

    ### JavaScript中的Date Format(JS日期格式化)方法详解 #### 概述 在日常的Web开发工作中,我们经常需要处理日期和时间相关的数据。JavaScript 的 `Date` 对象提供了多种方法来获取和设置日期时间,但原生 API 并...

    javascript继承的六大模式小结

    JavaScript中的继承机制是其面向对象编程的核心特性,它允许创建基于现有对象的新对象,从而实现代码的重用和扩展。本文将深入探讨JavaScript继承的六大模式:原型链、借用构造函数、组合继承、原型式继承、寄生式...

    JavaScript中的this基本问题实例小结

    JavaScript中的`this`关键字是一个非常重要的概念,它用于引用当前执行环境的对象。`this`的值不是在函数定义时确定的,而是在函数被调用时根据调用方式动态决定的。下面我们将深入探讨`this`的基本问题及其应用场景...

    js中call与apply的用法小结

    `call` 和 `apply` 在JavaScript中扮演着至关重要的角色,它们提供了改变`this`上下文的能力,使得我们可以灵活地调用函数,尤其是在处理继承和对象方法时。理解并熟练掌握这两种方法的用法,对于提升JavaScript编程...

    每天一篇javascript学习小结(面向对象编程)

    此外,我们还可以使用原型链(prototype)来实现方法的共享,这在JavaScript中是一种常见的优化手段。每个构造函数都有一个`prototype`属性,这个属性是一个对象,它的`constructor`属性指向构造函数本身。当试图...

    JavaScript定义类或函数的几种方式小结

    在JavaScript中,构造函数使用new关键字进行调用,它们与工厂函数相似,但不同之处在于构造函数使用this关键字来绑定新对象的属性和方法。构造函数方式的代码示例如下: ```javascript function Car(color, doors) ...

Global site tag (gtag.js) - Google Analytics