this 在 JavaScript 开发中占有相当重要的地位,不过很多人对this这个东西都感觉到琢磨不透。要真正理解JavaScript的函数机制,就非常有必要搞清楚this到底是怎么回事。

函数调用方式不同,this 含义也跟着不同。JavaScript语言中有七种调用函数方式:
 
第一种:调用方法
var obj = {
    method: function() { alert(this === obj); }
}
obj.method();
上面这行obj.method()显然method是作为方法被调用,这种情况下,函数体中的this绑定的就是method的宿主对象,也就是obj。
从这种调用方式我们得出第一定律:
第一定律:以方法方式调用函数,this则绑定宿主对象。

第二种:调用全局函数
var method = function(){alert(this === window);}
method();
上面这个函数是个全局函数。我们知道,全局变量或函数都相当于window对象的属性。也就是说,上面这句实际上等同于下面这句:
window.method = function(){alert(this === window);}
window.method();
既然这样,那么这里 this 绑定到 window 对象就显而易见,很容易理解了。相当于方法调用模式的一个特例,并不违背第一定律。

第三种:全局函数内调用内部函数

var m_ext = function() {
    alert(this === window);
    var m_inner = function() {
        alert(this === window);
    }
    m_inner();
}
m_ext();
执行上面这段代码,你会惊讶的发现,两个布尔表达式的值都是真。也就是说子函数孙函数,只要是以函数的方式调用,this 就铁了心绑定 window 对象了。从这种调用方式我们得出第二定律:
第二定律:不论子函数孙函数,只要是以函数的方式调用,this 就铁了心绑定 window 对象。

第四种:方法内调用内部函数

var obj = {};
obj.method = function() {
    alert(this === obj);
    var m_inner = function() {
        alert(this === window);
    }
    m_inner();
}
obj.method();
执行上面这段代码,第一个this绑定到obj你不奇怪,第二个this绑定到window其实也不奇怪。它仍然遵守第二定律,也就是不论子函数孙函数,只要是以函数的方式调用,this 就铁了心绑定 window 对象。

第五种:作为构造函数调用

function Person(name, age){
    this.name = name;
    this.age = age;
}
var john = new Person('John', 38);
alert(JSON.stringify(john));
你会说,哇,这很眼熟。生成某个类的新对象啊。Javascript就是这么另类,函数确实可以这么调。
这次弹出的是这样一个字符串:{"name":"John","age":38}。哇,这次我明明没在函数定义里写return 语句,它却主动返回了一个对象给我。没错,即便你在函数定义里return某个东西,它也不会理你。(注意:如果你return一个function就会有惊喜,不信你试试看)。从这种调用方式我们得出第三定律:
第三定律:如果在一个函数本身没有返回值,在其前面加上 new 调用,就会创建一个连接到该函数 prototype 属性的新对象,再把 this 绑定到该对象,然后执行该函数,最后返回该对象。如果该函数有返回值,且返回值为字符串/数字/布尔值等简单对象的话,该返回值会被丢弃。但如果该函数的返回值为对象,函数或者数组等复杂对象的话,该函数则会返回该返回值,抛弃this绑定的对象。据我测试,如果返回值是一个函数时,该函数会返回undefined。我暂时还不知道为什么会这样。

第六种:用函数对象的apply方法调用

var my_concat = function(stra, strb){
    alert(this);
    return stra + '' + strb;
}
var param = ['hello', ' world']
alert(my_concat.apply('bullshit', param));

你一定注意了,在这里 this 绑定的是apply方法的第一个参数 'bullshit'。从这里我们得出第四定律:
第四定律:用方法的apply/call方法调用方法时,this 则被绑定到apply/call方法的第一个参数。
想谁就是谁,嗯,吴妈也行。JavaScript的程序员们好幸福哦。

第七种:用函数对象的call方法调用
var my_concat = function(stra, strb){
    alert(this);
    return stra + '' + strb;
}
alert(my_concat.call('bullshit', 'hello',' world'));

对啦,你或许会多问一句,apply 的第二个参数有什么规定?call方法和apply又有什么不同?嗯 ,真是勤学好问,我就再啰嗦一下说说apply和call:

