Javascript浅谈之this


Posted in Javascript onDecember 17, 2013

介绍
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取值的原理,但害怕篇幅过长,所以决定用单独一章向大家分析一下引用对象这个概念。

Javascript 相关文章推荐
如何让页面加载完成后执行js
Jun 26 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JavaScript中filter的用法实例分析
Feb 27 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
将list转换为json失败的原因
Dec 17 #Javascript
js实现可拖动DIV的方法
Dec 17 #Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 #Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 #Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 #Javascript
javascript确认框的三种使用方法
Dec 17 #Javascript
js 剪切板应用clipboardData详细解析
Dec 17 #Javascript
You might like
php数组中删除元素的实现代码
2012/06/22 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
js实现div色块碰撞
2020/01/16 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python使用MD5加密字符串示例
2014/08/22 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python while循环使用else语句代码实例
2020/02/07 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2019广播稿怎么写
2019/04/17 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书