Javascript浅谈之this

 这篇文章主要介绍了Javascript中的this,有需要的朋友可以参考一下

介绍
this在各种对面对象编程中起着非常重要的作用,主要用于指向调用的对象。不过在JavaScript中,this的表现存在很大差异,特别是不同执行上下文。
 
由前文我们知道this也是属于执行上下文中的一个属性,所有它命中注定和执行上下文脱不了干系。
 
 代码如下:
activeExecutionContext = {
VO: {...},
this: thisValue};
 
 
在Javascript中,this的取值取决于调用的模式。调用模式一共有四种:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。
 
调用模式
方法调用模式
当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个方法被调用时,this被绑定到该对象,即方法调用模式中的this指向调用对象。这个理解起来非常容易,你是我的一个方法,你属于我,你的this当然指向我啦。
 
 
复制代码 代码如下:
var myObject = {
        value : 0,
        increment : function(inc) {
             this.value += typeof inc === "number" ? inc : 1;
       }    
}    
myObject.increment();
console.log(myObject.value);  //输出:1
myObject.increment(3);
console.log(myObject.value);   //输出:4
 
 
因为可以通过this访问到自己所属的对象,所有可以通过它调用和修改对象中属性或者方法。由前文可知,this作为执行上下文中属性的一员,必然是在上下文创建时才创建,所有this到对象的绑定发生在调用的时候,这属于“延迟绑定”。通过延迟绑定可以实现对this的高度复用。
 
 
复制代码 代码如下:
function showValue(){
        console.log(this.value);  
}
var a = { value : "a"};
var b = { value : "b"};
a.showValue = showValue;
b.showValue = showValue;
a.showValue();  //输出“a”
b.showValue();  //输出“b”
 
 
上例中函数showValue就属于延迟绑定。
 
函数调用模式
当一个函数并非作为一个对象的方法来调用,这时就是函数调用。函数调用模式中,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引进声明。如下
 代码如下:
function Person(name, age){
        this.name = name;
        this.age = age;
        this.say = function(){
            console.log("name : %s, age : %n", this.name, this.age);
       }
}
 
var p1 = new Person("jink", 24);
p1.say(); //输出  name : jink, age : 24
 
var p2 = new Person("张三", 33);
p2.say();//输出  name : 张三, age : 33
 
 
 
上面例子我们可以清楚看出,this是指向通过new和构造函数创建的对象。为什么会这样?这是因为在javascript中通过new调用构造函数时,new运算符调用“Person”函数的内部的[[Construct]] 方法,接着,在对象创建后,调用内部的[[Call]] 方法。 所有相同的函数“Person”都将this的值设置为新创建的对象。
 
apply调用模式
javascript中所有函数创建之后,都会自带两个方法:apply和call。这两个方法的的具体使用,我在此就不想详细说明,不知道的同学可以百度一下,挺简单的。通过两个方法,我们可以手动设置this。虽然this在创建时候是不允许修改的,但是,我们在创建之前,手动设置过,那就是另外一回事了。这一设置,可不得了,你就可以让你的对象调用任意方法,就好像你可以让汽车大海中航行,非洲象如美洲豹一样飞驰,程序员像钢琴师一样弹奏。哈哈想象总是美好的,调用归调用,但是调用了能不能实现功能就另说了。
 
 代码如下:
var programmer = { 
    name : "程序员",
    hand : "灵活的双手", 
    programme : function(){ 
        console.log(this.name+"用"+this.hand+"编写代码。");
    }
}
 
var pianist = { 
    name : "钢琴家",
    hand : "灵活的双手", 
    play : function(){ 
        console.log(this.name+"用"+this.hand+"弹奏动听的乐曲。");
    }
}
 
var player = { 
    name : "运动员",
    foot : "矫健的双腿", 
    run : function(){ 
        console.log(this.name+"用"+this.foot+"在赛场奔驰。");
    }
}
 
//循规蹈矩
programmer.programme(); //程序员用灵活的双手编写代码。
pianist.play(); //钢琴家用灵活的双手弹奏动听的乐曲。
player.run(); //运动员用矫健的双腿在赛场奔驰。
//异想天开
pianist.play.apply(programmer); //程序员用灵活的双手弹奏动听的乐曲。
player.run.apply(programmer); //程序员用undefined在赛场奔驰。   由于自身运动缺少,没有矫健的双腿
 
 
 
上面看着是不是挺有意思的,apply的第一个参数就是执行方法中的this指向。这样我们就可以借用别人的方法自己私下偷偷的用,可谓方便至极。在一些框架中经常用的此类技巧。
 