apply 和 call 的区别:

apply要求第二个参数必须是数组。否则就会报 TypeError: second argument to Function.prototype.apply must be an array. 而call则没这么严格啦,第二个参数要什么类型?随意啦,还可以有第三个第四个第五个第六个....啦。

我想我说的够清楚了。感谢《JavaScript The Good Parts》和《JavaScript Definitive Guide》,要不然我也弄不明白呢!

JavaScript中七种函数调用方式及对应 this 的含义的更多相关文章

  1. JavaScript中七种数据类型·中·一

    Standing on Shoulders of Giants; 说到JavaScript里的类型很容易就让人想起 42和"42",分别是string型和number型,但是他们可 ...

  2. JavaScript中四种不同的属性检测方式比较

    JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...

  3. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  4. 【转】SVG与HTML、JavaScript的三种调用方式

    原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...

  5. JavaScript中两种类型的全局对象/函数【转】

    Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...

  6. javascript中几种this指向问题

    javascript中几种this指向问题   首先必须要说的是,this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象. (1).作为函数名调用   函数作为全局对象调用,this指向 ...

  7. c++ --> c++中四种类型转换方式

    c++中四种类型转换方式   c风格转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少缺点, 1)它可以在任意类型之间转换,比如你可以把一个指向const对象的指针转换成指向 ...

  8. [js]javascript中4种异步

    javascript中4种异步: 1.ajax 2.定时器 3.事件绑定 4,回调 定时器 //顺序执行 /* var s = 0; for (var i = 0; i < 10000; i++ ...

  9. JavaScript的3种继承方式

    JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...

随机推荐

  1. OC - 正则表达式 - RegexKitLite

    正则表达式使用步骤: 1. 创建正则表达式对象, 设置约束条件; NSString *pattern = @"\\d{1,3}"; NSRegularExpression *reg ...

  2. BZOJ 1044

    1044: [HAOI2008]木棍分割 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1393  Solved: 497[Submit][Statu ...

  3. Hdu 2979 Expensive Drink

    Description There are some water, milk and wine in your kitchen. Your naughty little sister made som ...

  4. SQL Server 2008 用户SA登录失败(错误18456)之图文解决方法

    SQL2008无法连接到.\SQLEXPRESS,用户'sa'登录失败(错误18456)图文解决方法 出现问题 : 标题: 连接到服务器 ------------------------------ ...

  5. Eclipse怎样导入github上的项目

    国外有些比较好的源代码网站,经常需要从这些网站上导入项目到eclipse中,我最近就发现github.com这个网站上有很多开源项目.这里就以从github网站上导入项目到eclipse中为例来详细的 ...

  6. [笔记] 走进 Pocket,看看只有 20 位员工的 Pocket 是如何搞定 2000 万用户的

    走进 Pocket,看看只有 20 位员工的 Pocket 是如何搞定 2000 万用户的 保持专注. 不断更新优先级. 对产品有主人翁意识. (觉得做好产品是自己的职责, 不是应付工作) 你的用户如 ...

  7. 机器学习10大经典算法.doc

    详见 F:\工程硕士\d电子书\26 数据挖掘 小结: 1. C4.5 C4.5算法是机器学习算法中的一种分类决策树算法,其核心算法是ID3算法.  C4.5算法继承了ID3算法的优点,并在以下几方面 ...

  8. WebLogic12c 注册windows系统服务

    1.确认操作系统环境变量中的JAVA_HOME=D:\Oracle\Middleware\jdk160_29与安装部署的位置保持一致: 2.编辑D:\Oracle\Middleware\wlserve ...

  9. Makefile第三讲:终端传值给Makefile、Makefile传值给C++代码

    摘要 终端传值给Makefile,咋传?只需在终端输入以下命令,那么就可以在Makefile文件中放心大担的使用$(abcde)这个变量了,它的值为BBB Makefile fun.h #includ ...

  10. [转]IIS上部署网站

    如何在IIS6,7中部署ASP.NET网站 阅读目录 开始 查看web.config文件 在IIS中创建网站 IIS6 添加扩展名映射 IIS6 无扩展名的映射 目录的写入权限 SQL SERVER的 ...