本节内容:
javascript中this的用法
在javascript编程语言中,this在各种对面对象编程中起着非常重要的作用,主要用于指向调用的对象。
不过在JavaScript中,this的表现存在很大差异,特别是不同执行上下文。
在javascript中,this也是属于执行上下文中的一个属性,所有它命中注定和执行上下文脱不了干系。
例子:
在Javascript中,this的取值取决于调用的模式。
调用模式一共有四种:
方法调用模式、函数调用模式、构造器调用模式和apply调用模式。
一,调用模式
1,方法调用模式
当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用时,this被绑定到该对象,即方法调用模式中的this指向调用对象。
比较容易理解:你是我的一个方法,你属于我,你的this当然指向我啦。
例子:
因为可以通过this访问到自己所属的对象,所有可以通过它调用和修改对象中属性或者方法。
this作为执行上下文中属性的一员,必然是在上下文创建时才创建,所有this到对象的绑定发生在调用的时候,这属于“延迟绑定”。
通过延迟绑定可以实现对this的高度复用。
例子:
上例中函数showValue就属于延迟绑定。
2,函数调用模式
当一个函数并非作为一个对象的方法来调用,这时就是函数调用。函数调用模式中,this被绑定到全局对象。
(这是语言设计上的一个错误)
例子:
myObject.double = function(){
var that = this; //解决方法
var helper = function(){
console.log(that, ": ", that.value); //输出 Object {value: 4, increment: function, double: function} ": " 4
console.log(this, ": ", this.value); //输出 Window {top: Window, window: Window…} ": " undefined
}
helper(); //以函数形式调用
}
按照正常思路,应该如第四行所输出那样,this指向函数所属对象,可是由于语言设计上面的问题导致this指向的却是全局对象。这个更是让this变得神秘,令人捉摸不透。
但是作为开发者,这种情况肯定是所不愿意见到的,不按常理出牌这是,还好补救措施也很简单,就是上例中用that指代this。
这样,在helper方法中调用that就可以当this使用,简单方便。至于函数调用模式为什么this会这样,后面在分析引用类型时会详加说明。
三,构造器调用模式
由于javascript是基于原型继承,但是它的设计者又想要它能像传统的面向对象语言那样能通过new和构造函数创建对象,现实面向对象编程。
javascript的原型继承机制已经非常强大,足以满足面向对象所需的继承多态。
构造器调用模式这个非常简单,它就是就一个函数当做构造器,然后将你打算公用的属性和方法用this引进声明。
例子:
以上例子可以清楚看出,this是指向通过new和构造函数创建的对象。为什么会这样?
因为在javascript中通过new调用构造函数时,new运算符调用“Person”函数的内部的[[Construct]] 方法。
接着,在对象创建后,调用内部的[[Call]] 方法。 所有相同的函数“Person”都将this的值设置为新创建的对象。
四,apply调用模式
javascript中所有函数创建之后,都会自带两个方法:apply和call。
通过两个方法,可以手动设置this。虽然this在创建时候是不允许修改的,但是,在创建之前,手动设置过,那就是另外一回事了。
这一设置,可不得了,你就可以让你的对象调用任意方法,
例子:
以上代码中,apply的第一个参数就是执行方法中的this指向。这样我们就可以借用别人的方法自己私下偷偷的用,可谓方便至极。
在一些框架中经常用的此类技巧。
>>> 您可能感兴趣的文章:
详解JavaScript中this的用法
分享:js函数中this关键字对变量作用域的影响
javascript函数内部的this对象
javascript对象之this、currentTarget和target
javascript中this对象的例子
JS显示当前(this)控件字符串及this用法详解
解析Javascript的this用法
javascript面向对象之this用法举例
javascript面向对象编程之this详解