JavaScript中七种函数调用方式及对应 this 的含义
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 的含义的更多相关文章
- JavaScript中七种数据类型·中·一
Standing on Shoulders of Giants; 说到JavaScript里的类型很容易就让人想起 42和"42",分别是string型和number型,但是他们可 ...
- JavaScript中四种不同的属性检测方式比较
JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...
- JavaScript中定义类的方式详解
本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...
- 【转】SVG与HTML、JavaScript的三种调用方式
原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...
- JavaScript中两种类型的全局对象/函数【转】
Snandy Stop, thinking is the essence of progress. JavaScript中两种类型的全局对象/函数 这里所说的JavaScript指浏览器环境中的包括宿 ...
- javascript中几种this指向问题
javascript中几种this指向问题 首先必须要说的是,this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象. (1).作为函数名调用 函数作为全局对象调用,this指向 ...
- c++ --> c++中四种类型转换方式
c++中四种类型转换方式 c风格转换的格式很简单(TYPE)EXPRESSION,但是c风格的类型转换有不少缺点, 1)它可以在任意类型之间转换,比如你可以把一个指向const对象的指针转换成指向 ...
- [js]javascript中4种异步
javascript中4种异步: 1.ajax 2.定时器 3.事件绑定 4,回调 定时器 //顺序执行 /* var s = 0; for (var i = 0; i < 10000; i++ ...
- JavaScript的3种继承方式
JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...
随机推荐
- 【STM32】STM32 GPIO模式理解
stm32的GPIO的配置模式有好几种,包括: 1. 模拟输入: 2. 浮空输入: 3. 上拉输入: 4. 下拉输入: 5. 开漏输出: 6. 推挽输出: 7. 复用开漏输出: 8. 复用推挽输出 如 ...
- htm、html、shtml区别
htm.html.shtml都是静态网页的后缀,三者也可以说都是只是扩展名不同,其他一样,都是静态的网页. htm和html是完全静态的网页不通过服务器编译解释直接送出给浏览器读取的静态网页,以htm ...
- 教你如何监控 Apache?
什么是 Apache? Apache 是一款 HTTP 服务器软件,现在更名为 "http",而 Apache 则成了一个(包含httpd的项目)巨大的基金组织,根据习惯后文都用 ...
- relink:在Linux/UNIX平台上relink Oracle软件(转)
当操作系统升级后.操作系统打完补丁后.安装完Oracle补丁之后和relink过程中出现问题时,都会用到relink方法来保证Oracle软件的正常使用.本文介绍一下relink方法的使用. 1. ...
- Handler sendMessage 与 obtainMessage (sendToTarget)
这篇文章讲的很好: http://www.cnblogs.com/android007/archive/2012/05/10/2494766.html 两种用法: 1. private void se ...
- ♫【网站优化】Reflow / Repaint
web移动开发最佳实践之js篇 浏览器的回流与重绘 by 张盛志 DOM性能瓶颈与Javascript性能优化 浏览器的渲染原理简介 其中一个跟浏览器有关的原因,那就是浏览器需要花时间.花精力去渲染. ...
- Python 实现网络爬虫小程序
Python很简洁,也很强大,作为兴趣,值得一学! 下面这个程序实现的是从一个网站上下载图片,根据自己需要可以进行修改 import re import urllib def gethtml(ur ...
- QT更改程序图标
方法只要几个步骤就好了,如下: 1.准备好一个ico格式的图标文件,例如demo.ico 2.创建一个rc文件, 例如demo.rc. 并copy下面代码: // Generated by ResEd ...
- 《C语言程序设计现代方法》第1章 C语言概述
C语言的特点:C语言是一种底层语言.C语言是一种小型语言.C语言是一种包容性语言. C语言的优点:高效.可移植.功能强大.灵活.标准库.与UNIX系统集成. C语言的缺点:C程序更容易隐藏错误.C程序 ...
- [CODEVS2055]集合划分
对于从1到N(1<=N<=3)的连续整数集合,划分成两个子集合,使得每个集合的数字之和相等.举个例子,如果N=3,对于{1,2,3}能划分成两个子集合,他们每个的所有数字和是相等的:{3} ...