Douglas Crockford大师把this古怪的行为解释为和函数的调用模式有关。
js中有四种调用模式---方法、函数、构造器以及apply调用模式,它们在初始化this时候是不一样的。
1)方法模式简单的说就是使用点表达式或是下标表达式来调用 这里定然是有对象的 这种情况下 this的绑定发生在调用的时候 绑的自然是调它的那个对象了。
作为方法调用的函数有一个非常重要的属性:在方法体中,用来调用方法的对象成为关键字this的值。
2)函数模式这个就更简单了,函数名加调用运算符('()')。不过要小心,这个this绑的可是全局对象,不管你写哪了。(可以理解成 你不给我指明了 我就自己给它加个全局对象)
当一个函数作为函数调用而不是方法调用时,这个this关键字引用全局对象。容易混淆的是,当一个嵌套的函数(作为函数)在一个包含的函数中调用,而这个包含的函数是作为方法调用的,这也是成立的:this关键字在包含的函数中有一个值,但是它却(不太直观地)引用嵌套的函数体的内部的全局对象。
看个例子吧
var a = 'global';
var obj = {
a : 'local',
test : function(){
function test1(){
alert(this.a);//global
}
alert(this.a);//local
test1();
}
};
obj.test();
/*****************************解决这个问题的方法*****************************/
var a = 'global';
var obj = {
a : 'local',
test : function(){
var that = this;
function test1(){
alert(that.a);//local
}
alert(this.a);//local
test1();
}
};
obj.test();
3)构造器调用模式 一句话就是用new来调用的 new的时候this就绑定到新对象上了 比较好理解
(1)new运算符后面必须跟着一个函数调用。new创建了一个新的没有任何属性的对象,然后调用该构造函数,把新的对象作为this关键字的值传递。
(2)构造函数通常没有返回值。它们初始化作为this的值来传递的对象,并且没有返回值。但一个构造是允许返回一个对象值,并且如果它这么做,返回的对象成为new表达式的值。在此情况下,作为this的值的对象会被抛弃。可参考jQuery构造函数。
4)apply,call调用模式 apply,call是函数对象的方法,你想把谁绑定到this就直接把它作为第一个参数传给apply或call就好了。
ECMAScript规范给所有函数定义了两个方法call()和apply(),使用这两个方法可以像调用其他对象的方法一样调用函数。call()和apply()的第一个参数都是要调用的函数的对象,在函数体内这一参数是关链字this的值。call()的剩余参数是传递给要调用的函数的值。
分享到:
相关推荐
深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇) 深入理解JavaScript系列(11):执行上下文(Execution Contexts) 深入理解JavaScript系列(12):变量对象(Variable Object) 深入理解...
深入理解JavaScript系列(13):This Yes this 深入理解JavaScript系列(14):作用域链 Scope Chain 深入理解JavaScript系列(15):函数(Functions) 深入理解JavaScript系列(16):闭包(Closures) 深入...
深入理解 JavaScript 异步
深入理解JavaScript深入理解JavaScript深入理解JavaScript
格式:ZIP ...深入理解JavaScript系列(结局篇) 说明:此系列文档均为网页形式。本人将汤姆大叔(原文译者)的大作,保存收藏起来,并打包成ZIP格式,方便以后学习查阅。同时,在此分享给大家,方便下载!
NULL 博文链接:https://wv1124.iteye.com/blog/505236
包含vue基础篇、vue进阶篇、Vue模块篇三部分
Javascript 面向对象的JavaScript进阶 Javascript技术
深入理解Javascript系列
python爬虫项目合集,从基础到js逆向,包含基础篇、自动化篇、进阶篇以及验证码篇。案例涵盖各大网站(xhs douyin weibo ins boss job,jd...),你将会学到有关爬虫以及反爬虫、自动化和验证码的各方面知识.zip
vue基础知识,文章内部存在案例、分析以及js底层原理。深入解剖前端模块之间的原理,是读者更容易上手和编写,为后续自我提升帮助很大。让读者在轻松阅读中得到良好的提升
chipmunk碰撞检测进阶篇源码,实现了简单的碰撞检测、数据输出及碰撞对象销毁
js进阶阶段总结(xmind编辑的思维导图)
vue实战入门进阶篇:从零开始实现网站后台实例,使用vue+elementui实现网站管理系统后台管理界面框架搭建,实现首页、新闻、访问记录、内容发布、系统管理等界面的增删改查功能。
深入理解JavaScript(美)罗彻麦尔著.pdf
JavaScript高级语法进阶笔记
该文档是根据博客园汤姆大叔的深入理解JavaScript系列(http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html)博文整理而成,主要内容包括: 1.编写高质量JavaScript代码的基本要点 2.揭秘命名函数...