Javascript中的this绑定介绍
Javascript中的this绑定介绍
发布时间:2016-12-30 来源:查字典编辑
摘要:而this的具体值则取决于其调用模式。*方法调用模式:this被绑定到该对象。*函数调用模式:this被绑定到全局对象,网页的情况下绑定到w...

而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这个值。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类