Javascript中的this绑定介绍

而this的具体值则取决于其调用模式。
* 方法调用模式：this被绑定到该对象。
* 函数调用模式：this被绑定到全局对象，网页的情况下绑定到window
* 构造器调用模式：this被绑定到新生成的对象。
* 事件处理调用模式分两种情况：参照
* this被绑定到全局对象


代码如下:

<script type="text/javascript">
function click_handler() {
alert(this); // alerts the window object
}
</script>
...
<button id='thebutton' onclick='click_handler()'>Click me!</button>

* this被绑定到DOM对象


代码如下:

<script type="text/javascript">
function click_handler() {
alert(this); // alerts the button DOM node
}
function addhandler() {
document.getElementById('thebutton').onclick = click_handler;
}
window.onload = addhandler;
</script>
...
<button id='thebutton'>Click me!</button>

由于函数调用的上下文的变化导致了this的不确定性。为了更好的明确this上下文，可以使用call和apply两个方法来明确化this绑定的值。
call和apply的区别仅仅在于参数上的区别：call接受任意参数列表，apply接受一个参数数组对象。这也使得apply可以接受arguments作为其第二参数。


代码如下:

func.call(obj1,var1,var2,var3)
func.apply(obj1, [var1,var2,var3])
func.apply(obj1, arguments)

但是call和apply方式都是立即执行的，如果需要后来使用的话，就不能满足条件，如下例，其中13行和14行无论是否使用call都无法得到我们需要的值(42)。


代码如下:

<script type="text/javascript">
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
alert(this.the_answer);
}
}
function addhandler() {
var deep_thought = new BigComputer(42),
the_button = document.getElementById('thebutton');
//the_button.onclick = deep_thought.ask_question;
the_button.onclick = deep_thought.ask_question.call(deep_thought);
}
window.onload = addhandler;
</script>

这个时候就是bind方法大显身手的时候（该方法已经在ECMA-262第五版已经加入），最早出现在Prototype框架中（未确认过）。bind和call，apply一样，也是变更函数执行的上下文，也即函数执行时this的值。不同的在于，它返回一个函数引用以供后续使用，其简单实现如下：


代码如下:

Function.prototype.bind = function(object) {
var method = this;
return function() {
method.apply(object, arguments);
}
}

具体实现上利用闭包特性，返回来的函数引用在执行的时候，可以访问创建该函数引用时的method和object两个参数，而不是使用this，this在执行的时候会重新被绑定，而不是原来的method这个值。

赞 (0)

相关推荐

  • 简单谈谈javascript中this的隐式绑定

    我们先来看一个例子 function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; obj.foo(); // 2 this指向了obj,因为foo执行时的call-site(可以理解为调用时所在作用域)在obj上面.注意是运行的时候,和在哪里声明的没有关系. call-site and call-stack call-site姑且理解为调用域,call-stack为调用栈.如下代码可以辅助我们理解 function

  • 详细讲解JavaScript中的this绑定

    this 可以说是 javascript 中最耐人寻味的一个特性,就像高中英语里各种时态,比如被动时态,过去时,现在时,过去进行时一样,无论弄错过多少次,下一次依然可能弄错.本文启发于<你不知道的JavaScript上卷>,对 javasript 中的 this 进行一个总结. 学习 this 的第一步就是明白 this 既不是指向函数自身也不指向函数的作用域.this 实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用. 默认绑定 在 javascript 中 ,最常

  • JavaScript中this的四个绑定规则总结

    前言 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅.所以这篇文章开始将介绍javascript中this的四个绑定规则,下面来一起看看吧. 绑定规则 1. 默认绑定 独立函数调用时,this 指向全局对象,如果使用严格模式,那么全局对象无法使用默认绑定, this绑定至 undefined. function foo() { console.log(this.a); } var a = 2; foo(); // 2 严格模式时: function fo

  • Javascript中this绑定的3种方法与比较

    介绍 this 可以说是 javascript 中最耐人寻味的一个特性,学习this 的第一步就是明白 this 既不是指向函数自身也不指向函数的作用域. this 实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用. 为什么需要绑定this this代指当前的上下文环境,在不经意间容易改变: var info = "This is global info"; var obj = { info: 'This is local info', getInfo: ge

  • JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题

    先来看看现象: 复制代码 代码如下: <html> <head> <title>apply_and_call</title> </head> <body onload="init()"> <div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px&q

  • js绑定事件this指向发生改变的问题解决方法

    可对函数进行如下扩展 复制代码 代码如下: Function.prototype.bind = function(obj) { var _this = this; return function() { _this.apply(obj,arguments); } } 用法如下 复制代码 代码如下: var a = function(){ alert(this.title) }.bind(document); a(); 常用在这儿 复制代码 代码如下: function myalert() { t

  • js中的this关键字详解

    this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, 复制代码 代码如下: function test(){ this.x = 1; } 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 下面分四种情况,详细讨论this的用法. 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global. 请看下面这段代码,它的运行结果是1.

  • javascript this用法小结

    javascript this用法小结

    this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascript中,由于 javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定.这个特性在给我们带来迷惑的同时也带来了编程上的 自由和灵活,结合apply(call)方法,可以使JS变得异常强大.2.变化的this 在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时).当我们在页面中定义

  • javascript中onclick(this)用法介绍

    this指触发事件的对象 复制代码 代码如下: <input id="myinput" type="text" value="javascript中onclick中的this" onclick="javascript:test(this);"/> 复制代码 代码如下: function test(obj){ alert(obj); //[object HTMLInputElement] alert(obj.id);

  • javascript下动态this与动态绑定实例代码

    那么函数就是被掰成两部分储存于对象,一是其函数名(键),一是函数体(值),那么函数中的this一般都指向函数所在的对象.但这是一般而已,在全局调用函数时,我们并没有看到调用者,或者这时就是window.不过,函数声明后,其实并没有绑定到任何对象,因此我们可以用call apply这些方法设置调用者. 一个简单的例子: [script] <script> window.name = "window"; var run = function() { alert("My

随机推荐