总结
关于this就说这么多,相信大家看过之后,对在不同情境中this的判定都有些了解了,本来打算讨论接下来讨论引用对象的,阐述一下方法调用模式和函数调用模式中this取值的原理,但害怕篇幅过长,所以决定用单独一章向大家分析一下引用对象这个概念。
 
 

时间: 2024-11-16 19:26:47

Javascript浅谈之this的相关文章

Javascript浅谈之this_基础知识

介绍this在各种对面对象编程中起着非常重要的作用,主要用于指向调用的对象.不过在JavaScript中,this的表现存在很大差异,特别是不同执行上下文. 由前文我们知道this也是属于执行上下文中的一个属性,所有它命中注定和执行上下文脱不了干系. 复制代码 代码如下: activeExecutionContext = {VO: {...},this: thisValue}; 在Javascript中,this的取值取决于调用的模式.调用模式一共有四种:方法调用模式.函数调用模式.构造器调用模

Javascript浅谈之引用类型_基础知识

简介1.引用类型(Reference type)引用类型是javascript中一种内部类型.它主要是当做一个指代,代替一个变量或者函数,当然在需要真实值时,又可以通过它寻找到真实值. 2.引用类型的结构引用类型的值时由两部分构成,一是引用类型的值指代的对象的所属对象,这里我们姑且把它叫做base,二是base中的指代对象的对象名称.用伪代码来表示: 复制代码 代码如下: var valueOfReferenceType = {base: <base object>,propertyName:

浅谈关于JavaScript API设计的一些建议和准则

  这篇文章主要介绍了浅谈关于JavaScript API设计的一些建议和准则,文中列举了许多知名的JS API进行辅助说明,极力推荐!需要的朋友可以参考下 设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架. (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线.软件设计,特别是作为软件设计的次类的API设计,也是一样的.但是API设计常常很少关注软件发展,因为为其他程序员写代码的重要性要次于应用UI设计和最终用户体验. 但是API设计,作为

浅谈Javascript线程及定时机制

  这篇文章主要介绍了浅谈Javascript线程及定时机制的相关资料,需要的朋友可以参考下 setTimeout.setInterval的使用 Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调函数被执行.但随着工作经验的积累,我们发现事实并非如此. 比如 ? 1 2 3 4 5 div.onclick=function(){ setTimeout(function(){ document.get

浅谈利用JavaScript进行的DDoS攻击原理与防御

        这篇文章主要介绍了浅谈利用JavaScript进行的DDoS攻击原理与防御,以及介绍了相关的中间人攻击原理,需要的朋友可以参考下            分布式拒绝服务攻击(DDoS)攻击是一种针对网站发起的最古老最普遍的攻击.Nick Sullivan是网站加速和安全服务提供商CloudFlare的一名系统工程师.近日,他撰文介绍了攻击者如何利用恶意网站.服务器劫持和中间人攻击发起DDoS攻击,并说明了如何使用HTTPS以及即将到来的名为"子资源一致性(Subresource I

浅谈javascript事件取消和阻止冒泡

这篇文章主要介绍了浅谈javascript事件取消和阻止冒泡的方法和示例,有需要的小伙伴可以参考下.     取消默认操作 w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; 在支持addEventListener()的浏览器中,也能通过调用时间对象的preventDefault()方法取消时间的默认操作.不过,在IE9之前的IE中,可以通过设置事件对象的returnValue属性为false来达到同样的效果.下面的代码假设一个事件处理程

浅谈javascript中call()、apply()、bind()的用法

  浅谈javascript中call().apply().bind()的用法         一直对Javascript中的apply/call/bind的用法很模糊,恰好看到了这篇文章.对三者之间的区别与联系算是有了比较清晰的认识.这里记录下来,分享给大家. call(thisObj,arg1,arg2...).apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法 call(thisobj[, args])和apply(thisobj[, arg

浅谈javascript属性onresize

  这篇文章主要介绍了浅谈javascript属性onresize的详细使用方法,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下. 浅谈javascript属性onresize ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 //获取屏幕宽度并动态赋值 var winWidth = 0; var winHeight = 0; function findDimensio

浅谈javascript中this在事件中的应用

 这篇文章主要介绍了浅谈javascript中this在事件中的应用实例,非常有助于我们对this关键字的理解,这里推荐给大家.     this关键字在javascript中是非常强大的,但是如果你不清楚它是怎么工作的就很难使用它.   代码如下: function dosomething(){ this.style.color="#fff"; }   上面这段代码中的this指向什么呢,运行dosomething()会输出什么呢? 在javascript中,this总是指向当前执行